No code website that is built right from a design in Figma. This always was a dream of many designers. Recently we got the step forward in this matter. Webflow released the plugin that helps to import our Figma frames as a webpage within a few clicks. Sounds amazing? Check out how it works in the video I published:

‍

‍

‍

‍

As you may notice, the plugin has got huge potential, and works fine - it lacks some things, like component integration, but this is just a first release. I really hope that folks from Webflow will continue developing it.

If you skipped the video tutorial, here is a brief summary of what you can actually do with the plugin:

Figma to Webflow plugin

Plugin integrates with Webflow projects you select. You can pick one or as many as you want. The entire integration is super easy. However, for now, this seems to be weird because importing your designs with a plugin is just like CMD+C from Figma with the plugin and CMD+V into Webflow page.

I suppose that this is needed to get ready for some upcoming features 🤞

Once you launch the plugin, you will notice a section with dozens of predefined layouts. This is a collection very useful for all kinds of landing or product pages. Once you switch to the section tab, you will notice something more primitive but also useful. Thanks to sections may also create your own designs to import; designs built with them will be responsive in Webflow from the start.

‍

‍

‍

Imported designs may be interactive right after import. All you have to do is to name your layer button or link as “Button”. There are also a few special layer names that you will learn from using the predefined layout. Thanks to this, you will be able to build Sections, Columns, Headings, and paragraphs without relying on the predefined components.

What is worth to mention - the plugin is also able to copy and paste color & text styles from Figma into Webflow. Also, all icons in designs are automatically converted to SVGs. This plugin is a handy time-saver.

That’s all for the quick summary. I hope you enjoy the new design to no-code workflow!

Thanks for reading!

‍