Introducing Figma’s Integration with Framer | Figma Blog (opens in new tab)
Figma announced a one-click integration with Framer in August 2016, responding to strong user demand for better prototyping workflows. The integration lets designers import Figma assets directly into Framer instead of exporting layers individually and uploading them manually. Together, the tools connect Figma’s rapid UI design and iteration with Framer’s expressive, code-based prototyping. ## The Need for Better Prototyping - Static mockups are insufficient for designing mobile and interactive experiences. - Designers need to: - Design within the context where a product will be used. - Demonstrate how screens respond to user input. - Add motion, transitions, and other interactive details. - Earlier workflows often required After Effects or manually building HTML, JavaScript, and CSS prototypes. - These approaches were cumbersome, involving remote servers, FTP uploads, mobile testing over 3G, and browser compatibility issues. ## Figma and Framer Integration - Figma users can import assets into Framer with one click. - The integration removes the need to export and upload layers individually. - It creates a faster path from visual UI design to interactive, code-based prototypes. - The feature was especially significant because Framer was the prototyping tool most frequently requested by Figma users. ## Complementary Strengths - Figma supports quick UI design and team iteration. - Framer enables open-ended, code-based prototypes, particularly for complex single-page interactions. - The combined workflow helps designers move ideas into code faster, test them in realistic interactions, and ship better products sooner. - The partnership also reflects Figma’s belief that code-based prototyping can be accessible to a broader generation of designers. The integration was intended to make prototyping more efficient by combining Figma’s collaborative design workflow with Framer’s flexibility and expressive coding environment.