Get a 50% discount when you buy 2 courses or more!
NEW Special offer Create a Design System from scratch in Figma By Bruno Saez
This offer ends:
$100 $65
Create a Design System from scratch in Figma
English English, Spanish, French (+2) [Auto]
5 Hours Course

Create a Design System from scratch in Figma

Special offer $100 $65

Design Systems are becoming so popular because they make products more consistent, improve their usability, and reduce the design decision making. That’s great! But do you know how to build one? In this course you will learn what a Design System is and why matters, but most importantly, you will learn to create one from scratch in Figma.

In this course you will see how to set up all the needed design tokens, for instance how to define proper grids, layouts and spacing, manage icons and illustrations, choose and create color and typographic scales, and finally how to create the most-used components like buttons, inputs, text areas, checkboxes, radio buttons… We will see, as well, how to name components correctly using naming conventions to get you started. Finally, we will see how to use the Design System and how to apply it to your projects or even your company.

At the end of this course you will be able to create your own full Design System and apply it anywhere with confidence.

Although for this course we will be working with Figma, the process I am going to explain here it's replicable in other software like Sketch or Adobe XD so if you don’t use Figma, don’t worry, you are more than welcome too and you can learn a new tool on the way. We will be using the full potential of Figma making our Design System with variants and autolayout.

I am Bruno Sáez, UX Designer and Design System manager currently working for a Big Data and Artificial Intelligence company.

So if you really want to learn how to create a Design System from scratch, this is the course for you.

So what are you waiting for? Enroll now!

The subtitles are automatically generated, so the quality of the captions may vary.
  • Design System
  • Figma
  •    
  • Sketch
  • Adobe XD
  • UI Components
  • Motion
  • Design tokens
  • Typography
  • Navigation
Course Table of contents
What will you learn?

6 sections • 33 lectures • 5 hours

  • Welcome
    2 lectures 11:35 Mins
    • What is a Design System?
      08:39 Mins
    • Why a Design System?
      02:56 Mins
  • Starting your Design System
    11 lectures 1 Hour 33 Mins
    • How to start a design System
      02:42 Mins
    • Foundations
      02:39 Mins
    • Layouts Grids Theory
      05:53 Mins
    • Bootstrap
      21:47 Mins
    • 8px Grid
      09:56 Mins
    • Spacing
      05:05 Mins
    • Typography
      14:25 Mins
    • Colors
      20:57 Mins
    • Elevation
      07:24 Mins
    • Icons
      7 Mins
    • Motion
      05:27 Mins
  • Components
    15 lectures 2 Hours 36 Mins
    • Buttons
      24:33 Mins
    • Input Text
      17:19 Mins
    • Textarea
      05:49 Mins
    • Radio Button & Checkboxes
      24:09 Mins
    • Dropdowns
      13:42 Mins
    • Toggle Button (Switches)
      05:11 Mins
    • Tag
      11:18 Mins
    • Breadcrumbs
      05:03 Mins
    • Tables
      26:58 Mins
    • Pagination
      07:09 Mins
    • Header (Navigation)
      11:52 Mins
    • Notifications
      07:53 Mins
    • Modal
      09:15 Mins
    • Spinner (Loaders)
      06:13 Mins
    • UI Components
      04:51 Mins
  • Templates & Documentation
    2 lectures 13:21 Mins
    • Templates
      06:43 Mins
    • Documentation
      06:38 Mins
  • Using your Design System
    2 lectures 11:38 Mins
    • Theming
      06:15 Mins
    • Using your design system
      05:23 Mins
  • Conclusion
    1 lectures 01:05 Mins
    • Congratulations
      01:05 Mins
Course details

Create a Design System from scratch in Figma

Create a Design System from scratch in Figma

By Bruno Saez

  • Design System
  • Figma
  •    
  • Sketch
  • Adobe XD
  • UI Components
  • Motion
  • Design tokens
  • Typography
  • Navigation
$65 35% off $100

This offer ends:

  • English
  • English, Spanish, French, Italian, Portuguese [Auto]
  • Beginner & Intermediate
  • Access on mobile and Desktop
  • Full time access
  • Certificate of completion
About the Speaker
Learn from the best
  • Bruno Saez

    Bruno Saez

    UX Designer & Design System manager

    @yissas

    Bruno is a UX Designer and Design System manager in a Big Data company. He loves typography and Design Systems. In his spare time he likes to go to the mountains and share his design passion to new UX Designers at Interaction Design Foundation, UNIR and Rookieup.

    brunosaez.com

Similar Courses