Style guides are important to help you deliver a consistent brand experience.

As a UI/UX designer, creating style guides is indispensable if you hope to create great user experiences and interfaces.

In this article, you will learn what a style guide is, the importance of a style guide, and how to create one step by step.

What is a Style Guide?

A User Interface (UI) style guide is a standard that contains all the necessary details about the UI elements and interactions that occur within a product. It helps establish brand consistency.

A typical style guide contains information about typography, colours, layouts, components, and everything else that gives the UI its feel and look.

Creating a great and concise style guide for your product makes sure that the look and feel of the brand remains consistent.

ADVERTISEMENT

Why Create a Style Guide?

Having a style guide is important for various reasons, which include:

  1. It helps all your user interface elements remain consistent
  2. It's a learning resource for newcomers and helps them onboard more quickly.
  3. It improves communication between designers and developers.
  4. And it can help boost your productivity.

What Should a Style Guide Include?

Some of the components of a typical style guide include:

Typography: this plays a huge role in every design. Each font you choose for your designs conveys a message to your user. Typography in your designs should be legible, easy to read and understand, and visually appealing.

Your style guide should include typefaces, font sizes and font weights. Limit your design to 2-3 type faces in order for your design to look neat and professional. Remember to choose typefaces that complement each other.

Colour palette: the right choice of colours for your designs can help determine the reaction of your audience, make them feel comfortable, and increase user satisfaction. You should have three categories of colours in your style guide: primary, secondary and neutral colours.

Primary colours are colours that are displayed frequently across all screens and elements in your design.

Secondary colours complement the primary colour(s). You can use them for micro interactions like arrows, progress bars, and even headings.

Iconography: this is the use of mostly symbols, figures, and images to convey more meaning to a user. Icons make communication easy and they are typically universal. You can choose a collection of icons that you'll use in your designs to keep them consistent.

Layout grids: a grid is a system that aligns a page based on rows and columns. Grids are indispensable in establishing consistency across all screens in a design. You cannot afford not to include a grid system in your style guide.

UI Elements: UI elements in a style guide typically includes buttons, input fields, checkboxes and alerts and notifications. Elements are essential, as a user cannot function effectively without them in your design. You should include these elements with their specific states – default, active, disabled and hover.

How to Create a Style Guide in Figma

Now we'll create a style guide from scratch in Figma, including the elements listed above.

Open your Figma file and select a frame.

Annotation-2022-07-21-154316

Choose a Colour Palette

Getting the right colours is very important for creating great designs. You must be able to pick colours that complement each other for your style guide.

If you don't have a specific colour palette in mind, you can try sites like colors.muz.li or coolors.co to get colour inspiration.

If you're working with a client, they may already have a colour palette in mind.

Step 1: Choose your color categories

Choose three categories of colours: a primary colour, a secondary colour, and greys (neutral).

Annotation-2022-07-21-165534
ADVERTISEMENT

Step 2: Generate Shades for the Colours

Now you'll need to generate shades for your colours. Generating shades for your colour palette helps cater to varied use cases. It makes it convenient for when you have to tweak the colour opacity or brightness.

The Figma plugin Tints and Shades helps you generate colour shades.

Annotation-2022-07-21-171152

Select a colour and click on Tints and shades to generate the shades.

Annotation-2022-07-21-171330
Annotation-2022-07-21-171638

Auto layout (Shift + A) the generated shades to give them one frame, and arrange them vertically/horizontally.

Annotation-2022-07-21-172303

Step 3: Make the colour shades into colour styles.

To make the generated colours styles, first select the frame and hit the Enter key in order to select the boxes in the frame individually.

ggjhdch

Rename the individual boxes, using the name of the colour category differentiating with numbers – for example grey 01, and so on.

Annotation-2022-07-21-173305

If you renamed your boxes successfully, the names will appear on the left hand side of your canvas.

faiiiuytgt

After you do this, you will need to make your colours into styles. You might use the Figma plugin Styler to style your colours. Click on the frame, selecting individual boxes using the Enter key.

An
bbbbb

If you do this correctly, you will get a notification as you can see in the image above.

Repeat these steps for all colour categories – grey, primary, and secondary.

116890

Choose Your Typography

Choosing the right font family, font sizes, and font weights is very important for a good style guide. If you get confused on how to generate or choose a font family, weight, and size, you can use the Material Design type scale material.io to generate type scales.

Step 1: Open a frame after choosing a font of your choice.

Annotation-2022-07-21-154316-1

Step 2: Establish the page hierarchy

Decide on how many headlines, subtitles, body and captions your design might have. Remember that you can communicate hierarchy through differences in font weight (light, medium, regular), size, letter spacing, and case.

Annotation-2022-08---2-
ADVERTISEMENT

Step 3: Make your fonts styles

After choosing your font weights, size, and letter spacing, it's time to make them styles. Just like you did for your colour palette, select the fonts and use the plugin Styler to create them as styles.

NB: Choose smaller font sizes when designing for mobile (16px, 18px, and so on) and larger font sizes for web.

Annotation-2022-08--1

As you can see in the image above, your text styles will appear on the right hand side of your screen.

Choose Your Iconography

Next up, we have iconography. Icons are an essential part of our designs, as they visually express actions and objects in our interfaces. They help the designer further communicate the meaning of an action or screen, like the home icon, search icon, and more.

You can get icons from plugins like Iconify, Font Awesome, and libraries like feathericons and Google icons.

Step 1: Select a frame.

Go to the frame tool and select a frame for your iconography.

Anno

Step 2: Get all your icons

Now you'll need to get the icons you need for your design. Make sure you include different states of each icon, like filled, outline, and so on.

NB: make sure the sizes of your icons are consistent.

Annotation-2022

Violà! You now have your iconography. To know more about iconography, check out design system icons.

Setup Your Layout Grids

Grids are a fundamental part of any style guide as they help achieve better alignment, hierarchy, and consistency in your designs.

Setting a standard for your grid depends on whether you are designing for web or mobile – each has different standards. For example, you should use a 960 grid (12 or 16 columns) when designing for web.

First, go ahead and select a frame.

ADVERTISEMENT

Step 1: Add a layout grid

Then get your layout grid from the left hand panel of your canvas.

layout

Input your desired number of columns for the frame and values for the margin and gutter (that is the vertical part of the frame).

grid3

Next up, you will need to include grids for the horizontal part of the frame, or the rows. Input your desired value for rows, margins, and gutter.

gridddd

Choose your components

The components you choose play an important part in your user interface. Components typically include text fields, button states, checkboxes, alerts and notifications.

Define Your Input fields

Input fields, as the name implies, allow users to input text in a UI. And they need to be styled like everything else.

First, as always, select a frame.

Step 1: Design input fields in various states

You'll want to design each input field according to its state, like default, disabled, active, and error.

Text-fields--2-

Step 2: Add icons to your input fields.

Text-fields--1--1
ADVERTISEMENT

Design Your Buttons

Your buttons should include primary buttons and secondary buttons in their different states, like disabled, default, hover and pressed.

Primary buttons are usually strong visual indicators to help users complete their journeys – for example 'next', 'submit', and so on. Secondary buttons are usually the alternatives to the primary actions, like 'cancel', 'back', and so on.

jjjjjjjjjjjjjjjjj

The image above shows two buttons. The button on the left is a primary button while the button on the right is a secondary button.

First, select a frame.

Step 1: Design the primary button

First you'll want to design a primary button in its various states: default, hover, pressed and disabled.

Components--2--1

Step 2: Design the secondary button

Then you'll design a secondary button in its various states: default, hover, pressed and disabled.

Components--1--1

Step 3: Check buttons with icons

You might want to check how the various buttons would look like with icons. Add icons to your primary and secondary buttons in all their states.

Components-1

Checkboxes

You'll use checkboxes mostly when users might need to select more than one option from a list – that is, each checkbox is independent of the others in the list/form.

First, select a frame.

ADVERTISEMENT

Step 2: Design your checkboxes

You'll want to include various states like enabled, disabled, hover, focused and pressed states.

Component-1--1-

Alerts and notifications

With real time alerts, users can get notifications of reminders, errors, successes and so on. This reduces the risk of hacking, incorrect input, and loss of important information.

First, select a frame.

Step 1: Design notification and alerts

When you design your alerts, make sure to use the correct icons for warning, error, success and success states.

Alerts-and-notifications--1-

Live Style Guide Examples

Here is Mozilla's style guide:

Cursor_and_Feature_Card__Right_Half___Mozilla_Protocol
Mozilla Style Guide

Here is freeCodeCamp's live style guide:

freeCodeCamp_-_Style_Guide
freeCodeCamp's Design Style Guide

Conclusion

Creating a style guide is a fundamental step in product development for any organisation. And as a UI/UX designer, this is something you cannot avoid.

Remember that your style guide isn't fixed and that you can make updates at any point in time. Practice till you get it just the way you want it.