Awwwards - Create a Design System from scratch in Figma

Author Alex
2022-05-24
1 367
4
Awwwards - Create a Design System from scratch in Figma

Awwwards - Create a Design System from scratch in Figma.

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.

Course Link: http://www.awwwards.com/academy/course/create-a-design-system-from-scratch-in-figma

Download links:
Comments
  1. Silver2022 September 22 23:27
    links are down
    1. Sonya2022 September 23 12:35
      Fixed - try now
      1. Silver2022 September 23 14:48
        Thanks! It's the same for the Awwwards - Prototyping. Only the first link is working right now
        1. Sonya2022 September 23 17:40
          Done, fixed too
Add comment
Add comment:
Your name:
Your E-Mail:
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
I am not robot: *
Archive
«    December 2024    »
MonTueWedThuFriSatSun
 1
2345678
9101112131415
16171819202122
23242526272829
3031 
October 2023 (1)
May 2023 (1)
February 2023 (518)
January 2023 (532)
December 2022 (515)
November 2022 (504)
Vote
Upgrade to Premium