How to Effectively Market your SaaS

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.

Web design and SEO are two sides of the same coin. 

In fact, they're often used together by businesses to create a powerful marketing strategy. This is because, from Google's perspective, a website is essentially a huge jigsaw puzzle. Each piece has its own role to play in helping your content rank well on the search engine results page (SERP). 

In this guide, we'll be covering the full spectrum of SEO optimization for web design, from the code on a website all the way up to the architecture of the site itself.

Site Speed 

47% of consumers expect a web page to load in less than 2 seconds.

This means if your site takes longer than 2 seconds to load, you’re losing almost half of your potential customers. 

‍

‍

Luckily, with some simple web design and SEO strategies, you can increase the speed of your website. 

Minify Your Code

Chances are, your code includes spaces, notes and comments. While this helps other humans read and understand your code better, a server doesn’t need all the extra information.

Below is an example of minimized CSS.

‍

Minimized code can dramatically increase your site speed. To try it out, use this minifier for HTML, CSS, and Javascript.

Use The Trailing Slash In Your URL

A trailing slash lets the server know that it is at the last stop and there are no more files to search. This is usually indicated as a forward slash at the end of the URL.

For example: www.choquercreative.com/blogs/

Image Dimensions

Adjusting image dimensions before uploading them to the site will help your web page load faster. 

For example, if you use a 200 x 200 px picture for a 50 x 50 px thumbnail, the server will need to download the original image first and then scale it down to the thumbnail size. This takes unnecessary time that’s easily preventable.

‍

How Do I Make My HTML SEO-Friendly? 

When it comes to web design and SEO, HTML is the building block of your website. It’s how search engines are able to read the content of your web page and categorize it properly on the search engine results page. This ensures that when potential customers search for certain keywords, they come across your website.

If you have a product or service that you want people to find online, you need to give it the best chance to be properly crawled and indexed by Google. The following are a few strategies you can use to optimize HTML.

Title Tags 

‍

‍

The title tag labels your content and appears on the SERP for your web page. 

The title tag is not the title of the article (the H1). In fact, it can be completely different from the title of your article (they should be similar because you don’t want to confuse your readers). 

To optimize title tags for web design and SEO:

• Include SEO keywords in the first 3 words or last 3 words of the title 
• The title should be 50-60 characters long
• Write an intriguing title that encourages people to click the link so they can read more

Meta Descriptions 

‍

Meta descriptions don’t directly affect SEO rankings.

However, they directly influence people to click on your web page.

The meta description appears under the title tag on the SERP. It’s the short description that people read when deciding if they want to click on your web page or not. 

In other words, the meta-description is like an “advertisement” for your page.

Headings (H1 → H6) 

Heading tags are essential for both web design and SEO. 

Not only do they add structure to your page and increase readability (more on this later), but they also help search engine crawlers understand the meaning of your content and how to rank it higher in search queries.

In terms of web design and SEO, ensure your headings:

• Are 70 characters or less
• Incorporate keywords you are trying to target

Anchor tags

Anchor tags are the bits of code that link from one page to another on your site, and they're a great place to use those keywords you're trying to rank for.

For example, if you have an article about how to make a sandwich, you could add keywords like "sandwich recipe" and "quick lunch ideas" as anchor tags for links that lead somewhere else on your site. This ensures that when Google crawls your webpage, it sees these anchor tags and knows what the other pages are about. 

In contrast, if you simply have an anchor tag titled “contact us,” this gives no additional information to Google. Instead, opt for something more descriptive such as: contact us for web design and development. 

When it comes to web design and SEO, the more keyword-rich anchor tags you have on your site, the higher your site will rank in search results!

Image Alt Text

When it comes to images, they add value to your web design but you should also use them to add value to SEO.

If you write HTML code, chances are you’ve come across the “alt” feature in an image tag. This feature displays a text description to a user when the image fails to load.

The alt text can also be used to increase SEO.

When Google crawls your web page, it isn’t able to process what an image is about. However, if you add an “alt” text to the image HTML code, Google is able to read it and understand the context of the image. 

‍

Page Architecture

Regarding web design and SEO, page architecture is an important factor in how well your website performs. Not only does it increase accuracy when your web page is crawled, but it also increases user readability which directly increases your SEO ranking. 

Let’s dive into what makes an effective web page.

Page Layout and Visual Hierarchy

When a user comes across your web page, you have the power to influence what they see and what stands out to them. 

So, how do you create an effective web page?

Readers usually scan a web page in a “Z” pattern. The key here is to place the most important elements on your page at these locations. The example below shows this technique implemented effectively.

‍

‍

In addition to the Z pattern, ensure your page has good readability. Since Google prioritizes websites that are functional and have a good user experience, this directly increases your SEO ranking.

First, make sure your space isn’t too cluttered by adding white space between elements. There is nothing worse than having a text-heavy, cluttered web page where readers can’t find what they need.

Lastly, use headings to create a structure for the page. Think of headings like chapters in a book. They help readers see what your web page is about and find content easily. 

Responsive Web Design

Responsive web design is a powerful tool for your web design and SEO strategy. 

Google's search algorithm favours websites that are optimized for mobile phones. So, if your site isn't responsive, there's an increased chance that Google will send a lot of people to your competitors instead of yours.

But we’re getting ahead of ourselves. To start with, what is responsive web design?

Responsive design allows you to optimize your content so that it can be easily read and understood by users on mobile devices, tablets, and desktops. This way, you're meeting your users wherever they are and making sure they can get the information they need without having to navigate through a cluttered and hard-to-use website.

We’re Here To Help

The best way to ensure that your web design and SEO work together is by partnering with an agency that understands both sides of the equation. 

At Choquer Creative, we have a talented team of web developers, designers, copywriters, and SEO strategists. Our team works together to create beautiful websites that are seamlessly optimized for SEO. If you have any questions about web design and SEO, or if you want to get started optimizing your site, contact us today!

‍