Figma to Webflow plugin

Updated

Copy and paste your Figma designs into Webflow to streamline your site build.

Note

Check out our Figma file to dive deeper into the structures of the hero and navbar.

Important

Our support team is unable to offer direct help or troubleshooting for the plugin as these topics fall outside the scope of our customer support policy. If you have any questions or feedback, please visit the Webflow Labs Community where the entire Webflow community (staff included) can provide additional help and resources.

Do you prefer to build initial site designs in Figma, then use those designs as a guideline for your Webflow site build? Now you can paste your Figma designs straight into Webflow without having to recreate each design, element by element. You can also use the Figma to Webflow App to sync your Figma components and variables with your Webflow site — and update them with a click of a button.

Note

The Figma to Webflow plugin was built and launched by Webflow Labs, an internal innovation group. Products built and launched by Webflow Labs have limited support via our standard support channels and are meant to be experimental, so functionality is subject to change. The plugin may also be removed at any time — use it at your own risk. We’d love to have you share your thoughts, comments, and feedback here.

What is the Figma to Webflow plugin?

The plugin translates Figma layers into their HTML and CSS equivalent — which is the code that Webflow generates when you visually design your site. 

The translations you can currently use with the plugin include:

Note

Since Figma is not a web production tool, certain translations are not yet supported.

Note

The Figma to Webflow plugin is not currently supported for Figma in the Safari browser. We recommend you use Chrome or the Figma Desktop App.

How to install and authorize the Figma to Webflow plugin

To use the Figma to Webflow plugin, you’ll need to create a Figma account. Then, you can install the plugin:

  1. Go to the Figma to Webflow plugin page
  2. Click Open in..., which will redirect you to a new Figma design file and open a plugin modal window
  3. Click Run in the plugin modal window
  4. Click Connect account

If you aren’t logged into Webflow yet, a new browser tab will open where you can log in with your Webflow credentials. Then, you’ll be taken to the App authorization page to authorize the plugin with your Webflow account and access the plugin’s functionality.

Select all sites and Workspaces you want to authorize the plugin for (i.e., all the sites you want to paste your Figma designs into). Then, click Authorize app on the App authorization page. 

Important

Make sure you select the correct sites, so you can accurately transfer designs from Figma to Webflow. If you forget to authorize the plugin for a site you want to paste your designs into, please follow the instructions for authorizing the plugin for a new site.

Keep in mind that if you authorize the plugin for a specific site, you’ll only be able to remove the plugin from that specific site’s settings. If you authorize the plugin for a Workspace, you’ll remove the plugin from your Workspace settings. Learn more about removing the plugin.

Note

By authorizing this application, you continue to agree to Webflow Labs Terms of Service and Privacy Policy.

How to add or remove sites from plugin authorization

To add the plugin authorization to a new site, or remove it from a site:

  1. Click the “hamburger menu” in the plugin modal window
  2. Select Log out
  3. Click through the plugin modal instructions
  4. Click Connect account
  5. Select all sites you want to add the plugin authorization to or remove the plugin authorization from

Note

When you log out of the plugin, the plugin will be unauthorized from every site or Workspace you had originally authorized it on. You’ll have to re-authorize the plugin on your sites or Workspaces to use it again.

How to use the Figma to Webflow plugin

To start using the plugin, return to Figma and click Let’s start on the modal window. Then, you can:

Design from scratch in Figma

You can create designs from scratch in Figma (i.e., design without the plugin’s prebuilt layouts or structures) — just make sure you use auto layout. Then, you can make your designs responsive by setting wrap and min/max width on parent frames. Learn more about how to create responsive designs in Figma.

Make sure all frames (including nested frames) use auto layout. And, if necessary, detach component instances to ensure you can edit the design in Webflow. You can quickly detach instances by pressing Option + Command + B (on Mac) or Control + B (on Windows).

Pro tip

You can use Option + Command + C (on Mac) or Control + Alt + C (on Windows) to copy a layer’s properties, then use Option + Command + V (on Mac) or Control + Alt + V (on Windows) to paste it into a different selected layer. This shortcut can be used for copying fill, stroke, and text properties.

After you create your design using auto layout, you can transfer your design to Webflow with the plugin:

  1. Select the design (and all of its layers) on the Figma canvas
  2. Go to the Copy/paste tab in the plugin modal window
  3. Choose the Webflow site you want to paste your design into from the Choose Webflow site dropdown in the plugin modal window
  4. Click Copy to Webflow in the Figma to Webflow plugin modal window
  5. Click Confirm copy to Webflow if the plugin requests confirmation
  6. Open the Webflow Designer in its own window
  7. Paste the design onto the Webflow Designer canvas

Note

You’ll only need to choose your Webflow site once from the Choose Webflow site dropdown. Then, you can copy and paste multiple designs from your Figma file into Webflow.

Use Figma to Webflow plugin layouts

The plugin includes pre-built responsive layouts to help you jumpstart your designs for navbars, hero sections, forms, footers, and many other common design elements.

Important

The plugin works by translating auto layout frames into a format that Webflow’s Designer understands. Since Webflow is a website development tool, we can only support frames that use auto layout.

To copy a layout from Figma to Webflow:

  1. Go to the Layouts tab in the plugin modal window and choose Layouts from the dropdown
  2. Choose a layout
  3. Select the layout on the Figma canvas
  4. Choose the Webflow site you want to paste your layout into from the Choose Webflow site dropdown in the plugin modal window
  5. Click Copy to Webflow
  6. Click Confirm copy to Webflow if the plugin requests confirmation
  7. Open the Webflow Designer in its own window
  8. Paste the layout onto the Webflow Designer canvas

You’ll only need to choose your Webflow site once from the Choose Webflow site dropdown. Then, you can copy and paste multiple layouts from your Figma file into Webflow.

Note

Make sure you select the full layout, and not just some of the elements inside. If you don’t select the full layout, it may not copy correctly and you won’t be able to paste it into the Webflow Designer.

Use Figma to Webflow plugin structures

The plugin also comes with pre-built structures, which provide a skeleton framework for your designs. Although the structures are empty in Figma, they ensure responsiveness in Webflow — so you can use these structures as content wrappers. Then, when you paste them and their content into Webflow, the structures will remain responsive across breakpoints

To copy a structure from Figma to Webflow:

  1. Go to the Layouts tab in the plugin modal window and choose Structures from the dropdown
  2. Choose a structure
  3. Select the structure on the Figma canvas
  4. Choose the Webflow site you want to paste your structure into from the Choose Webflow site dropdown in the plugin modal window
  5. Click Copy to Webflow
  6. Click Confirm copy to Webflow if the plugin requests confirmation
  7. Open the Webflow Designer in its own window
  8. Paste the structure onto the Webflow Designer canvas

You’ll only need to choose your Webflow site once from the Choose Webflow site dropdown. Then, you can copy and paste multiple structures from your Figma file into Webflow.

Note

Make sure you select the full structure, and not just some of the elements inside. If you don’t select the full structure, it may not copy correctly and you won’t be able to paste it into the Webflow Designer.

Copy and paste text and color styles

If you have text and color styles in your Figma file, you can copy those to Webflow for easy access when designing in your site. We recommend you create a Style guide page in Webflow, so you have a dedicated space for your text and color styles. You can individually copy text styles, color styles, or you can copy all text and color styles at once.

Text and color styles that can be copied include:

Text and color styles will be pasted into Webflow with a pre-set “Style guide” template.

Text styles

To copy text styles from Figma:

  1. Click the “hamburger menu” in the plugin modal window
  2. Select Copy text styles
  3. Go to your dedicated Style guide page (if you created one) in your Webflow site, or another page in your Webflow site
  4. Press Control + V (on Mac) or Command + V (on Windows) to paste in the local text styles

The text styles will be pasted into Webflow with a pre-set “Style guide” template. Text styles are pasted in the Text styles section. Each text style will receive a class with the name that you set on the text style in Figma (e.g., if you named a text style “Tahoma Bold” in Figma, it’s Webflow class name will be “Tahoma Bold”).

Color styles

To copy color styles from Figma:

  1. Click the “hamburger menu” in the plugin modal window
  2. Select Copy color styles
  3. Go to your dedicated Style guide page (if you created one) in your Webflow site, or another page in your Webflow site
  4. Press Control + V (on Mac) or Command + V (on Windows) to paste in the local color styles

The color styles will be pasted into Webflow with a pre-set “Style guide” template. Color styles are pasted in the Color styles section. Each color style will receive a class labeling it as a color swatch and the name that you set on the color style in Figma (e.g., if you named a color style “Pink” in Figma, its Webflow class name will be “Color Swatch / Pink”). You’ll also be able to see the color’s hex code next to the local style on the Webflow canvas, or by going to Style panel > Backgrounds, then clicking on the color swatch next to color.

These color styles aren’t automatically created as Webflow color variables, so we recommend you manually create these variables to use the colors across your site.

How to copy all text and color styles at the same time

To copy all text and color styles from Figma, 

  1. Click the “hamburger menu” in the plugin modal window
  2. Select Copy all text & color styles
  3. Go to your dedicated Style guide page (if you created one) in your Webflow site, or another page in your Webflow site
  4. Press Control + V (on Mac) or Command + V (on Windows) to paste in the local styles

The styles will be pasted into Webflow with a pre-set “Style guide” template.

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:

Additionally, you can use the Figma to Webflow App to seamlessly import components and variables from Figma into Webflow.

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.

Note

If you have a layer that doesn’t use auto layout in your Figma design, you’ll see a warning in the plugin modal asking you to change the layer to auto layout before you can copy it to Webflow. You can click the yellow caution triangle in the modal to select all layers that need to be converted to auto layout.

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.

Illustrations and Icons

Figma is a vector tool that lets you create illustrations, icons, and vector logos. Most illustrations are composed of several vector layers. These layers are unique to Figma and other vector tools, and are difficult for the plugin to parse — which often leads to timeout errors.

If you have vector layers in your design, the plugin automatically creates a new vector parent layer named “Vectors wrapper.” This wrapper will wrap your vector layers in order to export to SVG. The plugin will delete this layer in Figma after the copy process is done, although it will still appear in Webflow.

If you are using Figma components in your vector layer, you may need to detach instances before copying the layer. If this is the case, the plugin will warn you to detach the instance.

You can quickly detach instances by pressing Option + Command + B (on Mac) or Control + B (on Windows).

Classes

Every Figma layer name is converted into a class when you copy a design from Figma to Webflow.

Same name, different styles

If two Figma layers have the same name but different styles, the plugin renames those classes for you by appending a number to the class name. For example, if you have 2 layers in Figma named “container” with different styles, the plugin applies a “container” class to one of the layers and applies a “container 2” class to the other layer after you paste them onto the Webflow Designer canvas.

Similarly, if you paste a layer onto the Webflow canvas that has a class that already exists in your site, the class name will appear with an incremented number. For instance, if you already have a “Button” class in your site and you paste a Figma layer named “Button” onto the Webflow Designer canvas, the layer’s class will become “Button 2” in the Selector field. As an alternative, you can paste a Figma layer into Webflow using an existing Webflow class’s styles, or change an existing Webflow class’s styles to a Figma layer’s styles.

Pro tip

If you find yourself copying the same layout over to Webflow several times, you may create class bloat in Webflow, which can lead to reduced performance on your published site. To keep your classes tidy (and avoid having classes like “Button 234986”), delete unwanted layouts and/or elements in your Webflow site, then clean up styles in the Style Manager. At this point, you can paste your Figma designs into Webflow without causing class bloat.

Sharing styles between Figma and Webflow

There are 2 keyboard shortcuts to share styling between Figma layers and Webflow classes.

  • Command + Shift + V (on Mac) or  Control + Shift + V (on Windows) — this shortcut lets you paste Figma layers and style using existing Webflow classes. To do so, copy the layer in Figma and paste it into Webflow using Command + Shift + V (on Mac) or Control + Shift + V (on Windows). Your layer will paste into Webflow with the class’s existing styles already applied. For instance, if you have a “Button” layer with a red background in Figma, but your “Button” class has a green background in Webflow, the “Button” layer will paste into Webflow as a button with a green background.
  • Command + Option + V (on Mac) or Control + Option + V (on Windows) — this shortcut lets you paste Figma layers and change existing Webflow classes to match styling from Figma. To do so, copy the layer in Figma and paste it into Webflow using Command + Option + V (on Mac) or Control + Option + V (on Windows). Then, your existing Webflow class styles will change to those of the Figma layer’s styles. For instance, if you have a “Button” layer with a red background in Figma, but your “Button” class has a green background in Webflow, the “Button” class background color in Webflow will change to red.

Same styles, different class

If two Figma layers, or a Figma layer and a Webflow element, have the same styles but different class names, the plugin will de-duplicate those classes. This reduces duplicate class instances in Webflow.

For example, if you have 2 layers in Figma that have the same CSS styles, but one is named “Navbar” and the other is named “Cool navbar,” Webflow will de-duplicate them by applying the same “Navbar” class to each of them after you paste them onto the Webflow canvas.

Combo classes

You can also create combo classes on Figma layers by appending class names after forward slashes (i.e., “base class / combo class / second combo class”).

Images

When you 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.

Note

You may have to refresh the Webflow Designer to see the images you uploaded in the Assets panel.

HTML tags

The plugin guesses the correct HTML tag for each Figma layer by following a few rules:

  • Anchor tag: If the layer name contains “button” it will export the layer as an HTML anchor tag (i.e., “<a>”)
  • Paragraph tag: If the layer name contains “description”, “text”, or “paragraph” it will export the layer as an HTML paragraph tag (i.e., “<p>”)
  • Heading tag: If the layer name contains “heading” it will export the layer as an HTML H1 tag (i.e., “<h1>”)

However, if you want the plugin to export the layer as a different HTML tag, you can define it manually.

Manually defining HTML tags

When you have an element selected on the canvas, you can choose the HTML tag for that element in the Copy/paste tab of the plugin modal window. For text elements, the plugin supports H1-H6, Div, and P HTML tags. For autolayout elements, the plugin supports H1-H6, Div, Section, and Link HTML tags.

Backgrounds

The plugin supports solid, linear, and image backgrounds for auto layout layers and text layers.

Note

If your background image doesn’t show up in Webflow after copying and pasting using the plugin, please refresh the Designer page.

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

Note

You won’t be able to set a layer’s responsiveness in the Responsive dropdown if the layer’s width is less than 250 px or if the layer is already vertically stacked.

To control the responsiveness of a layer:

  1. Select the layer
  2. Go to the Copy/paste tab in the plugin modal window
  3. Choose the breakpoint at which you want the layer to shift to a vertical stack

Advanced plugin functionality

The plugin parses the selected Figma layer and converts its styles and layout to HTML tags and CSS properties. The plugin only accepts auto layout to ensure this conversion is as accurate as possible.

Note

The Figma to Webflow plugin is not currently supported for Figma in the Safari browser. This means the plugin will not work if you’re designing in Figma using the Safari browser. We recommend you use Chrome or the Figma Desktop App.

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. If you authorized the Figma to Webflow plugin for your Workspace, please follow the steps to remove the plugin from your Workspace. If you authorized the plugin for 1 or multiple site(s), please follow the steps to remove the plugin from your site.

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 “3 disclosure dots” 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

Troubleshooting the plugin

If the plugin is not copying your designs correctly, first ensure you’re using a supported browser. The plugin’s supported browsers include Chrome and the Figma Desktop App. The plugin is not currently supported for Figma in the Safari browser.

If the problem persists, try the following steps:

  • Copy a single prebuilt layout, prebuilt structure, or text layer that uses auto layout and paste it into Webflow — if the frame copies and pastes correctly, the plugin is functioning. If the frame doesn’t copy, please proceed with the following troubleshooting steps
  • Search our Webflow Labs Community for solutions
  • Post a question in the Webflow Labs Community

If following the troubleshooting steps above doesn’t help, please create a new Figma file with the frame that is not copying correctly and share that with the Webflow Labs team at labs@webflow.com. They will reply as soon as possible.

How to share feedback

We would love to have your thoughts, comments, and feedback to help us make this plugin shine. Please share your insights with us in the Webflow Labs Community.