Figma to Webflow plugin: everything you need to know to migrate your Figma model to Webflow

If you are a web designer, you have probably already used Figma to create website mockups. And if you are a Webflow developer, you know how important it is to create a clear and well-organized mockup before you start building your website. But how to efficiently migrate your Figma mockup to Webflow without wasting time rebuilding everything? This is where our new Figma to Webflow training course available for free on Digidop Academy comes in!

Webflow has recently released a new plugin allowing to migrate "in one click" a Figma template to a Webflow site. An announcement that made a lot of noise in the Webflow community, since it is the first time that such a simple migration is possible. So simple ... provided you know how to use it anyway! Because if you want to have an optimal and coherent rendering on Webflow, there is a very meticulous work to do beforehand on Figma.

In this 5-parttraining, we will show you how to use Figma to create clean and organized website layouts that are easily convertible to Webflow. We will cover the key features of Figma and more specifically of this plugin, to help you successfully migrate to Webflow. We will also review Finsweet's Client-First methodology and show you how to integrate it with a Figma layout for better organization of CSS classes in Webflow.

Here is an overview of the different episodes of our Figma to Webflow training:

Episode 1: Autolayout in Figma

If you want to use the Figma to Webflow plugin, you need to master the autolayout functionality in Figma. So before you get to the design, it is essential to understand what an autolayout is and how to use it in Figma. For Webflow users, autolayouts are similar to flexboxes and allow you to manage the position of elements in relation to each other. With autolayouts you can easily adjust margins and paddings, intervene on elements, and organize your layout in an efficient way.

In this episode, we show you how to use Autolayout in Figma to create structured and adaptable web mockups. You'll learn the best practices for using autolayouts, and we'll show you how they can help you migrate your mockup to Webflow faster.

Episode 1: Autolayout

Episode 2: Layout Templates & Structure

In this episode, we focus on the two types of templates offered by the Figma to Webflow plugin. You have indeed the possibility to use two types of pre-made templates to help you design web mockups that will be easy to migrate to Webflow. Among these templates you will have the choice to use :

1. Layouts : these are pre-designed sections that you can reuse as is. For example a navbar, a footer, a logo section, etc.
2. Structures : these are section or column frames designed in autolayout that you can assemble to create your own custom layouts.

By using these templates, you benefit from many advantages such as already designed templates in autolayout, a ready to use HTML tag, a better conversion of elements in Webflow and a better responsiveness after migration.

We will show you how to use these two types of templates with the Figma plugin to reduce the creation time of your template and to facilitate its import into Webflow.

Episode 2: Figma to Webflow plugin

Episode 3: Resizing in Figma

Converting a Figma mockup into a Webflow site requires optimal responsive management. If autolayouts are a key element for a successful migration, it is important to go further by using the resizing feature in Figma. This feature allows you to assign a resizing behavior to each element of the layout. In this episode, we delve into the three resizing options offered by Figma:

1. Fixed Width: to preserve the size of an element on all types of media
2. Hug Contents: to adapt the size of an element to the content it contains
3. Fill container : to adapt the size of an element to the container in which it is integrated

In this episode, we'll show you how to use each option to ensure that your layout adapts to all types of devices. You will also learn how to use these options in combination with autolayouts and layout templates to create the most responsive Figma mockup possible when migrating to a Webflow site.

Episode 3: Responsive Figma to Webflow

Episode 4: Migrating a Figma model to a Webflow site

Migrating a Figma mockup to a Webflow site can be a tricky step, as it requires mastering several concepts to avoid mistakes. In this episode, we will review several critical points that can occur during the migration, as well as tips to avoid them. We will also show you, step by step, how to migrate your Figma model to Webflow.

We'll also cover the advanced features of the plugin, allowing you to integrate HTML tags into your layouts, and to prepare the structure of your Headinds for SEO. We will also see how to export to Rem instead of Pixel.

With this episode, you will have all the information you need to successfully migrate your Figma layout to Webflow, avoiding common pitfalls and saving time.

Episode 4: Figma to Webflow migration

Episode 5: Creating a Figma model with the Client-First methodology

In episode 5 of our series on migrating Figma mockups to Webflow, we go one step further by integrating the Client-First development methodology directly on your Figma mockup. This development approach is used by Finsweet for a clear and organized hierarchy of CSS classes in Webflow. Using the layout templates of the Client-First Kit and the Relume plugin, we show you how to create Figma mockups with an understandable naming of CSS classes. With this methodology, you can easily transform your layout into a Webflow site with an optimized code structure.

This Figma to Webflow training from Digidop Academy will allow you to migrate your Figma mockups to Webflow in a smooth and efficient way. You will also learn how to create Figma mockups for Webflow with a clear and precise class hierarchy, which will help you to maintain a clean and optimized code structure.

Episode 5: Figma Client-First Model

What's new in 2024: Synchronize Design System - Variables & Components

Webflow recently released an update to its plugin, with new features dedicated to design system synchronization. With just a few clicks, you can now connect all your Figma variables and components to your Webflow projects. 

We've tested it, and here's what we think of the new features:

Benefits

• Time-saving for developers: import variables in just a few clicks
• Standardize Figma with Webflow: use the same variables (names and values)
• Simplified use of Webflow: styles can be modified using variables rather than CSS classes
• Controlled synchronization: choosing which variables and components to connect
• Connecting a single design system for one or more Webflow projects
• HTML tagging from Figma

Boundaries

• Variable aliases not detected by plug-in: fixed values must be used for each Figma variable.
• Variable import: collection by collection, it's impossible to import everything at once.
• Responsive: impossible to create responsive values natively on Webflow (2 solutions suggested in the video)
• Component import: complex and limited to very "basic" components
• More complex to set up when using certain development frameworks

At Digidop, we have for the moment decided to use this plugin to migrate variables from Figma to Webflow. But this plugin is another giant step forward in collaboration between designers and developers. We'll be keeping a close eye on future updates and keeping you informed!