How to Use Figma for Website Design

Figma is a SaaS UI design software that makes collaboration on visual projects easier than ever. Being cloud-based, it enables the user to continue their work from any device with internet connection, from anywhere around the world.

In addition, project owners can provide teammates with different levels of access so that they can review the designs, make changes, and leave comments in real time. The tool is intuitive to use which makes onboarding new collaborators hassle-free and easy.

Thanks to these and many other assets, over the last few years, Figma quickly replaced Adobe XD and Sketch in the hearts of many designers.

So how to use Figma for web design?

In this article, we provide a handy workflow developed by our own UI designers here at DevriX. It has been tested over time and is efficient and easy-to-follow.

Read on and take notes!

1. Types of Websites

Before we delve deeper into the specifics of how to use Figma for website design, let’s first have a look at the most common websites and what defines them:

• Business. Corporate websites usually consist of fewer pages, or can even be developed in the form of a one-page website.If you are interested in the one-page option, you can find inspiration and resources at the Onepagelove community.
• Product. These are similar to business websites but with additional marketing and sales purposes. That’s why creativity in layout and graphics are welcome when designing such a website.Product websites can be connected to an eCommerce store with multiple products or be stand-alone.A good example of such a website is Apple’s
• News and Blogs. These types of websites are visited by a diverse group of people on a daily basis so layout and design rules must be applied diligently.In addition, web-portals, such as Wired and Yahoo, also fall into this category, and require a specific approach because they often allow users to configure the content according to their preferences.
• Web Apps and SaaS. Websites for such products usually pack a huge ecosystem of functionalities and applications. By having a well organized design system following the atomic design principles, you can significantly cut down on their development time.In addition, using reusable components and libraries, and designing a well-thought structure is essential for the speed and quality of the development process.These websites offer increased productivity and collaboration, so it’s really important that they are designed and built to work flawlessly.Good examples in this category are Facebook, Asana, Discord, Slack, and Figma itself.
• Online Stores. eCommerce websites are one of the oldest types of web content. Similarly to the previous two, these websites are populated with large amounts of information. However, they also have hundreds of thousands of product pages that are (almost) exactly the same.What is really important here is not so much the front-end and design, but the strong and clean back-end code which holds the whole system up and running.Examples of popular eCommerce platforms are Amazon, Etsy, Aliexpress, etc.

2. What Are the Steps in Designing a Website?

Regardless of whether you are using Figma or a different tool, when designing a website, your job is to take a simple brief, be it a few lines or a whole document of research, and breathe life into it visually. The process starts with an idea, which then turns into a structural plan and information architecture.

Think of it like the concrete base and columns of a building – without the structure or the “skeleton”, the whole thing will fall down.

After defining what the separate pages will be and what the overall content is going to look like, you can draw a few sketches with no detail or fidelity. Those are called wireframes.

In Figma, you can design your wireframes from scratch or build upon templates that match your design.

Whatever the case, these will help you see the whole picture prior to getting your hands dirty with creating your awesome new design.

After agreeing on the layout with your project manager and/or client, you can start getting into a more detailed version of these rough ideas by transferring them into a mid-def prototype. Should you have multiple repeating layouts, you only need to design those once, and afterwards multiply and change them as needed.

However, note that we are still not in the phase with the actual content and cool visuals. The design of a website needs to be well defined before you invest time in a pixel-perfect final variant. Furthermore, it is important not to waste the time of developers and have them work on something which is not final.

To ensure that the results match the requirements, always seek feedback and reviews from your team during each step.

3. Grid and Layout

Figma has a “snap to grid” feature, which is very useful when it comes to grid and layout.

The best and most commonly used guideline for web design is the vertical column grid system. It allows you to put the design’s elements in a consistent order and keep the layout more visually accessible to collaborators who review the content.

The best practice is to use 12 columns with a width between 50 and 100px. The gutter in between them can vary. In addition, a good rule of thumb is to keep everything divided by 8 or 10.

Always follow the grid limits and padding between elements, while leaving white space so that the content can be easily distinguishable.

4. What Are the Components of a Website?

The next step in designing a website in Figma is to focus on the individual components.

First, set up your screens. Work in a frame with 1920px width. Then you can start adding:

A Header Area or Navigation Bar

The header and navigation bar section should be simple and legible, and always the same size across all pages. It includes the logo, the navigation buttons, sometimes an address, social media icons, etc.

As people tend to read from left to right, the most common order is to add the logo first and then the rest of the elements. This may be different according to the specific type of business or the client’s desires.

You can find useful resources on the topic here and here.

A “Hero” Section

The hero section is the real estate of any well designed website! This is where you make a first impression. Usually, it can be a full width illustration or a photo with a catchy short description of the business.

Remember to keep all your important elements in the hero image above the “fold” (the imaginary line at the bottom of the screen). 800-900px should be enough. Consider different sizes for the image and test how it will be cropped or sized on smaller or bigger screens.

The current trend is towards using 3D imagery, and interactive minimal graphic elements which react on hover. However, whatever images you choose for this section, try to avoid stock photos and still illustrations.

You can have a look at this article for an in-depth analysis of variations and best practices

Text, Fonts, and Sizes

One of the most important elements of the web is the actual written content.

It is essential for all of the typography to be readable and legible. Your section titles can range from 40px to 60px for different fonts, while your body text can go down to 16px – 18px.

However, always keep in mind the standards. Google just recently launched their Fonts Knowledge which could be helpful at expanding your skillset.

Forms and Input Fields

Forms and input fields are designed to serve a purpose where the visitor is required to write something and perform a text interaction with the site.

Make sure to always align these left and use a maximum of two columns (try to stick to one).

For a better user experience, arrange your fields from “easier” to “harder” and design summary notifications and help boxes to guide the user. You may also consider adding progress bars to longer forms with multiple fields, this way the user will know how far in they are and how many more steps to expect.

You can find a more detailed study on forms here.

Buttons and Controls

A button can lead a user to a new page or open up another pop-up window. The application of buttons can be diverse, but what defines them is that they always need to be eye-catching.

The most important button to focus on is the so-called call-to-action (CTA). When it comes to landing pages, this button is what the whole page is about. It should be consistent with the rest of the content, and compel the user to click on it.

Tables

Tables are often seen as a big challenge in web design, especially in mobile layouts. They display text-heavy data and, more often than not, their purpose is to enable the user to compare the information side-by-side.

In Figma, creating tables is made easy. You may use the table creator plugin in order to design and visualize the information faster.

For a better user experience, consider using a slightly different background fill for every other line, and avoid borders as these add unnecessary clutter to your table.

You can find more useful tips here.

Cards

Cards are most commonly used in blogs and online stores.

The elements of the design usually include an image and a short title or description. These serve as entry points to more detailed information displayed on a separate new page.

To emulate the interactivity of the component, you can apply shadows. In addition, always keep the hierarchy in mind, group your elements carefully, and follow your base grid.

You can find more information on designing cards here and here.

Modals or Pop-Up Dialogs

Modals and pop-up dialogs are windows that float above the main website’s window. These vary from cookie disclaimers, error messages, special promotions, and so on.

When considering the design, you should treat them as a floating card with a super-important CTA. However, make sure to provide a clearly visible button that enables the user to close the pop-up and continue to the main content. Otherwise, this makes for a very unpleasant UX.

You can read more about designing this type of website component here.

5. Tips for Effective Use of Figma

Here are a few more additional practical tips on how to use Figma for website design:

• Use Auto-Layout. Strive to use as much auto-layout as possible and keep your frames in a good working order and hierarchy. This way, your design work can be easily accessible by your teammates, developers, and any other collaborators.Also, name your frames and layers accordingly and in a recognizable fashion so each team member can understand where to go or what is to be done next.

• Compress Your Images. Keep in mind that when importing raster images, Figma does some general compression. Avoid overloading your page with high-resolution screenshots and JPGs.Sure a moodboard and a photo of a paper sketch may be useful, but also think of the people with slower PCs and weaker GPU cards.
• Use the Comments Function. Comments in Figma make it easy to collaborate with teammates in real-time. You can leave them messages to seek their opinions and discuss urgent issues, review their comments on the designs, and follow up on any questions that might come up.
• Avoid Placeholder Text. Placeholder text, also known as LOREM IPSUM, is commonly used in design, especially when using templates and stock graphics. However, leftovers of it in the finished design can lead to a really unpleasant user experience.Instead, you can use texts from Wikipedia, related to the topic/context. If you are short on time, there’s a Figma plugin that allows you to quickly fill your pages.

Bottom Line

Figma is one of the most intuitive and flexible UI design solutions out there today. It enables both stationary and remote teams to collaborate more efficiently, and contributes to an improved productivity in web development processes.

The workflow we’ve presented can serve as a robust and easy-to-follow Figma guide for beginners, and provides an overview of the steps involved in designing a web project. Following these, you can not only design different types of websites, but improve your skills in the process.