Framer 101

I know you must be thinking of yet another tool to build the website. Trust me, in the world of tools, it’s a very common feeling that those who know the tools want to know more, and those who don’t procrastinate.

We can’t write off Framer just like that by comparing it to other website builders; the reason is its history. It all started a few years ago, when I first saw a promo video by Framer where you design on one side and it writes code on the other side (something similar to that). Getting everything at once was cool, but it was a little overwhelming for the designer. One thing that I really liked about that was creating some interesting prototypes with more realistic interactions (this was long before prototyping in design tools became a thing). From that time to today, it has come a long way. I thought they were doing a lot back then; now it’s a bit more specific (just my opinion).

If we think of building a website, a few tools come to mind: WIX, SquareSpace, etc. If you want to do a bit more then of course, we have Webflow. Before we come to any conclusion, let’s try to understand things one by one.

What is a framer?

It’s a no-code tool that actually feels like a design tool to get things done (mainly building websites). In my opinion, that is the purpose of any no-code tool on the market. One thing that I really like about Framer is the options given, which are similar to those in design tools like Figma (if not exact, at least relatable).

Here are a few things compared to design tools:

1. Auto-layout makes designing things for responsive layout easier; similar to this, we have some things called stack (easy to pickup) that pretty much do the same job if we set constraints right.

2. Like how we use frames to represent sections and screens in Figma, we could do the same in Framer too.

3. One thing that I really liked about Figma was the interactive components, which just make prototyping more fun and easy. This thing is pretty much the same, if not exact, in framer.

Is it any better?

My answer is yes, and the following are the reasons why:

1. The interface is not overwhelming for a first-time visitor.
2. You can copy and paste things from Figma to Framer directly without losing much detail.
3. Does not require you to have any prior knowledge about code to get things started.
4. The concept of components and variants makes it easier to work with when building a complex layout or creating complex interactions.
5. There are not too many restrictions on using this tool under the free plan (as per the plans when this article was published).
6. Pre-made templates for sections and pages make it easy to kickstart the process.

In short, if you start playing with the interface, you keep coming back to it.

What all can you do in Framer?

Here are few things what framer intresting,

1. You can design and optimise for different breakpoints side by side (not unique, but definitely easier to do).
2. Applying effects to each thing with ease.
3. Linking pages with ease.
4. The main thing would be a CMS, which makes managing content very easy.
5. publishing a website pretty much instantly.
6. Analytics lets you track things happening on your site and helps you optimise it for better SEO.

Resources for Framer?

When it comes to learning Framer, there are a few good resources to start with, and they are as follows:

Resource 1: https://www.framer.com/learn/

Resource 2: https://framer.supply

Resource 3: https://framer.university

Resource 4: https://www.framepad.co

Resource 5: https://www.framer.com/templates/

Conclusion

My thoughts would be, instead of getting into the comparison game with Webflow, see how this would be useful for your benefit. If you’re coming from a design tool background, this is like a gem. There are a lot of possibilities to explore with this tool; they are just getting started, with much more to come. Framer has a great community like Figma, where they actually listen to people’s requests/concerns and act accordingly.

Here is something I made using Framer. It’s a free template, so feel free to copy and explore.

PXL - Free Framer Digital Creator Template

Clap it, If you like it

You can clap as much you want 😉 Just press and hold the “clap button” to give your appreciation 😊