Top 4 Reasons to use the Webflow Website Builder instead of Wix Website Maker

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:

1. Create a new page in your Webflow document 
2. Copy/clone Webflow’s styleguide to the new page (or create your own)
3. Click the element you want to define 
4. 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)
5. 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. 

1. Go to “Project Settings”
2. Click on the “Fonts” tab
3. Select your font from the “Google Fonts” list. Select the weights you need and click “Add Font”
4. If your font isn’t available in Google Fonts, you can upload an external font file
5. 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:

1. Select all the assets you want to export. Then go to the “File” dropdown and click “Export”
2. 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:

1. Drag and drop your files into the “Assets” folder
2. 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:

1. Click the element on the Figma file 
2. At the top of the right side panel, click on the “Inspect” tab
3. The “Code” section shows all the CSS properties for your selected element
4. 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.

Your website is your business' first impression.

So when it looks like a 1990s internet start-up, you're not just missing out on new customers—you're losing the ones you already have.

That's where Choquer Creative comes in. We are a web design team in Surrey that has been working with businesses like yours for years. We know how to create engaging, unique designs that will help your website stand out from your competitors. Read ahead to find out what our web design packages can do for your business.

Web Development

We know your business is unique, so your website needs to be too.

Our web development experts create bespoke solutions for your company. We’re not interested in cookie cutter solutions or “stock” themes—we want to get under the skin of what makes your business tick and then create a website that reflects that vision. 

As a trusted name in Surrey web design, we have developed and launched hundreds of websites for large businesses, start-ups, and individuals. From simple informational sites to complex ecommerce solutions, our Surrey web design team can help your company succeed by building custom websites that achieve your desired results.

We promise to help your business thrive- no matter what stage it’s at.

Web Design

Design is a powerful tool for your business. 

It allows you to communicate with your audience in a way that’s visually pleasing, engaging, and meaningful. Web design can help elevate your business because it has the power to shape how people perceive your products, services, and brand.

Our Surrey web design agency is not a templating service—we're strategic and creative thinkers who are experts at crafting great experiences for your audience and connecting their emotions to the brand and the product. Our web design packages can help your business create an online presence that’s unique to your company and perfectly aligned with your business goals.

Your website is the first impression of your business. In today's digital age, it’s more important than ever for companies to have an online presence and a strong web design can help elevate your business.

SEO Optimization

SEO is the best marketing tool you can use for your website. We can support this statement with statistics:‍

80% of mobile searches resulted in purchases

76% of these purchases happened on the same day as the search

63% of these purchases happened within a few hours of the search

These statistics emphasize the importance of ensuring your business is visible on a search engine results page (SERP). However, this can be difficult in a crowded (and still growing!) online marketplace. In addition, Google continuously evolves its SEO ranking system and it can be hard to keep up. 

We recognize this dilemma so we made sure to include SEO optimization in all of our web design packages. Our Surrey web design team makes sure to keep up with SEO tactics.

Using expert keyword research, SEO optimized web design, and carefully curated content, we will place your website among the top search results.

‍

Maintenance 

Your website is your digital home, and its online presence is essential to the success of your business.

Maintaining an active presence on the web requires regular maintenance that includes updating content and images, troubleshooting errors, improving navigation, analyzing traffic, and more.‍

An outdated and unmaintained website sends a message that you no longer care about the company or your customers. 

Your website is the face of your business. That’s why Choquer Creative offers ongoing maintenance plans and support. Our web design team in Surrey will make sure your website is maintained and represents the most up-to-date vision of your company 

We’re Ready to Help!

Our process begins with a discovery session with you. Our Surrey web design agency will work with you and discuss what makes your business unique and how our expertise can help make it shine on screen.

Our goal is to help you stand out from competitors, establish brand identity, and make the most of online buying opportunities — regardless of the industry or size of your company.

We’re proud to be a trusted web design agency in Surrey, so you can rest assured we will use all of our tools to help your business grow.

If you have any questions about what our web design packages can do for you, please contact us!