ALL COURSES 75% OFF Black Friday Deals

Create a Design System from scratch in Figma

  • Language: English
  • Certificate: of completion
  • Subtitles: English, Spanish, French, Italian, Portuguese (Machine translation)
  • Duration: 5 Hours
Now
25$
/$100

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.

Category Course format Language Duration Level
UI Design, Design Systems Online English with Subt. 5 Hours Beginner & Intermediate

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!

Discover more about
this course

Modules

What you will learn
in this course.

  • Lessons
  • Lesson 1
    Welcome
    • What is a Design System?
    • Why a Design System?
  • Lesson 2
    Starting your Design System
    • How to start a design System
    • Foundations
    • Layouts Grids Theory
    • Bootstrap
    • 8px Grid
    • Spacing
    • Typography
    • Colors
    • Elevation
    • Icons
    • Motion
  • Lesson 3
    Components
    • Buttons
    • Input Text
    • Textarea
    • Radio Button & Checkboxes
    • Dropdowns
    • Toggle Button (Switches)
    • Tag
    • Breadcrumbs
    • Tables
    • Pagination
    • Header (Navigation)
    • Notifications
    • Modal
    • Spinner (Loaders)
    • UI Components
  • Lesson 4
    Templates & Documentation
    • Templates
    • Documentation
  • Lesson 5
    Using your Design System
    • Theming
    • Using your design system
  • Lesson 6
    Conclusion
    • Congratulations

Meet the teacher

Bruno Saez

UX Designer & Design System manager

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.

Now
25$
/$100

Course Content

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.

Features

  • English
  • English, Spanish, French, Italian, Portuguese (Machine translation)
  • Beginner & Intermediate
  • Access on mobile and Desktop
  • Full time access
  • Certificate of completion

If you have any questions about this course, please contact us

Start the course and upskill your professional toolkit.
Start the course and grow up to the moon
Start the course and grow up to the moon

Related courses

Find more courses
like this one.

Currently we have more courses for you View All Courses