Creating a Figma Design System: Typography, Spacing, and Sizing

Creating a Figma Design System: Typography, Spacing, and Sizing

In this, the first in a series of tutorials, you’ll learn how to create a design system in Figma. Recently I designed this gardening WordPress theme:

design system in figma
A sample of the design system in Figma

This WordPress theme will eventually be coded, and you’ll be able to download it for free as well. 

As this design will eventually end up in the hands of a developer I wanted to create a design system for it; something which will help both of us. It will help me design new pages in the future, making sure everything is consistent, and it will also help the developer by creating an efficient coding process. The system contains all the colors, the typographic information, sizing and spacing, and more.

typography in figma design system

In this tutorial I’m going to show you how to develop two sections of the design system, giving you an idea of how to implement your own: typography, and sizing and spacing. Let’s dig in!

Creating a Figma Design System

This Figma design system will be expanded upon in two more video tutorials to be published soon. Stay tuned!

The Power of Design Systems

We’ve compiled a collection of learning resources in this Tuts+ series Unlock the Power of Design Systems, including the beginner’s course: 

  • FREE

    Introduction to Design Systems

    Design Systems

And if you’re interested in getting started with Figma design systems, try these on for size! 

  • Figma
    What Is Figma?
    Kezz Bracey
  • Figma
    Essential Figma Shortcuts for Working Efficiently
    Adi Purdila
  • Figma
    20 Figma UI Kits for Designers
    Eric Karkovack
  • Adobe XD
    Figma vs. Adobe XD in 2020
    Kezz Bracey

Introduction To Figma  FREE COURSE
 Introduction To Figma | FREE COURSE

See you in the next tutorial!

Go to Source
Author: Adi Purdila