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 “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. 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 opening the menu and selecting File Import from 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. » Read More
Like to keep reading?
This article first appeared on framer.com. If you'd like to keep reading, follow the white rabbit.