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:

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.

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 tutorials is part of a series of videos–here they are, all in one place!
- FigmaCreating a Figma Design System: Typography, Spacing, and SizingAdi Purdila
- Design SystemsCreating a Figma Design System: Colors and FormsAdi Purdila
- Design SystemsCreating a Figma Design System: Buttons, Links, Icons, and ImagesAdi Purdila
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:
And if you’re interested in getting started with Figma design systems, try these on for size!
- FigmaWhat Is Figma?Kezz Bracey
- FigmaEssential Figma Shortcuts for Working EfficientlyAdi Purdila
- Figma20 Figma UI Kits for DesignersEric Karkovack
- Adobe XDFigma vs. Adobe XD in 2020Kezz Bracey

See you in the next tutorial!
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.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post