How to Export a Figma Design to Webflow (Step by Step)

You can move a Figma design into Webflow in two ways: use Webflow's Figma to Webflow plugin and app, or rebuild it by hand in the Designer. The plugin saves time on layout, but it only works well if your Figma file is prepared properly, and it does not remove the need to build the parts of a website that a design file cannot describe, such as the CMS, interactions and responsive behaviour. The right choice depends on how structured your design is and how much of the site is static layout.

This guide explains both routes in detail: how to set up and use the plugin, how to prepare a Figma file so it imports cleanly, what the plugin cannot do, and how to decide between importing and building by hand. If you are working across a design and development team, the wider process is covered in my guide to the Figma to Webflow design handover process.

Which Route Should You Take?

Before you open the plugin, it helps to be honest about what you are building.

• Mostly static layout with consistent components: the plugin is a good fit. Hero sections, feature grids, testimonials and footers are exactly what it handles well.
• Heavy interactions, scroll animation or complex logic: import the structure if you like, but plan to build the interactions in Webflow.
• CMS-driven pages such as blogs, case studies and directories: design the template in Figma, but you will set up the collections and bind the fields in Webflow yourself.
• A strict class naming system and component library: many teams prefer to build by hand using Figma as the reference, so the structure is exactly as they want it.

Option 1: The Figma to Webflow Plugin and App

Webflow's plugin exports from Figma, and its companion app imports into your Webflow site. The plugin has three tabs:

• Layers: turns frames and components into Webflow elements and components.
• Variables: sends Figma variables to Webflow variables.
• Styles: turns text and effect styles into Webflow classes.

Setting it up

1. In Figma, open the Figma to Webflow plugin page, click Open in… and choose a file.
2. Click Run, then Next and Connect.
3. Select your Webflow sites or Workspaces and click Authorize app.
4. Return to Figma, click Get started and select the Webflow site you are importing into.

Importing layers

1. In the plugin's Layers tab, select the frames or components you want and click Continue.
2. Click Sync to Webflow.
3. In Webflow, open the app from the Apps panel, open the latest sync, select the items and click Import selected items.

Webflow recommends syncing a few sections or components at a time on large pages, rather than a whole site in one go. That also makes it easier to check each import before moving on.

Copy and paste instead

You can also select a frame in the plugin's Layers tab, click Continue then Copy, and paste straight into the Designer. Syncing creates components, while pasting creates plain elements. These shortcuts control how classes behave on paste:

• Ctrl/Cmd + V: create new classes (the default)
• Ctrl/Cmd + Shift + V: reuse existing classes
• Ctrl/Cmd + Alt/Option + V: update existing classes

Knowing which to use matters once the project has started. Pasting with the default behaviour on every section will create duplicate classes, whereas reusing existing classes keeps the stylesheet tidy.

How to Prepare Your Figma File

Most of the problems people have with the plugin come from the Figma file, not the plugin. Treat the preparation as part of the design work, not a clean-up step at the end.

• Use auto layout everywhere. Layers without auto layout will not sync or copy. The plugin can suggest auto layout for a frame. Auto layout is also what makes the result behave like Webflow's flexbox layouts, so a well-built auto layout file imports far more cleanly than one with manually positioned layers.
• Name your layers deliberately. Layer names become Webflow class names, and names like “button” can set the HTML tag. Clean names make a cleaner project. Agree on a convention before you design, and see my guide to Webflow naming conventions for a system that works.
• Use variables for colours, spacing and type so they carry across as Webflow variables. This is the foundation of a Webflow design system.
• Upload custom fonts to Webflow first. Otherwise the fonts are lost on import.
• Select the right site in the plugin so images and icons land in the correct Assets panel.
• Set responsive behaviour. You can choose the breakpoint at which a layer stacks vertically (Tablet, Mobile landscape or Mobile portrait).

Design with the web in mind

Some design habits translate badly however good the plugin is. Fixed-width frames that only work at exactly 1440 pixels, text boxes with hand-tuned line breaks, decorative layers stacked purely for visual effect and spacing set by eye rather than by a scale will all need to be rebuilt. If the designer thinks in terms of containers, grids, a spacing scale and reusable components, the import is closer to a finished page. If you are not the person who designed the file, share a short brief on these points before they start.

Check the file before you sync

1. Walk through each frame and confirm auto layout is applied at every level.
2. Check that no layer has a vague name such as “Frame 482”.
3. Check that every colour, font size and spacing value comes from a variable or style.
4. Check that images are final or clearly flagged as placeholders.
5. Check that tablet and mobile versions exist for anything that does not simply stack.