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 crucial it is to create a clear and well-organized mockup before you start building your website. But how can you efficiently migrate your Figma mockup to Webflow without wasting time rebuilding everything? That's where our new Figma to Webflow training available for free on the Digidop Academy comes into play!
Webflow has recently released a new plugin allowing for a "one-click" migration of a Figma mockup to a Webflow site. This announcement has created quite a buzz within the Webflow community, as it's the first time such a simple migration is possible. It's easy... as long as you know how to use it, of course! Because if you want to achieve optimal and consistent results on Webflow, there is meticulous work to be done in advance on Figma.
In this 5-episode training, we will show you how to use Figma to create clear and organized website mockups that can be easily converted to Webflow. We will cover the key features of Figma, particularly this plugin, to help you succeed in your migrations to Webflow. We will also review Finsweet's Client-First methodology and show you how to integrate it into a Figma mockup for better organization of CSS classes in Webflow.
Here’s 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 feature in Figma. Before diving into design, it is essential to understand what an autolayout is and how to use it in Figma. For Webflow users, autolayouts are similar to flexbox and allow you to manage the position of elements relative to each other. With autolayouts, you can easily adjust margins and paddings, manipulate elements, and organize your mockup effectively.
In this episode, we will show you how to use Autolayout in Figma to create structured and adaptable web mockups. You will discover best practices for optimal use of autolayout, and we will demonstrate how they can help you migrate your mockup to Webflow more quickly.
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 the option of using two types of pre-designed templates to help you create web mockups that will be easy to migrate to Webflow. Among these templates, you can choose to use:
- Layouts: these are pre-designed sections that you can reuse as they are, such as a navbar, footer, logo section, etc.
- Structures: these are section or column frames designed with autolayout that you can assemble to create your own custom layouts.
By using these templates, you benefit from numerous advantages, such as mockups already designed with autolayout, ready-to-use HTML tags, better conversion of elements into Webflow, and improved responsiveness after migration.
We will therefore show you how to use these two types of templates with the Figma plugin to reduce the time it takes to create your mockup and facilitate its import into Webflow.
Episode 2: Figma to Webflow Plugin
Episode 3: Resizing in Figma
The conversion of a Figma mockup into a Webflow site requires optimal management of responsiveness. While 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 adaptable behavior to each element in the mockup. In this episode, we delve into the three resizing options offered by Figma:
- Fixed Width: to maintain the size of an element across all types of devices
- Hug Contents: to adjust the size of an element according to the content it contains
- Fill Container: to adjust the size of an element to fit the container it is within
During this episode, we will show you how to use each option to ensure that your mockup adapts on all types of devices. You will also learn how to use these options in combination with autolayouts and layout templates to create a Figma mockup that is as responsive as possible when migrating to Webflow.
Episode 3: Responsive Figma to Webflow
Episode 4: Migrating a Figma Mockup to a Webflow Site
Migrating a Figma mockup to a Webflow site can be a tricky step, as it requires mastery of several concepts to avoid mistakes. In this episode, we will go over several critical points that may arise during migration, along with tips to avoid them. We will also show you, step by step, how to migrate your Figma mockup to Webflow.
We will also cover the advanced features of the plugin, allowing you to integrate HTML tags into your mockups and prepare the structure of your Headings for SEO. We will also see how to export in Rem rather than in Pixels.
With this episode, you will have all the necessary information to successfully migrate your Figma mockup to Webflow while avoiding common pitfalls and saving time.
Episode 4: Figma to Webflow Migration
Episode 5: Creating a Figma Mockup with the Client-First Methodology
In episode 5 of our series on migrating Figma mockups to Webflow, we take it a step further by directly integrating the Client-First development methodology into your Figma mockup. This development approach is used by Finsweet for a clear and organized hierarchy of CSS classes in Webflow. By utilizing the layout templates from the Client-First Kit and the Relume plugin, we will show you how to create Figma mockups with easily understandable CSS class naming. With this methodology, you will be able to seamlessly transform your mockup into a Webflow site with optimized code structure.
This Figma to Webflow training from Digidop Academy will therefore enable you to migrate your Figma mockups to Webflow smoothly and effectively. You will also learn to create Figma mockups for Webflow with a clear and precise class hierarchy, which will help you maintain a clean and optimized code structure.
Episode 5: Client-First Figma Mockup
2024 Updates: Synchronizing Design System - Variables & Components
Webflow has recently released an update to its plugin, featuring new functionalities dedicated to synchronizing design systems. It is now possible, with just a few clicks, to connect all of your Figma variables and components to your Webflow projects.
We tested it, and here’s our feedback on these new features:
Advantages
- Time savings for developers: import variables in just a few clicks
- Uniformity between Figma and Webflow: using the same variables (naming and values)
- Simplified use of Webflow: modifying styles using variables rather than from CSS classes
- Controlled synchronization: selection of variables and components to connect
- Connection of a unique design system for one or multiple Webflow projects
- HTML tag markup from Figma
Limitations
- Aliases (for variables) are not detected by the plugin: must use fixed values for each Figma variable
- Variable import: happens collection by collection; it's impossible to import everything at once
- Responsive: unable to create responsive values natively in Webflow (2 solutions proposed in the video)
- Component import: complex and limited to very "basic" components
- More complex to implement with certain development frameworks
At Digidop, we have currently decided to use this plugin for migrating variables from Figma to Webflow. However, this plugin marks a significant step forward in the collaboration between designers and developers. We are closely monitoring the upcoming updates and will keep you informed!
