Framer
Blog
  • Latest
  • Product
  • Editorial
  • Customers
  • Guides
Framer
  • Why Framer
  • Teams
  • Learn
    • Tutorials
    • Examples
    • Templates
    • Sessions
    • Speedruns
  • Pricing
  • Blog
  • Updates
  • Support
Blog
  • Latest
  • Product
  • Editorial
  • Customers
  • Guides

From Figma to Framer in One Seamless Workflow

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

Koen Bok

KB

by Koen Bok

Koen Bok

KB

Twitter

Koen Bok

CEO at Framer.

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.

  • Navigate to the project dashboard
  • 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.

  • 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

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.

Share this article

TwitterFacebookLinkedIn

Bring your best ideas to life

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

Visual

Prototyping

Beginners Guide to Prototyping

April 16, 2021

Visual

Product

Making Framer Fast: Measuring Web App Performance

April 13, 2021

Visual

Guides

Understanding Interactions and Events in Framer

April 7, 2021

Framer

  • Why Framer
  • Teams
  • Pricing
  • Blog
  • Updates
  • Motion

Platforms

  • Web
  • macOSbeta
  • WindowsBeta
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing

Learn

  • Tutorials
  • Examples
  • Templatesnew
  • Sessions
  • Speedruns

Resources

  • Packages
  • API
  • Input Kitnew
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement