10 features I’m loving in Framer right now

Hamburger, drink and fries with Framer logo

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.

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.

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.

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.

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.

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.
  • 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.

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.

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.

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.

Compared to Squarespace, Wix, and Webflow — Framer is currently still cheaper than the competition.

As someone who has been using Squarespace for years to host my portfolio, I personally can’t wait to switch to Framer. Not just for the savings — but for the functionality and maintainability.

For a personal plan billed monthly:

As someone who creates everything with auto-layout in Figma, it’s a relief that Framer has a similar structure called stacks.

Stacks are a welcome change to auto-layouts though because they offer some unique functionalities that bring them closer to CSS flexbox.

Two things I love about stacks that auto-layouts can’t yet do are:

1. Wrapping

Stack wrapping works like text wrapping. If the elements don’t “fit” they wrap to the next line. This is excellent for making responsive layouts.

2. Ability to set “fraction unit” or fr

Stacks allow you to set elements to fill fractional units. One “fr” unit represents a fraction of the available space in the grid container.

For example, if we have a grid with three columns, and set the column widths to “1fr 2fr 1fr”, the second column will take up twice as much space as each of the other two columns.

  1. Framer — https://twitter.com/framer
  2. Zulal — https://twitter.com/zee7
  3. Matteo — https://twitter.com/matteotiscia
  4. Nabeel — https://twitter.com/itsnotnabeel
  5. Benjamin — https://twitter.com/benjaminnathan
  6. Danny — https://twitter.com/Dannysapio

Read the full article here

Leave a Reply

Your email address will not be published.

User Research in Pre-Launch Startups: Methods and Tools to Use When There Are No Users [yet]

User Research in Pre-Launch Startups: Methods and Tools to Use When There Are No Users [yet]

Table of Contents Hide Desk researchCompetitor analysisSurveysInterviewsExpert

Why Responsive Design is Crucial for Your Business?

Why Responsive Design is Crucial for Your Business?

Responsive designs have become increasingly important for businesses to have

You May Also Like