Design Systems in Figma

In this mini-course, we’ll explore the fundamentals of creating design systems in Figma. We’ll start by understanding what design systems are, the logic behind them, and the benefits of using them for the apps that we plan to build. We’ll also learn how to utilize Components in Figma, since it’s one of the most, if not the most, critical features that enables us to create a Design System inside the app. By the end of this course, you’ll have a working knowledge of how to create component and pattern libraries that will eventually help you build a fully functional design system for your projects or company. A working knowledge of the Figma workspace is recommended in this course. If you want to recap your familiarity with Figma, feel free to visit our Complete Step-by-Step Figma Tutorial on YouTube.

Learning Outcomes

  • Color System

    You’ll know how to build a reusable color system from scratch, techniques on how to do it, and eventually take ownership of it for your projects.

  • Typography System

    You’ll learn how to create your own scalable typography system from scratch, understand the benefits of having one, and take ownership of it for your projects.

  • Icon System

    Gone will be the days when you’ll be scouring the internet for some free icons. By the end of this mini-course, you’ll have built your own icon system that you can reuse for your projects.

  • Button System

    Say hello to consistent, well-structured buttons across your User Interfaces. You’ll learn how to build various types of buttons from scratch, and save it for your projects.

  • Master Components and Libraries in Figma

    Level up your understanding of Figma with this course. You’ll know the right techniques of creating and using components, publishing styles, and leveraging libraries for an efficient design workflow.

  • A Working Knowledge of Design Systems

    By the end of this course, you’ll feel 10x more confident with your Figma skills now that you understand the fundamentals of Design System creation within the app.

Course curriculum

  • 1

    Introduction

    • Welcome

    • Resources

    • Where to Get Help?
  • 2

    Lessons

    • 01. The Atomic Design Framework

    • 02. Components in Figma

    • 03. Atoms: Building a Color Style Guide

    • 04. Atoms: Building a Dark Mode Palette

    • 05. Atoms: Building a Text Style Guide

    • 06. Atoms: Building an Icon System

    • 07. Molecules: Designing a Button System

    • 08. Organisms: Designing Various Headers

    • 09. Organisms: Designing Different Tab Bars

    • 10. Template & Pages: Designing a Screen with our Design System