From Figma to Framer in One Seamless Workflow

Today we’re excited to announce that Framer Web now imports your Figma files, allowing you to turn your existing visual designs into high-fidelity prototypes.

A more open workflow

This strategic partnership highlights a need for a more open ecosystem, one in which your favorite design tools work together. Because we believe that the best work happens when designers are empowered to move freely between the optimal tools for the job.

Framer and Figma have been partners for a long time, dating all the way back to the Figma importer in Framer Classic. Now that Framer has moved to the web, this seamless integration is merely the next logical step. Web applications are always connected, so it made sense for us to integrate with other tools for an open workflow.

Give your team a competitive edge

Now, in just a few clicks, you’ll be able to import your Figma projects into Framer. Drag and drop canvas tools allow you to add native-feeling interactions and transitions. Then, use a new prototyping insert menu to replace static elements with interactive components that can be customized with live data, real-time events and more. Framer offers more than just click-through prototyping—it’s the ability to design with touch, sound and data. And with Framer Web, we’ve rebuilt our product to cater to the beginner, or anyone who wants to do advanced prototyping right on the canvas.

Here’s how it works

Framer’s integration with Figma allows you to import your entire Figma project into a new Framer project in just a couple of steps.

• Navigate to the project dashboard
• Under the top-right Import button, select Figma

How to import from Figma from the Framer Web dashboard.

• You’ll be asked to authenticate your Figma account, which will open a new tab
• After authenticating and returning to Framer, you’ll be asked to paste the Figma project URL
• If using multiple pages in your Figma project, select which page you want to import

You may also import a project from Figma directly from a Framer project canvas, by clicking Import in the top toolbar and selecting Figma.

How to import from Figma within a Framer Web project.

A workflow that works for you

While we’ve always held the belief that prototyping is the best way to express product ideas, we want to be respectful of your existing workflows. And as more and more teamwork happens in Framer, we’re confident this integration with Figma complements our vision of open work.

Framer Web is currently available as part of a closed access program. We’re rolling out thousands of invites per week, sign up to get access very soon.