Videos

Practice along with the videos using the Starter Figma File. For the final design system, check out the Completed Figma File.

Getting started with the Super Ultimate Guide to Design Systems

01

Super Pro Tips and Tricks in Figma

02

Difference between Atoms and Patterns

03

Creating Icons and the Icon Atom

04

Analysing Icon Buttons

05

Creating Icon Buttons

06

Creating the Nav Bar

07

Ultimate Guide to Figma Variables and Design Tokens

08

Creating a Neutral Color Palette

09

Creating Color Tokens using Figma Variables

10

Set up Dark Mode Color Tokens

11

How to think like a Developer with DevMode

12

Part 1 - Create the Top Hero Card

13

Part 2 - Create the Top Hero Card

14

Create Spacing and Radius Tokens

15

The Ultimate Guide to Typography

16

Applying Variables for Typography

17

Creating the Label Atom

18

Creating the Title Card

19

Creating a Color Palette for Brand Colors

20

Creating the Avatar Component

21

Creating Titles

22

Creating List Items

23

Creating Table Items

24

Creating Buttons

25

Creating the List Button

26

Creating Info Cards

27

Creating the Button Dock

28

Creating the Map Card

29

Creating the Image Gallery

30

Creating the Text Block

31

Creating Cards

32

Creating Card Carousals

33

Creating the Profile Card

34

Polishing the Screens