Last week, Webflow Labs made a major announcement by launching the first version of the Figma to Webflow plugin. This "revolutionary" plugin promises to easily transform your design - Figma mockup - into a fully responsive Webflow site with a simple copy and paste.

The promise is beautiful. But how does it translate into practice?

Let's find out together in this article.

Figma to Webflow plugin

It's the dream of many designers: to be able to bring their design to life without depending on developers. This is also the main argument of Framer, an all-in-one no-code tool that allows you to transform your design into a website "in one click".

So, in the best of all possible worlds, this is how the plugin works!

How does the plugin work?

The principle is simple:

1. Download the plugin on your Figma account
2. Connect your Figma to Webflow plugin to your Webflow project
3. Select the frame of your Figma model
4. Run the Figma to Webflow plugin
5. Copy elements (sections, components, variables)
6. Paste your design (cmd + V or control + V) into the body tag of your webflow project!
7. 🪄

Check out a live example in this TikTok video! (8 seconds on the clock ? 🏎)

But in reality... there are technical complexities to consider:

• Your entire Figma design must be in Auto Layout (and this is very complicated for some elements)
• ⚠️ Be careful with the naming of elements in your Figma file, they will become CSS classes on your Webflow site
• It is not possible to create combo classes on Figma, which limits the use of Client-First. Example: .padding-top.padding-large.

Learn more with the full article from Webflow University

Test the Figma to Webflow plugin

Our opinion on the tool

In conclusion, the first version of the Figma to Webflow plugin is very promising and intelligently integrated in your workflow, it could save you time in the development of some projects.

However, there are still points to clarify in terms of SEO, CSS class structure and use on larger websites. You can't use the Collection List CMS feature from Figma either.

On the other hand, this announcement is above all a formidable communication coup that counters the arguments of the competing no-code web construction tool, Framer, which had used the "design, publish, done."workflow as the core of its strategy.

Bravo Webflow! 😉