Framer has been around for awhile as a prototyping tool, but over the past 2 years they’ve pivoted to a no-code website builder.

If you know me personally, you’ve likely heard me sing the praises of Webflow at one point or another (and make the disclaimer that I’m not actually employed by Webflow).

I’ve been a Webflow fan for years. While I love and still recommend it, Framer is now our platform of choice for websites.

Speed to Market

Framer’s ability to launch pixel perfect designed web pages (while maintaining complete control) is unparalleled. There’s a number of reasons why building websites in Framer is so fast.

Heavily Inspired by Figma

Framer understands that the pros are designing websites in Figma, so they’ve designed and organized their UI similarly. This means a designer can jump in and they immediately know their way around. They even borrowed much of Figma’s vernacular (for example components), which work in a similar manner.

Figma (left) vs Framer (right).  The UI are so similar I sometimes forget which app I’m in.

A True No-Code Solution

Webflow was a pioneer in creating a website builder that gave you complete control over your layouts without having to write code by hand. While it's an amazing tool, Webflow still requires a working knowledge of front-end development.

I consider Webflow a “low code” solution. Their UI is a visual canvas to create and manage HTML elements and CSS properties. It’s a huge leap forward, but you’ll likely still need a developer’s involvement to build a Webflow website.

Framer on the other hand requires zero working knowledge of front-end development. Instead of using CSS classes (which become a mess as they grow), they rely on repeatable styles that are far simpler to manage. Instead of learning the CSS box model to build layouts, designers use “Frames'' which make creating layouts familiar. The process is nearly identical to the process of creating and using auto-layout in Figma.

Framer styles (left) vs Webflow classes (right)

All of a sudden my team of designers can now create production ready websites—no developers required.  No development also means no loss of fidelity when translating design to code, and fewer people in the assembly line when it comes to making big changes.

Copy/Paste from Figma to Framer

The Figma to Framer plugin allows you to copy/paste your designs directly into Framer from Figma.  It doesn’t always work perfectly, but if you set up frames properly with auto layout, it works well enough and saves a ton of time.

Performance Out of the Box

Framer’s performance is great. It’s a hosted solution, and their hosting setup is on par with Webflow. Both are some of the fastest we’ve seen.

Framer is built on React. React’s virtual DOM means after initial load, subsequent pages load almost instantly. Your website feels like an app.

The nice thing about Framer’s performance is that, similar to Webflow, it “just works.”  There’s no extensive optimization or server configuration needed to get blazing fast performance on day one. Trying to get a WordPress or Drupal website to this level of performance can be painful and time consuming.

Other Framer Highlights

An intuitive CMS makes it easy to create collections of posts for example a blog or list of press releases.

Localization lets you easily create translations of your websites for different languages and countries.  They even have a built in AI translator (though we have yet to test it).

Built in Search lets you deploy a search feature on your site quickly. Though styling control is limited.

Built in SEO including semantic tags, automated sitemap, OpenGraph, meta and alt tag support.

Interactions lets you animate pages and elements, and easily import Lottie or Rive animations.

Framer Weaknesses

While Framer’s team is pushing updates at a breakneck pace, but there are a few weaknesses worth mentioning.

Site search is limited. It's only available on higher tier plans and there's a 300 page limit until you move up to their enterprise plan. This is fine for most marketing websites, but it's a dealbreaker for sites with lots of content (blogs, directories, etc.). You also can't style results, so hopefully you like Framer's default styling.

The CMS has a very limited set of elements to work with: H1-H6, paragraphs, bold, italics, code, lists, and media. No custom styling of photos (without writing custom overrides). No photo captions. No blockquotes. No spans.

E-commerce isn’t built into Framer, so if you want to sell products on your website you either have to link to a store built on a platform that does (like Shopify), or rely on an embeddable e-commerce (like Gumroad or Lemon Squeezy).

Forms can’t be customized like they can be in Webflow. You can embed 3rd party forms easily (HubSpot, TypeForm, etc.), but custom forms with complete design control are limited. We’ve gotten around this though by using Formspark to display forms and Zapier to connect to 3rd party tools.

Interactions are great and straightforward, but our team has run into bugs and quirks, especially when combined with nested components.

Collection states aren't a thing in Framer. This means there's no "draft" or "published" states built into the CMS (which is odd if you're used to Webflow, WordPress, etc.). But we found a workaround. Create a custom dropdown field in your CMS collection (Draft, Published, Scheduled, etc.), then on your blog page filter out any posts that aren't set to "Published."

A site built on React may seem like a positive, but there are scripts and JS snippets that rely on vanilla JavaScript (or jQuery). Many of these will not be compatible with your new Framer website.

Framer AI sounds cool in theory but the results seen are… interesting... Below is what Framer AI suggested as our new website 😂

Conclusion

While my passion for Webflow has been unwavering over the years, the pivot of Framer into a no-code website builder has been a game changer. While they're playing catch up to Webflow, they're moving at a breakneck pace and shipping new features monthly. The speed which you can bring a website to market, Figma inspired UI, and the true no-code nature of Framer have made it our website platform of choice, for most projects.