Building Websites With Framer

The current generation of website builders, most notably Framer and Webflow, promises to finally unite the ease of use of a design tool and the clean code of a human developer. They ride along the wave of “no-code” tools that want to enable people to build software products without writing code.

I wanted to test-drive some of these tools for a while and finally found the time to do so. The result: A fully functioning website designed and built in less than a day.

A Familiar Interface

Framer looks and feels like a UI design tool. You draw rectangles, set text, and move everything around on a canvas. You can import designs from Figma, pick a template as a starting point, or let the AI design a website for you based on a simple text prompt.

On top of that are the web-specific settings and options. How should elements behave when the available space changes? What about interactions and animations? Framer makes it easy to build a modern, interactive website without writing a line of code. The interface looks and feels familiar and even without the knowledge of underlying concepts like Flexbox, you can get started building sites in no time.

Breakpoints Or Fluid Scales?

To accommodate different screen sizes, Framer lets you change the design of your site for different breakpoints. You start with one main screen size (“Desktop” by default) and create additional breakpoints (like “Tablet” and “Mobile”) from there. This gives you a lot of control over how exactly your site looks on different screen sizes, but it can become a bit tedious to create and maintain all these different breakpoint styles.

Since Framer shines when building small websites that only consist of a few pages, that's not that big of a deal. I did not test their CMS functionality, but it did not seem to be the focus of the product anyway.

However, even for a one-page website, one could use fluid scales instead of fixed breakpoints. That is currently not possible with Framer's built-in tools, everything is designed for fixed breakpoints. You could probably still implement fluid scales with custom code, but then why use a website builder in the first place?

Speed And Ease Of Use

The final result of my experiment is a simple website that works well on different screen sizes (it uses four breakpoints) and loads fast (nearly perfect scores in Lighthouse, out of the box). The whole thing was created in less than a day, from the initial concept to the final site. I did some early design explorations in Figma (simply because I felt more comfortable there), but once I settled for a design direction, I quickly moved to Framer and built a few variations of the site. You can check out the live version here: https://original-clicks-618482.framer.app/

Thanks to its ease of use and quite a lot of features, Framer is also great for prototyping! With multiple pages, animations, and the support of custom code, you can create quite sophisticated prototypes that can be shared and tested easily. And who knows, maybe they will support fluid scales in the future, too?