How to Turn a Figma Project into a PrototypeHow to Turn a Figma Project into a Prototype

Leverage this new integration to quickly turn your visual designs into interactive prototypes.

avatar

Callum Sweeney

April 24, 2020

The perfect design pairing does exist. Last week we launched the new Figma importer in Framer Web, unlocking a new workflow for designers.

Not only is this integration a godsend for anyone looking to go from visual to interactive in minutes, but it also allows designers to move freely between the best tools for the job. Easy and fast is key here—the importer is accesible both from the Framer Web dashboard and within a project. Just one-click to transfer an entire project over.

In this week’s Framer Live, we provided an overview and showed you the benefit of bringing designs to life in Framer. Catch up on that with the full recording at the end of the post. Below, we’ve provided a step-by-step guide on how to best use the new Figma to Framer workflow to your advantage.

Step 1: Import designs from Figma

This is bringing everything I love about Figma to everything I love about Framer. I go between tools all day, so this is a game changer.

avatar
Max Steitle, Product Designer at Zoom

There are two ways to import designs from Figma. The first is directly from the Framer Web dashboard, selecting Figma after clicking the import button in the top right corner. Otherwise, you can do it from within a project. This way you can import additional work into a project you have already started on, effectively fusing designs from two different platforms. Just select File > Import from Figma from the menu.

Click the Import button in the top right to import designs from Figma or Sketch.

Step 2: Replace static elements with interactive components

Now you can build upon the work you started in Figma. Once you have ported it all over to Framer Web, right-click on the static elements you want to swap out. Click Replace with and find a real, working component to take over from the flat placeholder. Adjust the component’s colors, fonts, and styling to match the rest of your design in the properties panel. Then add another layer of interactivity with Framer’s other built-in prototyping tools. Use the link tool to connect screens and adjust transitions and make cards and other content scrollable with the scroll tool.

The new Figma importer is super easy and straightforward—I just select import, authenticate and then swap static layers for interactive components. I can then take my designs to the next level by using Framer’s advanced prototyping tools.

avatar
Simon Lucas, UX Prototyper at Channel 4

Step 3: Use Magic Motion to create complex interactions

One of the most game-changing features rolling out with Framer Web is Magic Motion. Building off of the existing Framer Motion library, Magic Motion unlocks the phenomenal power of these animations for those who don’t want to code. Choose a start frame and an end frame (or use a series of frames) link them together with the lightning connector and Magic Motion figures out how to animate between the two states.

An example of all the animation properties up for customization with Magic Motion.

Check out these examples of Magic Motion in action:

All animation properties are completely customizable. Using just the properties panel, adjust the stiffness, damping, mass, and delay of your transitions to make them truly unique. Use the preview window to review your animations in real-time, as you make minor adjustments to fine-tune everything.

Our team’s design system lives in Figma, and I like to experiment and prototype in Framer. Now I get the expressiveness and power of building in Framer without having to recreate everything from scratch.

avatar
Jay Stakelon, Product Designer at Dropbox

Step 4: Share for buy-in, feedback, or collaboration

Once your project is in a good state, the logical next step is to share it with others, whether it’s for early critiques or sending to management or clients for feedback. You may even want another designer or developer to jump in and work on elements with you.

There are two ways to share. If you only want someone to view a preview of your prototype, click Share in the top right corner and send them the link this generates. If you want them to collaborate with you, click the + icon in the top right and add in their email address. Make sure their settings are set to Can edit. You can use these permissions to invite someone as a viewer too. Follow the same process but set their permission to Can view. This way, they will be able to see everything laid out on the canvas, rather than just the preview.

Invite others to view or collaborate on your project by clicking the 'plus' icon in the top right of your Framer Web project.

With Framer Web, viewers can easily leave feedback by way of comments that can be pinned to specific parts of the prototype. This is a powerful way to get feedback on the nitty-gritty, from the specific delay of an animation to the transition type being used. Turn this into a thread and refine everything until the prototype is ready for handoff.

Enjoying this blog post?

Sign up to our email list to get the best of the Framer blog sent directly to your inbox.

Follow along with the Framer Live recap

All of these steps were featured in our most recent Framer Live session. Follow Viktor Renkema and Fernando Hurtado’s instructions and see just how simple it is to turn Figma designs into dynamic, high fidelity prototypes.


Need more information on importing? Check out our support articles on how to bring in work from Figma or Sketch. Framer Web is available as a closed access program. We’re rolling out thousands of invites weekly, get on the waitlist to access a free version of the Beta.

Like this article? Spread the word.

Sign up for our newsletter

Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.