From Figma to Framer in One Seamless WorkflowFrom Figma to Framer in One Seamless Workflow

A brand new integration between your favorite tools, designed to give your team a competitive edge.

avatar

Koen Bok

April 9, 2020

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

As the cornerstone of a company’s success, design teams are always looking for more ways to innovate. And while visual design remains a key driver, prototyping is quickly becoming 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.

Swap out static elements for functional components and make your design interactive in minutes.

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.

  1. Navigate to the project dashboard

  2. Under the top-right Import button, select Figma

    How to import from Figma from the Framer Web dashboard.
    How to import from Figma from the Framer Web dashboard.
  3. You’ll be asked to authenticate your Figma account, which will open a new tab

  4. After authenticating and returning to Framer, you’ll be asked to paste the Figma project URL

  5. If using multiple pages in your Figma project, select which page you want to import

    How to import a single page from your Figma design.

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

Like this article? Spread the word.

Bring your best ideas to life

Subscribe to get fresh prototyping stories, tips, and resources delivered straight to your inbox.