How to Import Design from Figma to Framer

So, you made something cool in Figma and now you're like, "Okay, how do I turn this into a real website?" I totally get it. I had that same moment too.

In this guide, I’ll walk you through how to import your design from Figma into Framer using the official Figma to Framer plugin. It’s a super simple process, even if you’re new to both tools.

We’ll start with the basics, then I’ll show you what to do after the import. Because let’s be real, it’s not all perfect right away. That’s the part most people forget to do.

Let’s jump in.

What you’ll need

Before we start, here’s what you need to have ready:

• A Figma file you want to turn into a website

• A Framer account

• The Figma to Framer plugin

• A little time to clean things up after importing

How to Import design from Figma to Framer

If you prefer a video explanation on how to do it, Framer has a video you can follow.

But if you prefer a step-by-step tutorial with screenshots, feel free to follow this one.

1. Open your Figma file

Start by opening the Figma design you want to bring into Framer. It can be a full site, just a landing page, or even a tiny section.

2. Install the plugin

If you haven’t already, go to Figma to Framer plugin and install it.

Or do it straight from Figma:

• Press Command + K on Mac or Control + K on Windows

• Choose Plugins and Widgets

• Search for Figma to HTML with Framer

• Click Run or Install

3. Select what you want to export

In your Figma file, select the frames or sections you want to move into Framer. You don’t have to move the entire design at once.

I highly suggest importing one section at a time.

Sometimes, when you try to copy everything at once, things don’t paste correctly or parts get messed up in Framer. Doing it section by section gives you more control and helps you spot issues earlier.

💡 Tip: Using Auto Layout in Figma helps a lot. It makes things behave better when you bring them into Framer.

Don't be like me, I didn't use auto layout :)

4. Click copy to clipboard

Press the Copy to clipboard button. It will copy everything you selected and get it ready for pasting.

5. Head to Framer and paste

Now go to Framer, open a new project, and just hit Paste on the canvas.

P.s. please ignore my layer naming :)

6. Adjust it

After pasting your design into Framer, it might look messed up, that’s the part where you need to adjust it. If you don’t use Auto Layout like I do, it might need a couple of adjustments. But if you already use Auto Layout, it will be easier for you to adjust.

In this case, the first thing you should do is always use layout on your Framer canvas and set the canvas height to fit.

Then, make sure to set all the fixed widths to fill.

7. Make it responsive

You can click the + on the breakpoint and select tablet and phone, it will automatically create new canvases for you to adjust for each breakpoint, like the screenshot I shared below.

If you use Auto Layout, the tablet and phone breakpoints will be adjusted automatically. If not, you might need to readjust them manually.

And that's it!

Extra tips for smooth importing

Here are a few things I wish I knew the first time I tried this:

• Start small. Try moving over just a section first to get the hang of it.

• Name your layers. Clean layer names in Figma make things easier in Framer.

• Adjust it. If stuff looks weird, just adjust. It’s part of the process.

• Use auto layout. It helps a lot, so you don’t have to adjust much in Framer.

Conclusion

And there you go! That’s how you import a Figma design into Framer using the Framer to HTML Figma plugin.

But, if you’d rather skip all of this and jump straight into building a beautiful website without the stressing much about adjusting it, feel free to check out our Framer templates. They are made for designers and agencies who want to skip the headaches and ship fast.

Sure, it’s not magically perfect right out of the box. But with just a bit of cleanup, you’ll have a live site that looks great on every screen.

If you’re like me and love designing but not so much coding, this workflow is a total lifesaver.