How to import a Figma design into Framer

To import a Figma design into Framer, install the free plugin called Figma to HTML with Framer, select the frames you want, then paste them into your Framer project. Framer keeps your layers, groups and structure, so you land on a real web canvas instead of a static code export. Everything after the paste is cleanup, and the cleanup is the part nobody warns you about.

How to import a Figma design into Framer, step by step

Install Figma to HTML with Framer from the Figma Community. It is free, and Framer lists it at over 600,000 users, so it is the official route rather than a third party bridge. Select the layers or frames you want to move and run the plugin. A message pops up telling you how many layers were copied. Switch to your Framer project, click the canvas, and paste. Framer's own Figma to HTML page walks through the same eight steps: install the plugin, copy your Figma designs, paste in Framer, keep editing, make it responsive, add effects and animations, add pages and links, publish.

Paste one section at a time

Do not select the whole page frame and move it in one go. A landing page holds hundreds of layers, and when something lands wrong you have no way to tell which part caused it. Paste the hero, fix the hero. Paste the logo strip, fix the logo strip. Work down the page in the same order a visitor scrolls. Framer says outright that some complex Figma structures need cleanup for the web, so give yourself small units to clean.

Fonts are the first thing to fix

Framer's help docs are blunt about this. When you import from Figma, a custom font that Framer does not have gets swapped for Framer's default. Your hero suddenly reads in a system sans, every line length changes, and your spacing goes with it. Sort out type before you touch layout. Add a text layer, open the font picker in the right panel, go to the Custom tab, click Upload Fonts and upload your file. Framer recommends .woff2 for load speed. Then select the imported text layers and reapply the font. Check the built-in library first, because Framer ships Google Fonts and Fontshare, and one of them may already have your typeface.

What comes across, and what does not

Layers, groups and hierarchy come across. So do layout settings, and Framer's academy lesson confirms that auto layout, hierarchy and fill properties are carried over automatically. What does not come across is anything Figma never had: breakpoints, hover states, scroll effects, or components in the Framer sense. Framer's own FAQ tells you to replace static pieces with real components after import. Take that seriously. Rebuild your nav, your button and your card as Framer components instead of keeping forty pasted copies you will have to edit forty times.

Turn pasted frames into stacks that resize

A pasted section that still carries fixed pixel widths will overflow on a phone. Framer's troubleshooting article names this as the most common cause of a page not filling the screen on the Phone breakpoint: an element wider than the mobile viewport, usually a fixed width like 321px, or a Max Width set too large. Go section by section, select the containers, and in the Size part of the right panel switch Width from a fixed number to 100% or 1fr. Keep Max Width on the content wrapper only, so your text column stays readable on a wide monitor. Do this on Desktop first, because Desktop values flow down to the smaller breakpoints.

Then add the things Framer is actually for

This is the payoff for using Framer instead of exporting code. Set your three breakpoints. Give buttons hover and tap states. Add scroll reveals to sections. Turn repeated blocks into components, so one edit updates every instance. Build your text styles in the Assets panel under Styles, with breakpoint sizes for Desktop, Tablet and Mobile, so type scales without you touching individual layers. None of this existed in the Figma file. This is the part that turns a mockup into a page.

The order we work in

Fonts first, then colours and text styles. After that, work section by section from the top, converting fixed widths to fill as you go. Build components for anything repeated. Set your breakpoints next, Desktop to Tablet to Phone, and then add interactions. Metadata and links go last, once the structure has stopped moving. That order gets a single landing page done in a day. Working out of order takes three days, because every fix undoes the one before it.