Last week, Webflow Labs made a major announcement by launching the first version of the Figma to Webflow plugin. This "revolutionary" plugin promises to effortlessly transform your design - Figma mockup - into a fully responsive Webflow site through a simple copy-paste.
The promise is enticing. But how does it hold up in practice?
Let's explore it together in this article.
Figma to Webflow Plugin
It’s the dream of many designers: being able to bring their designs to life without relying on developers. This is also the main selling point of Framer, an all-in-one no-code tool that enables users to turn their designs into websites "with one click".
In an ideal world, here's how the plugin works!
How does the plugin work?
The principle is simple:
- Download the plugin to your Figma account
- Connect your Figma to Webflow plugin to your Webflow project
- Select the frame of your Figma mockup
- Run the Figma to Webflow plugin
- Copy the elements (sections, components, variables)
- Paste your design (cmd + V or control + V) into the body tag of your Webflow project!
- 🪄
Check out a live example in this TikTok video! (8 seconds flat? 🏎)
However, in reality... there are some technical complexities to consider:
- Your entire Figma design must be in Auto Layout (which can be quite complicated for certain elements)
- ⚠️ Pay attention to the naming of elements in your Figma file, as they will become CSS classes on your Webflow site
- It's not possible to create combo classes in Figma, which limits the use of Client-First. For example: .padding-top.padding-large.
Learn more with the full article from Webflow University
Try the Figma to Webflow plugin
Our opinion on the tool
In conclusion, the first version of the Figma to Webflow plugin is quite promising, and when integrated thoughtfully into your workflow, it could save you time in developing certain projects.
However, there are still some issues to clarify regarding SEO, class structure in CSS, and usage on larger websites. You also cannot utilize the Collection List CMS feature from Figma.
Nonetheless, this announcement serves as a fantastic communication move that counters the arguments of the competing no-code website builder, Framer, which had used the "design, publish, done." workflow as its core strategy.
Well done Webflow!
