No code is clearly getting its momentum. As I predicted more than a year ago, more and more tools appear. There are good old solutions like Webflow, but also a new rising stars appeared last year - I am speaking about Framer.

I am sure that you remember that a few years ago, designers were thinking: "use Sketch or Figma?". It was the battle of two great design tools, and the second one dominated designers' workflow. So if you are going to ask a similar question in terms of Webflow & Framer, I have to say that this won't happen. I believe that these two will coexist successfully and develop great new features. Why? Let me explain that in the article.

However, there is something different that will impact us as designers. Now we should stop asking ourselves what will be "the next top design tool." We should start preparing ourselves to become not only designers but creators that bring their ideas live with no code tools.

Let me describe these two wonderful tools, compare them so you will be able to make your choice or (what makes a lot of sense) - learn both.

‍

‍

What is Webflow

Webflow is an online solution that allows users to build websites. It's a no-code solution, so you create them without having to know the code.

Instead of writing lines of HTML & CSS, you simply drag & drop interface elements to build a website. You configure elements parameters in a visual form with text fields, toggles, etc.

‍

‍

Obviously, Webflow also includes more advanced features. You may use CMS or even include custom code & scripts if needed. Publish your sites with custom domains & integrate with third-party solutions & analytics.

‍

What is Framer

Framer describes itself as a web builder for creative pros. It is also a no-code tool that helps users build websites. If you know tools like Figma, you will feel a bit familiar once opening Framer for the first time.

Framer started as a prototyping tool that required a bit of coding knowledge to create stuff. Fortunately, they pivoted into the no-code platform. Now with a new direction, Framer is rapidly developing, and new features are coming every few weeks.

You may obviously add custom domains or include custom integrations to your website.

‍

‍

Pricing

The way platforms ask you to pay for the website is very different.

‍

Webflow

The pricing structure of Webflow was always quite complex. Recently they modified it a bit. You may purchase the Workspace option or Site plans. They all start with the free option. The pricing structure is following:

Workspace - the area where you & your team works. If you build the site for yourself or your own products, a Free starter plan is enough. Then there are paid options for $19/month or $49/month per seat. That allows having 3 or 9 seats and a larger number of unhosted sites. Paid options allow you to add custom code & export it.

Site plans - when you want to publish your website made in Webflow, you have to pick one of these options. The free starter plan is limited to the webflow.io domain, 50 CMS items & form submissions, plus 1GB bandwidth. The basic plan is $14/month and is dedicated to landing pages with no CMS items. To have a website with CMS larger bandwidth and other options, you have to pick CMS ($23/month) or Business ($39/month) plan.

‍

Framer

The pricing structure of Framer is much clearer. You may start using it for free, having 100 CMS items & 1000 visitors/month.

There is a Mini plan dedicated to landing pages for $5/month.

For a basic site, you pay $15/month, and you get 1000 CMS items, a custom domain, and 10,000 visitors.

Pro Site Plan is available for $25/month and obviously has even more CMS items & visitors allowed, but also analytics built-in and site staging.

In general, Framer seems to be a more affordable option right now.

‍

‍

Learning curve

Webflow - When it comes to the cost, the learning curve is quite high for Webflow. You may start your website easily (there are even a few predefined sections to use), but mastering all features takes a lot of time.

This is the cost that you need to take to be able to create almost any type of website without a code. However, once learn, you will be able to work super fast. It has a logical structure & repeatable patterns.

Framer - When you open it for the first time, it feels very familiar... like Figma or any other design tool. However, in this case, you are building the real website.

I have to admit that learning basics are very simple. We do not have as many advanced options as Webflow here, but based on what is currently released, you are able to learn it & iterate faster.

‍

‍

‍

Software & Workspace

Webflow -The platform is a real inception. You use a website to build a website. However, it works so well that after a while, you forget that this is not native software.

I like the dark theme of Webflow designer. It feels like the invisible surface when you create your websites. The visual theme of the Webflow interface feels neutral. It's a utility-first approach.

You may launch Framer app on your mac, and you may also load it in your browser. It's up to you. It's still a web-based solution, so there is no way to work offline.

It's worth mentioning that the User Interfaces of Framer itself are delightful. I like that subtle visual treatment, button radius & shadows. It adds a lot of pleasure when interacting with it.

Framer feels much more like a design tool than a website builder. Is it good or bad? It depends on your preference.

‍

‍

Preview

Webflow - At one time, you may preview how your website will look with only one breakpoint.

What is excellent about Webflow is that preview mode removes the entire UI, so you feel like viewing the final solution.

Framer -The thing I like in Framer is that while you are building a website, you may see how changes are propagated across all the breakpoints (you see all of them on the canvas).

In preview mode, you see only one breakpoint. However, the User Interface of Framer is still visible.

Components, Classes & Styles

Webflow - When it comes to creating components & shared styles, they are basically visualized CSS classes. So knowing the technical background like HTML & CSS will help you master the tool faster.

In Framer, you use components & styles like in other design tools. If you know Figma, you will notice familiarities. What is a bit confusing is that you preview every component and its variants in a separate view.

‍

‍

Animations & Interactions

A modern website without any motion design? Nowadays, it sounds like an impossible scenario. Both tools enable creators to animate their web pages.

Webflow gives you almost absolute freedom. It may feel a bit more complex at first, but you may create literally every interaction you can imagine. What is very important - you are free to set precise timing & choreography of your motion.

What's more, your interactions may be shared across multiple elements (no need to paste them or recreate them manually).

With Framer, you will feel a bit like in Figma again. Your component states (hover & press) are automatically animated with nice transitions.

To other elements, you can add one of the multiple animation presets (effects). You are free to change opacity, scale, offset or rotate elements. You may and transition easing (also spring animation).

‍

‍

Documentation & learning materials

Webflow is famous of its University. The vast collection of tutorials present in video & text form makes it easy to learn the tool.

University is not limited to basics. You may find them even more advanced materials. Personally, I enjoy not only educational materials but also the sense of humor presented in many recordings.

‍

‍

If you are looking for Framer tutorials, the quickest way to get started is to see links provided on Learn section of the official website.

It includes lots of video tutorials (also third-party ones like Designcode.io) and a collection of articles for more advanced topics.

It is a good starting point, but because the Framer is a younger solution, Webflow, for now, wins with the countless number of educational materials.

However, the power of Framer is its Community. There are also many people daily sharing their knowledge on Twitter - be sure to find them and follow (I curate some useful resources on my Twitter profile)

‍

‍

‍

Collaboration

If you remember what happened with Sketch, it was Figma's real-time collaboration that gave the tool a competitive advantage to win the battle.

For now, in Webflow, there can be only one designer and editors working on the same file. In Framer, you may invite as many design collaborators as you want. Since both platforms are web-based, it should not be a huge effort for Webflow creators to do the same thing in the future.

‍

‍

Exporting data

With Webflow, You may export your website files. However, you will lose connection to cms data, so you should think of it as exporting templates that have to be configured once uploaded to another hosting.

Framer does not include an export option. For me one of the main drawbacks of using it right now. Some specific projects require to be hosted with company architecture.

‍

‍

Product maturity

When you are going to build a long-term stable website or platform, for sure, you wonder if the solution you pick will be present within the next 5-10 years.

The tech industry is very dynamic. I feel optimistic about both platforms.  Framer is for sure much younger, fresh solution (which is advantage in many cases). Webflow is more mature product (some corporate clients may prefer to go with this option).

‍

‍

Webflow or Framer?

Conclusions like this are always subjective, so from my experience, I would conclude it in these words:

‍

Webflow is like a swiss army knife. Framer is like a scalpel (but it's evolving quickly!).

‍

If you need a rich multipage website, a platform with complex flows and unique interactions, go with Webflow - you got a stable solution full of advanced features.

If your task is to create a simple company website or product landing page, go with Framer - it's fast & easy to learn, with huge potential for the future.

‍

Summing up

No code tools are the next must-have weapons for designers (next to AI). Knowing Figma is a standard. No code is a thing that makes you stand out... for now. In the near future, experience with this kind of tool will be a must too.

They get easier & easier to learn, help us achieve sophisticated experiences quickly and give us a lot of freedom. Take that opportunity & start learning today.

For me, it's not about Webflow or Framer. Both tools have their pros & cons. When you learn them, you will know when to use which for specific projects.

Amazing times are coming!

‍

‍

One last thing...

One of the outcomes of my framer exploration is the Hyper Template. It's Portfolio website for designers, full of eye-carching effects.. You may preview it here: Hyper Framer Template

‍