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

1. Open the Figma to Webflow plugin page
2. Click Try it out, which opens a Figma design file and the plugin modal window
3. Click Run in the plugin modal
4. Log in to your Webflow account (if not already logged in) and authorize the plugin.
5. Select the sites or Workspaces you want to connect to the plugin and click Authorize app

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 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

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 be synced automatically. Deselecting a variable on import will replace it with a static variable.

How to sync variables

1. Open the Variables tab in the plugin
2. Select a collection and mode 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

Note that you can only sync one collection and mode at a time. Additionally, you can specify units (px, em, or rem) and set a base font size (for em/rem units) in the Figma plugin’s 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 which styles to import, which are then 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.

Custom fonts

If you’re using custom fonts in your Figma designs, you’ll need to upload them to your Webflow site prior to transferring your Figma designs, to ensure the fonts transfer correctly. If you don’t add the custom fonts to Webflow, they’ll be lost during the transfer. Learn how to upload custom fonts to your Webflow sites.

Images

When you import or paste layers from Figma, assets will be created automatically for any image layers or vector icons.

When you copy and paste a design with images, the images are uploaded to Webflow’s Assets panel. Make sure you have the correct site selected in the Choose Webflow site dropdown in the plugin modal window, or your images won’t upload to the Assets panel.

HTML tags

The plugin guesses the correct HTML tag for each Figma layer. Layer names containing “button” export as HTML anchor tags, layer names containing “description”, “text”, or “paragraph” export as HTML paragraph tags, and layer names containing “heading” export as HTML H1 tags.

When you have an element selected on the canvas, you can also define the HTML tag manually for that element in the plugin modal window. For text elements, the plugin supports H1-H6, Div, and P HTML tags. For auto layout elements, the plugin supports H1-H6, Div, Section, and Link HTML tags.

Responsiveness

You can also determine at which breakpoint a Figma layer shifts to be vertically stacked, giving you more control over your design’s responsiveness. You have four breakpoint options to choose from in the plugin:

• Tablet — the layer will shift to a vertical stack at the tablet breakpoint (from 991px to 767px wide)
• Mobile landscape — the layer will shift to a vertical stack at the mobile landscape breakpoint (from 767px to 478px wide)
• Mobile portrait — the layer will shift to a vertical stack at the mobile portrait breakpoint (from 478px to 0px wide)
• Not responsive — the layer defaults to a horizontal stack regardless of viewport width. However, you can manually set wrap and min/max width on parent frames to make your design responsive.

How to use the Figma to Webflow app

The Figma to Webflow App lets you import your synced layers, variables, and styles from Figma 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), the App offers three resolution options:

• Accept changes – removes the element(s) in the component from Webflow
• Create a new component – keeps the component’s changes without maintaining sync.
• Revert changes in Figma that removed the element – you can go back to Figma and add the removed element(s) back to the component, which will remove the conflict

How to remove the Figma to Webflow plugin

You can remove the Figma to Webflow plugin from your Workspace or one of your sites depending on where you originally authorized the plugin’s access.

How to remove the plugin from your Workspace

To remove the Figma to Webflow plugin from your Workspace:

1. Open the Account dropdown in the navbar
2. Click Workspaces
3. Choose the Workspace you want to remove the plugin from
4. Go to Workspace settings > Integrations tab > Authorized applications
5. Click Revoke from the “Webflow from Figma to Site” application

How to remove the plugin from your site

To remove the Figma to Webflow plugin from your site:

1. Go to your Dashboard
2. Click the “more options” icon on the site you want to remove the plugin from
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 from the “Webflow from Figma to Site” application

FAQs

What browsers are supported?

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

What happens if I uninstall the plugin?

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

Are custom fonts supported?

Yes, but you must upload the fonts to Webflow first for proper syncing.

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

No, variants are not currently supported. Separate Figma frames will create separate components/elements in Webflow.