How to Turn a Figma Project into a Prototype
Leverage this new integration to quickly turn your visual designs into interactive prototypes.
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.”
— 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.
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.”
— Simon Lucas, UX Prototyper at Channel 4
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.
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.”
— 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.
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 post?
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.