In this, the second in our series of Figma design system tutorials, we’ll be working on this magazine news blog 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 Figma 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 design 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 a few aspects of the design system, giving you an idea of how to implement your own: colors and forms. 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!
- Creating a Figma Design System: Typography, Spacing, and SizingAdi Purdila28 Sep 2020
- Creating a Figma Design System: Colors and FormsAdi Purdila17 Dec 2020
- Creating a Figma Design System: Buttons, Links, Icons, and ImagesAdi Purdila22 Dec 2020
The Power of Design Systems
Take a look at this 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!
- What is Figma?Kezz Bracey16 Sep 2022
- Essential Figma Shortcuts for Working EfficientlyAdi Purdila31 Jul 2020
- 28 Figma UI Kits for DesignersEric Karkovack27 Mar 2023
- Figma vs. Adobe XD in 2020Kezz Bracey06 Jan 2020
See you in the next tutorial!