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.
@borisperisset thank you so much for your feedback and support! We are trying to deliver the best value for our community and help them build for the web visually. We are together!
@johndamaiajorge thanks for all those comments. this plugin shows how figma (and sketch and xd...) walked to wrong path by not embracing complexity and tried to overcome it with their way of thinking (like auto-layout) . They created a parallel univers. In the best case we all can work with tools that are agnostic but let you built things with the basic building blocks of the "cyberspace". Like Webflow. Now Webflow needs to fight all those odds. Keep up the fight. :)
@plivodesign yea, currently the prebuilt layouts are only available through the plugin. But we are already working on proving some templates to help you start!
@ChrisD Christopher - thank you so much for taking the time to provide feedback, this is really helpful! undefined Thank you so much for all your support!
Awesome!!!! 🤘 I've been playing around with it and have some feedback on how you can improve the color and type conversion to make them more design system centric. Color styles: Come in as named classes with hex values, it would be great to have them appear in the color palette as named global swatches as well. Type styles: Come in as named classes, which is expected. If they also retained the color style they're using, and it was a global swatch that would be amazing. Naming: Color and type styles retain their Figma names. ie. "Light/Button/Primary" in Figma becomes "Color Swatch / Light/Button/Primary" in Webflow. It would be great if you had a setting that could convert them to different cases with a prefix, so you could get "--sc-color-button-primary" as a swatch name and "--sc-type-heading-xl" as a type class. Lots of love and thanks for this disgustingly good plugin 🤘.
@robi2 Hey Roby! Is the frame too large? (with several elements and images inside?) Can you try copying just a text node and let me know if that worked? For now I would recommend copying smaller sections. We are working on supporting larger playloads.
@webflow_labs thank you isn't enough for this level of innovation. I sincerely appreciate your efforts to helping people like me. Thank you for this plugin.
@johndamaiajorge If i can make suggestions: I think i would use pre-wrap for headings when exporting from the plug-in as standard, as headings now seems to break responsive. At least here, I changed it manually in Webflow. I also saw double classes for columns, is there a way to make these unique? These are in the hero section, nested. Both got renamed for example to column 13, or column in a blank project etc.. but I see the nested div in Figma is called content, some how the conversion, converted that to column, I think. So it nests colums in webflow, not: column, and inside content, but: column, inside column. So if you change classes bot are changed if you don't know what you are looking for, you keep changing both divs (same classes) and you need to add a combo class.
@johndamaiajorge Thanks. Copy/paste looks like it's working fine when running everything in Edge on a MAC, at least the fast test I did. The plug-in copies the structure and images. Edge is also chromium, right? I tested some more: transfered the sample blocks, that also seems to be working, with the responsive functionality. Edit It looks like it's fully working. I can even adjust flex-box settings in Webflow, that got imported incorrectly. Like a huge margin on the footer.
@puntdesign Hi Patrick! Thank you so much for sharing your process. While using the plugin we recommend using Webflow inside of Chrome. Otherwise it will not allow you to paste - yet 😎
Looks like a game-changer! I am gonna incorporate this into my workflow. I am working in Edge and Safari btw on MAC, so I can use Chrome plugins, but don't need to install Chrome for example. After I developed, I check browsers. But my primary browsers are Safari and Edge, usually I use Safari only to check, because it's picky and prone to lay-out errors, if that version works, it's easier to fix windows browsers. At least for me. Looking forward to letting this plug-in going through it's paces.! Keep up the great work!
@johndamaiajorge BOOM! thanks! Always avoiding Chrome... till now. works! will try to break it and share feedback later.