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.
@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.
@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!
Just tried the simplified version: navbar and hero heading left. plugin at figma completed the process, shows a green button, says "copied to clipboard", and closes. at webflow I have a "loading..." at the destination site. and nothing at the clipboard!! xD /shrugs/
First - Amazing job, guys. It's super promising and loved as a concept. Then, I tried to use it, but when I do the copy/export to webflow, keeps crashing and stays "something went wrong/ server connection issue" and closes. will try to do a simplified section/text-image to see if that works. morning!