I’ve spent the past few months messing around Framer web, and like many on Twitter, I too am blown away by the simplicity of it and how incredibly powerful a tool like this is.

A stunning and professional website with all the bells and whistles really is just a few drag and drops away in Framer.

1. Copy and paste from Figma

The Figma to Framer plugin lowered the barrier to entry for me moving from Figma to Framer because most elements just work right away without any customization needed.

Especially at first, I felt more comfortable creating the elements I needed in Figma then porting them over. Once I got a hang of the tool though this became less necessary.

Unfortunately with most designs, it won’t be possible to simply copy and paste the entire page and expect it to function in Framer. I generally had to copy and paste on an element-by-element basis and often no re-work was required.

2. Sticky elements

My project in Framer — www.getcompanion.co

I’m not sure why but there’s something extremely satisfying about being able to set some content to scroll and other content to stick. I have a few sections on my website Companion, that sticky scroll functionality worked perfectly for.

This behavior is especially useful for creating navigation bars, sidebars, or other elements that need to stay visible as the user scrolls through a long webpage.

In Framer, it’s as simple as changing the position type to sticky on the element we want to stick, then setting the overflow to “visible” on the parent frames. Here’s a tutorial from Framer.

3. Out-of-the-box integrations

Framer has dozens of useful integrations that make building a useful blog, landing page, sales funnel, and more almost effortless.

Straight from the insert menu, add a Lottie animation, Gumroad “Buy” button, Icons from popular libraries, MailChimp forms, and so much more.

I was able to connect my website with Stripe to enable purchases using “Links” on button components. Although it wasn’t an integration per-se it was possible with no custom code.

4. Feels familiar to programs I already use like Figma

A refreshing detail about Framer is how familiar it feels.

The team has clearly paid a lot of attention to how designers use design tools and the familiar shortcuts we use often.

The overall navigation, look/feel, naming of features, and positioning of tools are intuitive and seamless.

Even if there’s a shortcut that doesn’t work in Framer “R” for example would commonly open the “Rectangle” tool but since this doesn’t exist in Framer they give a friendly message notifying to use the “F” shortcut to draw a frame.