Trying to go from Figma to Webflow but don’t know where to start?
We’ve got you covered.
By the end of this blog, not only will you have all of the steps needed to go from Figma to Webflow, but you’ll also be equipped with tips for making the transition smoother!
Prepare Your Webflow Project
Before we start transferring a website from Figma to Webflow, we need to prepare our new Webflow project.
Create A Styleguide
Start by preparing a styleguide (in this article, we’ll assume you don’t have a defined styleguide for your Figma design).
A styleguide lets you set properties for elements used throughout your website. For example, you can set the default style of all your H1 headers to be a specific font, size, weight, color, etc.
This step ensures you only need to define the properties once instead of defining them over and over for every single element on your website (and for every breakpoint!). It also ensures consistent styling throughout your website.
Here’s how to quickly make a styleguide:
- Create a new page in your Webflow document
- Copy/clone Webflow’s styleguide to the new page (or create your own)
- Click the element you want to define
- Click on the “Selector” field (top right) and select the purple tag containing the words “All Pages.” This ensures your styling is automatically applied every time you create this element on your website (image reference below)
- Repeat this step for all elements you’ll use repeatedly throughout your design
Upload Fonts
If the font you’re using isn’t on Webflow, you can easily add it to your project.
- Go to “Project Settings”
- Click on the “Fonts” tab
- Select your font from the “Google Fonts” list. Select the weights you need and click “Add Font”
- If your font isn’t available in Google Fonts, you can upload an external font file
- Reload the Webflow page and the font should appear in your Webflow project
Assets
Now that the Webflow document is prepared, we can begin transferring assets from Figma to Webflow.
This starts by exporting the assets on Figma (images, icons, etc). There are 2 ways you can do this:
- Select all the assets you want to export. Then go to the “File” dropdown and click “Export”
- If you’ve already marked assets for export (using the “Exports” tab on the right sidebar in Figma), follow the same steps without selecting any assets.
Next, upload the files to the “Assets” folder on Webflow. This can be done in 2 ways:
- Drag and drop your files into the “Assets” folder
- Upload them manually into the folder
Tip #1: Use folders in Google Drive to organize the assets for each page of your design.
Tip #2: Compress your images to reduce their size. Large images cause your website to slow down.
Layers To Divs
Now the fun part: re-creating your Figma design on Webflow!
Use The Desktop Breakpoint As Your Starting Point
Start re-creating your Figma design on the Desktop breakpoint in Webflow.
This is because, in Webflow, design changes flow down to smaller screen sizes but not up to bigger screens.
After designing on desktop, switch to smaller breakpoints to optimize your website’s responsiveness. Generally, changes made on smaller breakpoints won’t be reflected on larger breakpoints.
Use A 12 Column Grid
Secondly, we recommend using a 12-column grid on both Figma and Webflow because it optimizes the re-creation process:
- It ensures all the elements are properly aligned across different screen sizes
- It’s available on Figma and it’s the standard grid on Webflow. This makes it easy to re-create the design precisely
Recreate Each Element On Webflow
Each element created on Figma has a CSS, Swift, and XML code that can be used to re-create the element on Webflow. Here’s how to access it:
- Click the element on the Figma file
- At the top of the right side panel, click on the “Inspect” tab
- The “Code” section shows all the CSS properties for your selected element
- If you want to select an element nested in a group, hold down control/command and hover your mouse over the element. Alternatively, right-click on the element, scroll to “Select Layer” and click on the element you want to access.
These settings can be used to accurately recreate every element on Figma to Webflow.
Tip #1: Your recreation on Webflow won’t be an exact pixel by pixel recreation. This is because elements behave differently when they’re coded vs. on design tools.
Tip #2: Similar to Figma, you are able to make a design once and re-use it (called a “component” on Webflow). This is helpful for things like the navigation bar, footer, etc. To create a component, select the element and click “create component” at the top of the left side bar on Webflow.
QA
Once your design is transferred from Figma to Webflow, optimized for each breakpoint, and you’ve performed your final checks – it’s time to publish your site and conduct a QA.
Your website on Webflow designer is almost identical to the published site. Because of this, it’s important to go through your website after publishing it and make sure everything looks good and works properly.
Final Points
Going from Figma to Webflow can seem like a daunting task, but approaching it in a step-by-step manner helps you stay organized and ensures the design is re-created correctly.
If the technical aspect of going from Figma to Webflow is something you don’t want to deal with, we can help. At Choquer Creative, we create SEO-optimized and responsive websites for a variety of industries.
To book a free consultation about your website, contact us!
Don't forget to read our other blog for an answer to Webflow vs WordPress and which is the better platform for your company.
