Figma to Webflow plugin and app

Sync your Figma designs with Webflow to streamline your site build.

The Figma to Webflow plugin and app let you seamlessly sync Figma components, variables, and styles into Webflow. For large pages, we recommend syncing a few components or sections at a time rather than the entire page.

How to use the Figma to Webflow plugin

Install and authorize the plugin

Sign in to Figma and Webflow, then:

1. Go to the Figma to Webflow plugin page
2. Click Open in…
3. Select a file from Recent files or click New file — the file opens in Figma with the plugin modal active
4. Click Run at the bottom of the modal
5. Click Next > Connect
6. Select the sites or Workspaces you want to connect and click Authorize app
7. Close that browser tab and return to Figma
8. Click Get started in the modal
9. Select a Webflow site at the top of the modal to begin

Plugin organization and syncing

The plugin is organized into three tabs:

• Layers — export Figma layers to Webflow components and elements
• Variables — export Figma variables to Webflow variables
• Styles — export Figma text and effect styles to Webflow classes

Once you’ve synced layers, variables, or styles from Figma, you can import them to Webflow using the Figma to Webflow App.

How to sync layers

1. Open the Layers tab in the plugin
2. Select one or more layers (frames or components) in your Figma file
3. Click Continue
4. Click Sync to Webflow
5. In the Webflow app, click the most recent sync
6. Select which components, elements, and variables to import
7. Click Import selected items

Layers must have “auto layout” applied in order to sync. Variables and images from layers will sync automatically. Deselecting a variable on import will replace it with a static value.

How to copy/paste a layer

1. Open the Layers tab in the plugin
2. Select a frame or layer
3. Click Continue
4. Click Copy
5. Paste directly into Webflow

Every Figma layer name is converted to a class when you sync or copy from Figma to Webflow.

How to sync variables

1. Open the Variables tab in the plugin
2. Select a collection(s) and mode(s) from your local or library variables
3. Click Sync to Webflow
4. In the Webflow app, click the most recent sync
5. Select which variables to import
6. Click Import selected items

You can only sync one collection and mode at a time. You can also specify units (px, em, or rem) and set a base font size in the plugin settings.

How to sync styles

1. Open the Styles tab in the plugin
2. Select text or effect styles you want to sync
3. Click Sync to Webflow
4. In the Webflow app, click the most recent sync
5. Select styles to import — they’ll be converted into Webflow classes
6. Click Import selected items

How the plugin works

There are some important things to keep in mind when using the Figma to Webflow plugin with each of the following:

• Auto layout
• Custom fonts
• Images
• HTML tags
• Responsiveness

Auto layout

You’ll only be able to copy and paste layers that use auto layout. This guarantees the best translation possible when copying from Figma to Webflow. You can also use the suggest auto layout feature to quickly add auto layout to a frame.

Classes

Every Figma layer name is converted to a class when you sync or copy from Figma to Webflow.

Paste shortcuts

When pasting layers from Figma to Webflow, you have options for handling style conflicts. For example, if your site already has a “Button” class with a blue background, and you paste a Figma layer named “Button” with a red background, you can:

• Create a new class (default) — Command + V (Mac) or Control + V (Win). A new class is created (e.g., “Button 2").
• Reuse existing classes — Command + Shift + V (Mac) or Control + Shift + V (Win). Keeps the existing class and styling.
• Update existing classes — Command + Option + V (Mac) or Control + Alt + V (Win). Applies Figma styles to the existing class.

You can add a prefix to identify classes from Figma in the plugin settings.

Custom fonts

If you’re using custom fonts in Figma, upload them to your Webflow site before transferring your designs. Otherwise, they’ll be lost during sync. Learn how to upload custom fonts to your Webflow sites.

Images

When you import or paste layers from Figma, image layers and vector icons are uploaded as assets to the Assets panel.

HTML tags

The plugin automatically assigns HTML tags based on the layer name:

• “button” — anchor tag
• “description,” “text,” or “paragraph” — paragraph tag
• “heading” — H1 tag

You can also define tags manually in the plugin modal. Supported tags:

• Text elements: H1–H6, Div, P
• Auto layout elements: H1–H6, Div, Section, Link

Responsiveness

You can control when a Figma layer stacks vertically by choosing a breakpoint in the plugin:

• Tablet — 991px to 767px
• Mobile landscape — 767px to 478px
• Mobile portrait — 478px to 0px
• Not responsive — layer remains horizontal

To manually make designs responsive, use wrap and min/max width properties in Figma.

How to use the Figma to Webflow app

The Figma to Webflow App lets you import synced layers, variables, and styles into your site.

Import components, elements, variables, and classes

1. Open the Figma to Webflow app from the Apps panel in Webflow
2. Click a recent sync from Figma
3. Review, accept, or reject changes
4. Click Import selected items

Conflict resolution

If conflicts arise (e.g., missing elements in Figma that exist in Webflow), you can resolve them in one of three ways:

• Accept changes — removes the element(s) in Webflow
• Create a new component — keeps the changes but ends syncing
• Revert changes in Figma — add back the removed elements to fix the sync

How to remove the Figma to Webflow plugin

You can remove the plugin from your Workspace or from individual sites, depending on where you originally authorized it.

How to remove the plugin from your Workspace

1. Open the Account dropdown
2. Click Workspaces
3. Choose the Workspace where the plugin is installed
4. Go to Workspace settings > Integrations tab > Authorized applications
5. Click Revoke on the “Webflow from Figma to Site” application

How to remove the plugin from your site

1. Go to your Dashboard
2. Click the more options icon for the site
3. Click Settings
4. Go to Site settings > Integrations tab > Authorized applications
5. Click View
6. Click Account integrations settings
7. Go to Account settings > Authorized applications
8. Click Revoke on the “Webflow from Figma to Site” application

FAQs

What browsers are supported?

The plugin works best in Chrome and the Figma Desktop App. It is not supported in Safari.

What happens if I uninstall the plugin?

Uninstalling removes plugin functionality. You can reinstall it at any time.

Are custom fonts supported?

Yes, but you must upload them to Webflow before syncing.

Does the plugin support responsive, state, or style variants?

No. Variants are not currently supported. Separate Figma frames will create separate components or elements in Webflow.