In comparison to Sketch, this is a better point. I can use Figma to create a Design System for a design project. It is so organized and visual.
What is Design System?
A Design System is a place where you define all the elements that you use in your design such as colors, buttons, types… You set a rule for all these elements so you can use them consistently throughout the design.
Here a high level look at a Design System.
Why do we need a Design System for a design project?
I’ve worked on some projects that don’t have a Design System, it’s so hard for me to follow and saw just one element but it’s different on 2 pages. So we need a Design System for a design project particularly a UX/UI project because of some reasons:
- First, it will guide you, it is a style guide you use during the process, your design will be consistent.
- Second, if it is a large project with many designers, a Design System will make sure that every designer will work with the general definitions.
- And finally, it helps us control everything faster and follow the design easier when we get back after a long time.
Steps to create a Design System
Create a Figma file with 12 frames named: Screen Templates, Colors, Typography, Buttons, Other Buttons, Icons, Form, Controls, System Information, UI Elements, Bars and Spacing.
Here I will make template for 3 screen: Desktop, Tablet and Mobile. I define screen width, columns, margin, gutter for each screen.
Colors you will have Primary Color, Accent Color, these 2 colors were taken from the brand colors. Then colors for text, and last but not least, defining state colors: color for error state, success state, warning state, info state and color for link. After you have all colors, don’t forget to make it a Color Style.
You need to know what typeface you are going to use in design, and then define styles for Heading text, body text as well as caption or quote.
We will have Button Shapes, Button Sizes, and we should have our Primary, Secondary buttons.
Here you can add some other buttons like Radio Buttons, Checkboxes … or other types of buttons you may use in your design.
This part is important, you can have Vertical style form or Horizontal style form, and also you need to definite form states like error, success.
Tabs, Paginations, Dropdown Menus, Sliders
Progress, Tooltips, Toast, Modals
This frame is going to be bigger over time, any UI elements you come across, you can add it here.
Bars like header, footer, navigation … are elements you definitely want to create component for them so that you can utilize them repeatedly.