Why You Should Avoid Free Website Builders

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.

There’s an old saying that goes: if it ‘ain't broke, don’t fix it. But what if we told you that old phrase does not always apply to websites?

We argue this point because there are so many elements to a website, like SEO and image optimization, that it’s difficult to tell if it’s broken on the surface. 

In another blog, we discuss why you should avoid free website builders. Here we’ll solely focus on why the Wix website builder should be avoided for some enterprises. 

Wix Website Maker SEO Limitations

One of Wix’s main shortcomings is its poor SEO foundation. You may or may not be aware of SEO, or search engine optimization. SEO is the level at which your website is found by search engines like Google. 

If the internet were a library, search engines would be the librarians. Google crawls, indexes and ranks your website on the search engine results page (or SERP).  

It gets more complicated than that, but Wix, unfortunately, doesn’t allow Google to read your site easily. Websites are built with code and the Wix website builder uses unneeded web code.

It’d be like a librarian checking a book with numerous small words on its back and cover. How would they know what the story is about, what it’s called or who it’s written by?

The same concept applies to websites. Google doesn’t always care about how good your design looks, but more about how the website is constructed. If your website’s code looks messy to Google, it won’t be sorted properly. This correlates to not ranking in search results and fewer people finding your website. 

Your Brand Seems Frugal & Unprofessional

Wix is affordable but using it can result in a low-grade website.  The Wix website builder is marketed to people who need a free or extremely cheap website. While creating your website on Wix, you limit yourself to a collection of website templates which lack customization. You’ll also be provided with a generic URL with yourbussiessname.wix.com. You can connect your website to remove the Wix name from your domain, but you’ll have to pay for it. 

Migrating Your Wix Site is Problematic

Business owners like the idea of starting for free and then moving over their content later. This is possible however, it isn’t easy with the Wix website builder. The method that Wix allows you to build your website makes it impossible to simply export the website and migrate it to a better platform. Unfortunately, if this is the case for you, you’ll likely have to start again from scratch with your website. 

Pro Tip: If you start with a website development agency, you can avoid this trap altogether. 

Hidden Costs With The Wix Website Maker 

Wix attracts customers by marketing a free website maker option. And it’s true; it’s a decent website option for beginners or a mockup site because of the free offering. But as expected, there are quite a few limitations to the free Wix website builder. The largest costs incurred tend to be hidden charges. 

Paid Packages Offer Only So Much

Some of the package offerings have hidden costs as your site traffic grows. The first paid package does display Wix ads and comes with only 500MB storage and 1GB bandwidth. To put those numbers into perspective, if you get 500 visitors a day and they open 1-2 pages, you’ll need about 30GB of bandwidth.

So when your customer numbers scale, you’ll have to pay additional amounts for larger packages. Additional monthly website charges will increase for eCommerce, booking and shopping features. 

Sluggish Web Speed

Another caveat is the Wix website builder makes sites sluggish. Web pages that take only 1 second longer to load can see conversion rates plummet by 70%. Slow speeds hurt the performance of your website and your search engine rankings. Google penalizes slow-responding websites, giving them poor SEO results.

It’s known that Wix websites have some of the lowest FCP (First Contentful Paint) compared to other platforms such as Webflow. In summary, slow loading pages using a Wix website builder will simultaneously harm your user experience and your Google rankings. 

Missing out on potential sales is the number one hidden cost of the free Wix website builder. Ask yourself, how many more sales do you think you’d make if you appeared in the top 10 of a search result in Google?  

Invest in Your Website From the Beginning

Understanding the drawbacks of the Wix website maker will allow you to make an informed decision when creating your website. If your organization does intend to grow and thrive, then investing in your website will help you and your current and potential customers. 

Webflow is an exceptional platform used by us at Choquer Creative. We prefer this tool because it makes clients' websites unique with plenty of customization options, mobile device friendliness, and rapid loading times compared to other popular platforms. 

If your business is interested in creating or migrating to the Webflow website builder, be sure to visit our packages section for more information.