How to Set Up the Figma to Webflow Plugin

Most Webflow builds we see start as a design in Figma. The Figma to Webflow plugin moves that design into Webflow, so you don’t rebuild every layer by hand.

Setup takes six steps. The real work happens in three sync tabs, each sending a different part of your design.

{{cta}}

What Is the Figma to Webflow Plugin?

The Figma to Webflow plugin is a Figma plugin from Webflow Labs that exports your designs to a Webflow site. It works with a free companion app in the Webflow Designer, where you review and import what you sent.

The plugin’s Figma Community page lists 400k users. The app is one of many add-ons in Webflow’s marketplace, and our list of the best Webflow plugins covers others worth installing.

How the Plugin Changed Since 2024

Webflow first paired the plugin with an app under the name Design System Sync, which synced Figma components and variables. That is why older guides, including the first version of this one, send you to a Design System Sync tab.

In February 2025, Webflow rebuilt the plugin around three tabs: Layers, Variables and Styles. In September 2025, it announced syncing of several variable collections and modes in one pass.

How to Set Up the Figma to Webflow Plugin

Setup connects the plugin in Figma to your Webflow account. You need a Figma account, a Webflow account and a browser other than Safari, which the plugin doesn’t support.

1. Sign in to both Figma and Webflow.
2. Open the plugin page on Figma Community, click Open in…, choose a Figma file and run the plugin.
3. Click Next, then Connect.
4. Choose sites or a whole Workspace for the plugin to reach, and click Authorize app.
5. Close that browser tab and go back to Figma.
6. Click Get started and select the Webflow site you want to sync to.

The Webflow app installs automatically. You’ll find it in the Designer’s Apps panel when it’s time to import.

How to Sync Layers, Variables and Styles

Each tab in the plugin sends a different part of your design to Webflow. Nothing lands on your site until you import it in the Webflow app.

Sources: Webflow’s Figma to Webflow help article and its February 2025 plugin update.

Sync Layers

Use the Layers tab for frames and components. Select them in Figma, click Continue, then Sync to Webflow.

Every layer needs auto layout, or it won’t sync. For a large page, sync a few components or sections at a time.

Sync Variables

The Variables tab exports Figma variables as Webflow variables. You can pick collections from Figma libraries as well as local ones, and choose which groups to include.

Number variables can use px, em or rem. A base font size in the plugin settings sets how em and rem values convert.

Sync Text and Effect Styles

The Styles tab turns Figma text and effect styles into Webflow classes. The class prefixes start as “Text” and “Effect,” and you can change both in the plugin settings.

Import the Sync in Webflow

Open your site in the Designer, then open the Figma to Webflow app from the Apps panel. Click the most recent sync, select the items you want and click Import selected items.

When you resync a component, the app lists what changed. You can accept all changes at once or review each one.

When to Copy and Paste Instead

For a one-off section, select a layer in the plugin, click Continue, then Copy, and paste it into the Designer. Pasted layers become elements, not components, so sync anything you plan to reuse.

When a pasted class name already exists on your site, the shortcut you use decides what happens:

• Cmd+V or Ctrl+V creates a new class, such as “Button 2.”
• Cmd+Shift+V or Ctrl+Shift+V reuses the existing class.
• Cmd+Option+V or Ctrl+Alt+V updates the existing class.

How to Resolve Sync Conflicts

A conflict appears when you remove elements from a synced component in Figma and sync it again. The Webflow app then asks you to pick one of three options:

• Accept changes removes the affected elements from the component in Webflow.
• Create a new component keeps your changes in a new component that no longer syncs with Figma.
• Revert changes in Figma means you restore the removed elements in Figma, which repairs the sync.

Accept changes is the usual choice when the Figma edit was intentional. Create a new component suits a one-off variation you want to keep apart from your design system.

Tips for a Clean Figma to Webflow Sync

Clean imports start in the Figma file. These habits save cleanup in Webflow:

• Upload custom fonts to Webflow first. Fonts that aren’t on the site before you sync get lost.
• Pick the right site before you sync images. Images and vector icons go to the Assets panel of the site chosen in the plugin’s site dropdown.
• Name layers on purpose. Layer names become class names, and names like “heading,” “paragraph” or “button” set the HTML tag.
• Set tags by hand where it matters. Text supports H1 to H6, Div and P, while auto layout elements support H1 to H6, Div, Section and Link.
• Decide how layers stack. Pick the breakpoint where a layer stacks vertically: Tablet (991–767px), Mobile landscape (767–478px) or Mobile portrait (478–0px).

To stop using the plugin, revoke “Webflow from Figma to Site” under Authorized applications in your Workspace or site settings. You can reinstall it at any time.

Limits of the Figma to Webflow Plugin

The plugin moves structure and styles, but some Figma features don’t make the trip. Plan for these before you design:

• No Safari. Run the plugin in Chrome or the Figma desktop app.
• No variants. State, responsive and style variants don’t sync, so separate frames become separate components or elements.
• Auto layout only. Layers without it won’t sync through the Layers tab.
• Deselected variables turn static. If you skip a variable on import, Webflow uses its fixed value instead.
• Narrow layers stay fixed. You can’t set stacking on layers under 250px wide or already stacked vertically.

Webflow’s Figma to Webflow help article lists the plugin’s settings and current limits in full. If you’re still deciding where design work should live, our Figma vs Webflow comparison covers what each tool does best.

FAQ for Figma to Webflow Plugin