By Mehdi HassanHow do you go from Figma to Framer?
You go from Figma to Framer by copying frames with Framer's Figma plugin, pasting them into a Framer project, and then turning that static copy into a real website: responsive breakpoints, reusable components, interactions and CMS templates. The copy is quick. The second part is where the build actually happens.
Framer is the closest website builder to Figma, which is why the path feels so short. Frames become frames, auto layout becomes stacks, and designers recognize the canvas. But a Figma file describes a few fixed screens, while a website must work at every width with real content. Our Figma to website comparison explains when Framer is the right platform; this guide assumes you've chosen it.
The best results come from a well-built source file. Before importing anything, run through our checklist for preparing Figma files for a clean build.
What does the Figma to Framer plugin handle?
The Figma to Framer plugin handles the visual layer: frames, auto layout, text, images, vectors, fills, borders, shadows and corner radii. Selected frames are copied in Figma and pasted into Framer as editable layers.
The most valuable part is auto layout. Frames with auto layout arrive as Framer stacks with the same direction, gap and padding, so they already resize sensibly. Text keeps its font, size, weight and line height, provided the font is available in Framer. Images and vector icons come across as assets you can replace later.
That's a real head start. A long landing page that would take hours to lay out by hand can be on the canvas in minutes, with spacing that matches the design exactly.
What doesn't carry over from Figma to Framer?
The plugin doesn't carry over the website behavior: breakpoints, links, interactions, CMS bindings and, often, the component structure. Plan for these as the core of the build, not as small fixes.
Element | What happens on import | What to do in Framer |
|---|---|---|
Auto layout frames | Become stacks | Check sizing: fill, fit or fixed |
Frames without auto layout | Absolute positions | Rebuild as stacks so they respond |
Components and variants | Often arrive as plain layers | Recreate as Framer components with variants |
Color and text styles, variables | Values come across, links to styles may not | Set up Framer color and text styles, then apply them |
Custom fonts | Fall back if missing | Upload the font files to the project |
Prototype links and interactions | Not imported | Add links, hover states, scroll and appear effects |
Mobile and tablet frames | Pasted as separate frames | Rebuild as breakpoints of one page |
CMS content | Static placeholder text | Create collections and bind template layers to fields |
How do you convert a Figma design to Framer, step by step?
Convert in this order: set up styles and components first, then import pages, then make them responsive, then add CMS and interactions. Doing it the other way round means fixing the same element on every page.
Set up the project foundation
Create Framer color styles and text styles that match your Figma variables and type scale, and upload any custom fonts.
Build shared components
Recreate the navigation, footer, buttons and cards as Framer components with variants, using pasted Figma layers as a starting point.
Import one page at a time
In Figma, select the desktop frame of a page, copy it with the plugin and paste it into a new Framer page.
Swap in components and styles
Replace pasted buttons, cards and headers with your components, and apply the color and text styles.
Add breakpoints
Add tablet and mobile breakpoints and adapt each section, using the Figma mobile frames as a reference.
Wire the CMS
Create collections, build the template pages and bind layers to fields.
Add links, interactions and SEO
Link pages, add hover and scroll effects, then set page titles, descriptions and social images.
How do you set up responsive breakpoints after a Figma import?
Set up breakpoints by making the desktop layout fluid first, then adjusting each section at tablet and mobile widths. Framer breakpoints inherit from the primary layout, so a well-built desktop page needs fewer overrides.
- Make widths relative. Replace fixed pixel widths with fill or percentage widths and set max widths on content containers.
- Switch stack directions. Horizontal rows of cards usually become vertical stacks or grids on mobile.
- Scale type. Reduce heading sizes at smaller breakpoints, ideally through text styles with breakpoint values.
- Hide sparingly. Hiding desktop-only elements is fine; duplicating whole sections per breakpoint is a maintenance trap.
- Test in between. Drag the canvas width between breakpoints, where layouts break most often.
Watch performance while you do this. Large pasted images and heavy effects add weight; our guide to Core Web Vitals on Framer, Webflow and Next.js covers the platform-specific fixes.
How do you connect imported designs to the Framer CMS?
Connect imported designs to the Framer CMS by creating a collection for each repeating content type, building one template page per collection, and binding each layer to a field. The pasted design becomes the template; the content comes from the CMS.
Take a blog post design: create a posts collection with title, slug, date, cover image, summary and body fields. On the collection's template page, bind the heading to title, the image to cover image and the body text to the formatted text field. Then build the index page with a collection list that uses a card component.
Content can then be added by hand or imported. Our guide to importing content into Framer CMS covers CSV, plugins and the API, and our WordPress to Framer migration guide covers moving an existing blog.
Hypothetical example: a five-page SaaS site
For example, suppose a founder has a Figma file with a homepage, pricing, about, blog index and blog post template, each at desktop and mobile. A good Framer build starts by recreating the color and text styles and building the navigation, footer, pricing card and blog card as components.
Each desktop frame is then pasted in, its pasted cards replaced with components, and breakpoints adapted from the mobile frames. The blog template is wired to a CMS collection. The plugin saves most of the layout work; the components, breakpoints and CMS are where the time goes. This is illustrative, not a client result.
Should you import from Figma or rebuild in Framer from scratch?
Import when the Figma file uses auto layout consistently and the site is mostly marketing pages. Rebuild from scratch, using Figma as a visual reference, when the file is loosely built or the site is complex enough that clean structure matters more than speed.
Pros
- Importing saves hours of layout work on long pages
- Spacing, type and colors match the design exactly
- Designers can do much of the work themselves
Cons
- Pasted layers carry Figma's layer structure, which may not suit a website
- Frames without auto layout need rebuilding anyway
- Imported pages without components are slow to update later
In practice we mix both: import sections, keep what's clean and rebuild what isn't. If you're still deciding between platforms, compare Figma to Framer and Figma to Webflow, or read about Figma to Webflow. And if animation is central to the design, our comparison of GSAP, Motion and CSS helps decide whether Framer's built-in effects are enough.
