Figma to Webflow plugin initial impressions: Can it replace a Webflow developer?

Webflow has been killing it lately. The investors agree, and that's why it was valued at US $4 billion in the last funding round. What's exciting is their solid product roadmap and the recent introduction of Webflow labs, where they focus on ideas beyond their core product.

One such product is the Figma to Webflow plugin. When it launched last week, the first question that came to my mind was, can it replace a Webflow developer? Let's find out.

About the plugin

As the name suggests, the plugin converts static designs in Figma to clean code in Webflow with a button click! And one keyboard shortcut to paste. There are a few things to note here:

• It only works with auto layout frames.
• It exports each group as an SVG.
• It converts layer names to class names.
• It doesn't push changes done in Webflow back to Figma.

Define H and P tags.

You can mark text blocks as P, H1, H2, etc. Select the text layer and click the appropriate tag from the plugin interface. Or prefix the layer name with '[P]--' for paragraphs and '[H1]--', '[H2]--', etc. for the headings.

Convert pixel text to rem.

For the relative unit lovers out there, you can convert the text sizes to rem with a simple setting change. It will save you the trouble of manual calculation.

Copy colour and text styles.

The plugin creates a neat visual of your text and colour styles that you can paste into your style guide page. However, it does not apply these styles to the global classes. Neither does it create colour swatches. You will have to do that manually.

Our initial findings

It works well, but conditions apply.

If you use predefined layouts and structures, things will work well. Everything is essentially an auto-layout frame with different properties. The plugin converts it to CSS Flexbox.

For simple sections and layouts, the conversion is flawless. For more complex ones, you will have to use Webflow.

It doesn't work in Safari.

For some strange reason, it didn't work in Safari. It copied successfully from Figma, but when we tried to paste it in Webflow, it gave an error 'Clipboard is empty'. I hope this is an easy fix and support for Safari will come soon.

It doesn't support combo classes.

There's no way to name layers so that it creates combo classes. Also, if you paste an element with the same layer name as an already defined class, Webflow will rename it. It's a problem if you wish to reuse class names but keep adding the same class elements repeatedly.

It crashes Webflow if the 'H' and 'P' layer names are empty.

We tried to paste an H1 text, which didn't have anything after '[H1]--' in the layer name and Webflow crashed. We did this to see if we could paste properties to the global H1 class, but there's no way.

It doesn't copy big images.

We tried copying a hero section frame with a background from Unsplash but kept getting the error 'Image size is too large.' We even hid the image fill, but it didn't work, and we had to remove it altogether.

Can it replace a Webflow Developer?

The short answer is no. It doesn't intend to. One cannot expect a designer to build a Figma design with auto layout, copy it using the plugin and publish the site as it is.

Webflow created it to help the developers with the first step of the process: creating the basic layout according to the design. Once that is in place, there will be refinements, the addition of interactions, SEO optimisations, etc.

The plugin has its place in the dev process, especially for component-based systems. The world of front-end development is changing rapidly. And one can assess its future by analysing all the products coming out of Webflow labs. It seems promising!