1. Web Design
  2. Figma

How to Create a Figma Design System

Scroll to top
Read Time: 7 min

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

Design SystemDesign SystemDesign System
A design system is a guide to all visual elements related to a brand.

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:

design systems from existing companiesdesign systems from existing companiesdesign systems from existing companies

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.Use professional UI Kit templates to start creating your design system.Use professional UI Kit templates to start creating your design system.
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. 

      UI Design SystemUI Design SystemUI Design System
      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.  Add your first 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.  
      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. 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. 

      Select your color, click on the plus sign on the right side menu. Select your color, click on the plus sign on the right side menu. Select your color, click on the plus sign on the right side menu. 
      Name your color style and add it to your library.

      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.Duplicate Layout section for UI and Semantic colors.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.In the example below there is a 16px margin.In the example below there is a 16px margin.
      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 free fonts from Google 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
      Define font size and scale.Define font size and scale.Define font size and scale.

      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. This could be the first step of your design system. This could be the first step of your design system.
      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

      Advertisement
      Did you find this post useful?
      Want a weekly email summary?
      Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
      Looking for something to help kick start your next project?
      Envato Market has a range of items for sale to help get you started.