Copy, paste, and publish.

Export your Figma designs by simply copying what's on the canvas and pasting it in Framer. The plugin takes care of adapting your design to Framer’s layout tools in real time, so you can focus solely on making a great website.

The Framer workflow is optimized for going from Figma to website with ease. The cool thing about this is that you don't have to convert your design to code — with Framer manually, you can paste your Figma file into Framer and publish it as-is. All layer names and groups are fully preserved.

Your layer structure and naming will all be carried over, so it is easy to pick up where you've left off. You can continue editing your website and make it more engaging, or you can simply hit the publish button.

Best Practices

• Finish your design in Figma and construct the basics in Framer.

• Try to import only the pieces you need like icons, images, SVGs, etc and assemble it in Framer.

• Mobile design has to be reconstructed in Framer through stacking. So plan for that design in advance.

How to Paste

1. Install the Figma to HTML with Framer plugin

2. In Figma, select what you want to copy

3. Go to the Figma menu → Plugins → Figma to HTML with Framer

4. In Framer, open a new or existing project

5. Paste on the canvas.

6. You can run the last plugin again with ⌥⌘P.

   
   

What cannot be imported?

• Paragraph indent

• Text number features

• OpenType features

• Interactive features

• Image strokes

• Corner smoothing

• Components from Figma