How to Create a Figma Design System

Let’s get creative using Figma. In this tutorial we’ll focus on the style elements needed to start building a functional design system.

What is a Design System?

We’ll start with the basics. A design system is a collection of elements needed to ensure consistency and cohesion in all design products developed for a brand.

A design system is a guide to all visual elements related to a brand. They must be constantly updated as the brand evolves.

Think of a website as some kind of puzzle, made of independent pieces that put together give identity and tie up functionality.

Not sure what a design system looks like? Check out this collection of Figma design system examples from all over the globe:

For this tutorial we’re going to focus on the style elements needed to start building a Figma design system.

Figma UI Kits for Design Systems on Envato Elements

A Figma design system is not the same as a UI Kit. But UI kits are a good place to start when creating a design system from scratch. There’s no need to reinvent the wheel when it comes to design. You can customize existing graphic elements to match your project’s needs.

Luckily, there are loads of graphic assets that help us save time such as pre-made Figma design system templates and UI Kits:

Use professional UI Kit templates to start creating your design system.

Envato Elements offers exactly that. With a monthly subscription you’ll get unlimited downloads from millions of digital assets.

A professionally designed UI kit will help you define the main graphic elements of your web design. Use it as a style guide and customize the elements to match your brand’s design needs.

Free Courses: Figma Tricks and Tips

Are you just getting stared with Figma? Get all the guidance you need from free tutorials and courses on the Envato Tuts+ Youtube Channel. Before we get started with our own tutorial, get an Introduction to Design Systems and a beginner’s introduction to Figma with these videos by Adi Purdila:

FREE

40 Minutes

Introduction to Design Systems

What is a design system? And how do you use visual design systems to make your web design work more effective and efficient? Find out in this free course.

FREE

1.8 Hours

Introduction to Figma

Learn how to use Figma, a powerful tool for user interface design with instructor Adi Purdila. If you’re into UX, UI design, or app design, this Figma tutorial is ideal for you.

How to Create a Design System in Figma

Let’s get started! In this easy-to-follow tutorial we’ll learn how to create the basic structure and style elements for a design system in Figma.

This UI Design System is an example of how a design system in Figma can look like.

1. Define The Structure of Your Design System

A design system can be as simple or as complex as your brand needs it to be. It can include a set of style elements, documentation, tone of voice, and best practices.

The basic structure of a design system includes (but is not limited to) style elements such as:

Colors
Grid and spacing
Typography
Shapes and patterns
Buttons
Cards
Icons
Tags
Forms
Charts and progress bars

It can also feature technical and communication elements such as:

Help documentation
Brand philosophy
Tone of voice
Vocabulary
Best practices
Visual guidelines

Remember, a design system is like a live library that is developed over time.

For this tutorial we’ll be covering the three style elements highlighted in bold on the list above. Don’t worry if you don’t tackle all elements at first, you can update and include them as your brand evolves.

2. Define Colors

Color might be the main visual language of your brand. Given its huge relevance, defining your colors is a good place to start.

Step 1: Split Your Colors into Categories

Create a new file in Figma. Add a Frame into the workspace, mine started at 1920 x 1080 px. The length will expand as I add new elements to my design system.

Following the guidelines shared by Adi Purdila in his Introduction to Design Systems, we’ll split colors into three main categories:

Layout: borders, headers, footers, etc.
UI: text, buttons and forms
Semantic: success, error, information

Include these three categories in your Frame and add your primary color. In this case BLUE will be my main Layout color.

Add your first color. In this case BLUE will be my main layout color.

I’ll repeat the shape ten times and reduce opacity by 10% so I have a range of contrast. This will give a visual guide of what each tint of a specific color looks like.

Step 2: Name Your Colors

Make sure you add specific names to each color so they’re easy to identify. In this case, each tint of my Layout color will be named “BLUE” + the percentage of opacity it shows.

Each tint of my Layout color will be named "BLUE" + the percentage of opacity it shows. — Add specific names to each color you use.

Step 3: Sample Your Colors

Sampling makes it easy to assign each tint a color throughout your design system and even in your actual web design.

Select your color, click on the plus sign on the right side menu.

Repeat the same with all your colors and you’ll have your own project color library.

Step 4: Duplicate Layout Section for UI and Semantic Colors

Let’s define UI and Semantic colors. To do this we can use what we did for our Layout colors as a base. Just duplicate the section and replace the HEX values to represent UI and Semantic colors for visual elements such as:

Text
Links
Buttons
States (active/inactive)
Success
Warning
Error

Once you’ve done that, your Frame should look something like this:

Duplicate Layout section for UI and Semantic colors. — This is how your brand’s visual guide for color could look like.

3. Define Grid and Spacing

For this step I’ll be using the grid and spacing that comes with the UI Design System. This 8-point grid is based on multiples of 8.

In the example below there is a 16px margin.

4. Define Typography

Look the perfect pairing of fonts that will land your brand’s message. Keep your brand cohesive and clean by working with no more than three fonts: one for headlines, one for body of text and another one for buttons.

Step 1: Choose Your Fonts

I’ll be working with two free fonts from Google Fonts.

I’ll be working with two options from Google Fonts: Poppins for Headlines and Inter for body of text and buttons.

Step 2: Define Font Size and Scale

You should consider the following:

Heading 1: main titles
Heading 2: subtitles
Heading 3: highlights
Heading 4: buttons
Regular link
Paragraph or body text
Captions

5. Start Planning Future Updates to Your Design System

We now have the very basic structure and style elements of your design system.

This is a great place to start. But you might want to come back periodically to add new styles and technical elements.

This could be the first step of your design system.

Consider working on specific icons, cards and buttons for your brand as a next step. Also think about animations and button behaviors.

Look for Figma design system examples to apply new styles to your own. Keep making improvements to your design system so all your design updates look cohesive and consistent!

Get More Figma Resources and Inspiration

One of the best part of working with Figma is how easy it is to use and understand. Discover new skills and tricks to create better UI/UX design with Figma. Check out some of the tutorials and resources featured in the list bellow:

You’re Already a Better Web Designer!

I hope you enjoyed this quick Figma tutorial and use these new tricks on your next design project. The more Figma design system examples you look at, the better your own design systems will be.

Find all the inspiration and creative resources you need on Envato Elements.