Design in Figma, Launch in Webflow
The Figma to Webflow plugin, built by
Webflow Labs
, lets you turn your static designs into clean, production-ready Webflow HTML and CSS. Add Webflow Interactions, wire up content using our powerful CMS, and one-click publish onto the fastest hosting infrastructure.
Here’s how it works:
-
Install + connect.
Authorize access to the Webflow sites or workspaces you’ll be using to transfer designs from Figma to Webflow. -
Copy + paste.
Design with auto layout in Figma, then easily translate your designs to Webflow as responsive flexbox structures — you can even adjust HTML tags within Figma to get your site live faster. -
Polish + publish.
Bring your static designs to life with IX2, wire up content using Webflow’s powerful CMS, and one-click publish onto the fastest hosting infrastructure.
Additional features:
-
20+ prebuilt layouts and responsive structures
to smoothly convert to Webflow — and are responsive across devices. - Your styling, layouts, colors, text, and images will transfer seamlessly when you paste into Webflow.
- Automatic style guide creation — create a style guide page in Webflow based off the text and color styles you’ve created in Figma.
- Support for over 50 CSS declarations.
- Support for exporting vectors nodes as SVGs.
What is supported:
- Auto layout
- Typography styles
- Border styles
- Shadow styles
- Background images and linear gradients
- Vector and shape conversion to SVGs
- Images
- Opacity
- Absolute position
Workflow tips:
- On paste, Webflow class names will be derived from layer names. Webflow will automatically apply existing classes when the same styles are detected on an imported element.
- Add a prefix to all imported classes from the settings menu if you’d like to differentiate layouts imported from Figma.
- Pre-built layout and structure templates are built with auto layout and are fully responsive when pasted into Webflow. It will not convert them to native Webflow row/columns or grid.
- All grouped layers and Vector layers will export as SVGs. This can be handy for complex multi-layer graphics.
- Prepend your text layers with [H1]– to apply HTML tags more quickly. This applies to headings [H1-H6], paragraphs [P] and links [A].
Caveats and future improvements
- All Webflow classes are translated 1:1 with Figma frames’ names. Due to the current copy/paste limitation on the Webflow Designer, the plugin is unable to detect whether a class is already used in Webflow, which may lead to class duplication. The best workaround for this now is to remove instances of old components in Webflow, cleanup unused styles, and repaste the designs. We plan on improving this workflow in the future.
- The plugin currently only supports copying of auto layout frames. We’re looking into supporting non-auto layout frames.
- The plugin doesn’t translate prototyping interactions from Figma. Users can apply Webflow Interactions after pasting designs over.
- The plugin doesn’t transfer custom fonts. If you’re using custom fonts in Figma, you’ll need to upload them to your Webflow site prior to copying.
- Instances are not supported. Detach instances before copying. Pro tip: clicking on the ⚠ icon will select all instances layers to make it easy to detach all at once.
- Webflow color swatches will not be automatically created when copying over color styles from Figma. You’ll have to manually create the swatch after in Webflow.
Read our
Documentation
to help you get started and jump to our
Forum
to get support from the community and staff.
About Webflow Labs
The Figma to Webflow plugin is built by Webflow Labs, an internal innovation and incubation team focused on amplifying Webflow’s core product across no-code and web development communities. Products built and launched by Webflow Labs have limited support via our standard support channels and are subject to change or removal at any time. You can learn more
here
.
