Methods to Create a Figma Design System

Let’s get inventive utilizing Figma. On this tutorial we’ll deal with the model parts wanted to start out constructing a useful design system. 

Methods to Create a Design System in Figma

Let’s get began! On this easy-to-follow tutorial we’ll discover ways to create the essential construction and elegance parts for a design system in Figma. 

1. Outline The Construction of Your Design System

A design system might be as easy or as advanced as your model wants it to be. It could actually embody a set of fashion parts, documentation, tone of voice, and greatest practices.

The essential construction of a design system contains (however just isn’t restricted to) model parts equivalent to:

• Colours
• Grid and spacing
• Typography
• Shapes and patterns
• Buttons
• Playing cards
• Icons
• Tags
• Types
• Charts and progress bars

It could actually additionally function technical and communication parts equivalent to:

• Assist documentation
• Model philosophy
• Tone of voice
• Vocabulary
• Greatest practices
• Visible pointers

For this tutorial we’ll be protecting the three model parts highlighted in daring on the record above. Don’t fear should you don’t sort out all parts at first, you may replace and embody them as your model evolves. 

2. Outline Colours

Colour may be the primary visible language of your model. Given its enormous relevance, defining your colours is an effective place to start out.  

Step 1: Break up Your Colours into Classes

Create a brand new file in Figma. Add a Body into the workspace, mine began at 1920 x 1080 px. The size will increase as I add new parts to my design system. 

Following the rules shared by Adi Purdila in his Introduction to Design Methods, we’ll cut up colours into three important classes:

• Structure: borders, headers, footers, and so forth.
• UI: textual content, buttons and varieties
• Semantic: success, error, info

Embrace these three classes in your Body and add your main shade. On this case BLUE can be my important Structure shade.  

I’ll repeat the form ten occasions and cut back opacity by 10% so I’ve a variety of distinction. This can give a visible information of what every tint of a particular shade appears to be like like. 

Step 2: Title Your Colours

Ensure you add particular names to every shade in order that they’re straightforward to establish. On this case, every tint of my Structure shade can be named “BLUE” + the share of opacity it reveals. 

Step 3: Pattern Your Colours

Sampling makes it straightforward to assign every tint a shade all through your design system and even in your precise internet design. 

Choose your shade, click on on the plus signal on the suitable aspect menu. 

Repeat the identical with all of your colours and also you’ll have your individual challenge shade library. 

Step 4: Duplicate Structure Part for UI and Semantic Colours

Let’s outline UI and Semantic colours. To do that we are able to use what we did for our Structure colours as a base. Simply duplicate the part and exchange the HEX values to signify UI and Semantic colours for visible parts equivalent to: 

• Textual content
• Hyperlinks
• Buttons
• States (energetic/inactive) 
• Success
• Warning 
• Error

When you’ve carried out that, your Body ought to look one thing like this: 

3. Outline Grid and Spacing

For this step I’ll be utilizing the grid and spacing that comes with the UI Design System. This 8-point grid relies on multiples of 8. 

4. Outline Typography

Look the proper pairing of fonts that can land your model’s message. Hold your model cohesive and clear by working with not more than three fonts: one for headlines, one for physique of textual content and one other one for buttons. 

Step 1: Select Your Fonts

I’ll be working with two choices from Google Fonts: Poppins for Headlines and Inter for physique of textual content and buttons. 

Step 2: Outline Font Dimension and Scale

You must contemplate the next: 

• Heading 1: important titles
• Heading 2: subtitles 
• Heading 3: highlights
• Heading 4: buttons
• Common hyperlink
• Paragraph or physique textual content
• Captions

5. Begin Planning Future Updates to Your Design System

This can be a excellent spot to start out. However you may wish to come again periodically so as to add new kinds and technical parts.

Take into account engaged on particular icons, playing cards and buttons on your model as a subsequent step. Additionally take into consideration animations and button behaviors.

Search for Figma design system examples to use new kinds to your individual. Hold bettering your design system so all of your design updates look cohesive and constant!

Get Extra Figma Sources and Inspiration 

Among the best a part of working with Figma is how straightforward it’s to make use of and perceive. Uncover new expertise and methods to create higher UI/UX design with Figma. Take a look at a number of the tutorials and sources featured within the record bellow: 

You’re Already a Higher Net Designer! 

I hope you loved this fast Figma tutorial and use these new methods in your subsequent design challenge. The extra Figma design system examples you take a look at, the higher your individual design methods can be.

Discover all of the inspiration and inventive sources you want on Envato Components.