Create your Webflow site with the new Figma plugin!

Figma has just released a new plugin that will probably not change your life... but the way you create your Webflow site !

The promise: simplicity, speed 🚀

It is now possible to switch from Figma to Webflow even more easily!

But how?

I answer it in this article 👇

A new plugin at Figma?

What is Figma?

If you are here, I assume you know Figma 😅 Nevertheless, a reminder doesn't hurt!

Figma is a tool for user interface design And of collaborative design based on the cloud. It allows users all sorts of design, mobile and web applications, graphics, icons, and other visual elements. It's a no-code tool that's very popular in the web design world because it allows real-time collaboration between team members, allowing designers, developers, and other stakeholders to work together on a project.

Plugin overview

The new plugin presented by Figma allows you to paste your Figma designs directly into Webflow without having to recreate each design element one by one! Technically, this plugin actually translates Figma layers into their equivalent HTML and CSS - which is the code that Webflow generates when you design the visual of your site.

Install the new Figma plugin

To start benefiting from this little gem of technology, nothing could be easier. All you need to do is install the new Figma plugin. You can do it directly from This link and let yourself be guided 😉

‍

‍

Back on Figma, if you don't see the plugin, go to Resources < Plugins and click on “Run” which appears next to the name of the plugin.

And that's it! ✌🏼

Create your design on Figma

The second step is obviously to create the design of your website on Figma. That goes without saying 😇

Some recommendations for success:

• create an eye-catching hero section : it's the first thing visitors will see when they visit your site 🤞 This section should capture the user's attention and give a positive first impression of your brand.
• add a responsive navigation bar : the navigation bar should be consistent across all pages of your site to facilitate navigation. You can choose from a selection of pre-built layouts offered by Figma.
• create individual pages using consistent design elements : Figma offers a variety of intuitive tools to help you do this. By using features like grids, components, and styles, you can create a consistent and professional design for your website.

Paste the design on Webflow

And now? The plugin automatically translates your frames to Figma. It is important to properly rename your layers, so that you can easily find your way around on Figma, but especially on Webflow.

To activate the plugin, simply select The frame of your Figma model, to open the plugin, to choose your Webflow site to connect it and to click on “Copy to Webflow”.

Then, you can open Webflow, go to your project and Stick your design directly ! 😍 To do this, “command + V” if you are on a Mac or “control + v” if you are on a PC (yes I am teaching you how to copy and paste 😆)

Then watch your design magically appear! 🤩

‍

‍

Attention, know that the changes you make on Webflow will not be transferred to Figma.

‍

If you want to go deeper into these topics, Webflow will tell you about them better than me, I'll let you consult Webflow University lessons.

Bonus: How to design your Webflow site on Figma

Yes, but how do you design your Webflow site on Figma? Do you want to deepen your knowledge? Follow the guide! ✌🏼

‍