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.

5. Templates & patterns ready

Framer has so many useful patterns and functionalities that can be added and customized in seconds.

• Framer has some stunning templates that can be downloaded for free or purchased.

• FramerOverrides.com has high quality copy & paste overrides that can unlock unreal possibilities in Framer.

• There’s also Framer.supply which has several fun and unique elements that can be copy and pasted right into your website.

• https://www.everythingframer.com/

• Within Framer, straight from the insert menu, drag and drop common patterns like buttons, pagination, FAQ, and more.

6. Viewports created & updated magically

A feature that has proven incredibly useful is the ability to design multiple viewports at the same time without needing to manage 3 separate designs.

This workflow in Figma for example has always been a designer’s nightmare because you have to track all updates and make sure all 3 (or sometimes more) viewports for your design are in sync.

Framer however does this automagically. Any update that is made to the desktop version will automatically reflect on tablet and mobile. Which is genius and saves precious design time.

7. Preview & publish — updates reflect in real time

When designing I always like to test out what I’m building and make sure things are working properly.

Framer allows for previews of any update instantly through their previewer as well as the ability to push updates to the live website in seconds.

Framer allows us as designers to be empowered to own the entire design to development process which is really something special and should be taken advantage of.

8. No code scroll effects

Similar to how Figma’s prototyping features work, in Framer we can implement some pretty sweet effects that are triggered by scroll.

My project in Framer — www.getcompanion.co

When I was creating Companion, I utilized a lot of these effects that are triggered when a layer is in view. For example, when someone scrolls to the position of this element on the page the element or section “fades in from the bottom.”

It’s also incredibly simple to create scroll transforms and parallax scrolls which I utilized quite a bit.