Creating a UI style guide (+Figma template)

We communicate with each other by exchanging thoughts, ideas, and stories. Each has its flair and narration, but the one common aspect is the language we all share.

Similarly, a style guide is the words used to weave complex sentences to narrate a story. It is foundational for all product’s visual design. It helps define color, fonts, typography, buttons, etc., building blocks of any design language. Any designer can get creative with them to build complex components their teams can use.

Today, I will share some basic ideas for developing your style guide and tips for maintaining it. You can use this opportunity to further explore how to take this to the next level. Use this as a workbook for existing and new assets addition for your style guides.

Here’s the Figma style guide template with the elements I’ll teach you about today.

What is a style guide in UI?

Style guides are documents that record all the essential elements of your design: the choice of colors, fonts (weights and style), typography, types of buttons, and so on. A style guide can get complex quickly and change into a design system before you notice.

A design system is different from a style guide. It is much more complex, including components, tables, and various types of states. Our focus will be on the basic building blocks that I mentioned earlier. Let’s get into the details.

What is the purpose of a style guide?

Purpose-led decisions help us identify the reasoning behind our style choices. It paves the path for how we present a product to customers. An eagle’s eye view is essential before getting to work. Your purpose will motivate and inspire you to find various creative ways to make the UI of the product beautiful.

Your company’s vision, mission, and expectations could also help with the purpose-driven decisions for your guide. Once the purpose drives you, the next step is getting to work and building the UI style guide.

How to build and maintain a style guide?

When you start with the style guide, open a new Figma file. Start considering colors, fonts, and other UI elements that the brand or business shared with you. You will reflect on many other aspects, such as icons, buttons, and all the essential building blocks as you break these down and meticulously record them in your style guide.

Let’s start with colors and walk through four essential elements — hopefully, with this information, you will be able to build the style guide and customize it to your needs.

Colors

Consider your colors, use them in your guide, and make sure they are accessible. By this point, your team has probably decided which of the provided colors works with the theme of the product.

If you haven’t already: the task is to pick two colors, primary and secondary. These two will be the main colors of your product. These colors should be complementary to each other.

Now you may think, what about the different colors? You will be using these in any illustrative, graphical, and data representation purposes your company has. Here are the steps to create your palette and showcase them in your style guide.

Add your primary color

In your Figma file, create a shape and fill it with your primary color. You can use any style you’d like:

Outline your colors for design states

Based on this color, you will need to create a few essential states if your team hasn’t already: hover, pressed/tapped, and a lighter shade that can be used for other interactive elements such as search bars, toggle buttons, etc. Once you have those outlined, it will look something like this:

---

---

Repeat this process for secondary colors

Replicate this process for your secondary color as well, which should provide contrast and visual interest:

Record text colors

In this step, you will also consider the text colors. These will include your dark-mode text as well. As shown below, you will use a white body and white subtext on a black background. Text colors usually include your body text, any subtext, success colors, and error state colors:

Borders, cards, lines

In this step, you will consider all the backgrounds, cards, lines, and separator colors. These usually consist of multiple shades that can be used in various ways. You can even specify which colors should be used for various UI elements:

Putting the color library together

Once you have identified all your colors, the next step is to make them accessible by creating a color library that can be referred to in other files. The way to build this library is straightforward:

1. Let’s start with a color. Notice the four dots on the fill section of your design tab, and click on it to open a panel that will allow you to create a color swatch. Click on the + sign to add a new style.
2. You will notice two tabs on the new panel: style and variable. Don’t worry about variables for now. Under style, you can give it a name. Pro tip: If you want to have a group, you can use / to create it, e.g., Secondary/Hover.
3. You could also add properties such as reducing opacity or adding new color layers. But for now, just hit Create. A new color swatch will be added to your fill:

Just like that, you can continue adding additional colors to the library as needed. Your color library is complete and you’re one step closer to a neat style guide.

Typography

Let’s now look at the fonts and how to utilize them for your disposal. Fonts have different weights and styles that you can leverage to create a hierarchy of information for your user interface. It helps bring discipline to your design and, of course, structure. Here is how you can build your first typography library.

Select your fonts

Select your fonts. Usually, you can select one or two fonts from the same family. I’ve used IBM Plex, specifically IBM Plex Sans and IBM Plex Serif, for this guide. I have used the prior for headers, links, and buttons and the later for body text.

Your team and stakeholders will likely have a lot to say about your choices — make this a collaborative effort if you’re working with others, and be sure to research your font choices to back up their psychology and use cases for your given industry.

Create a header style

Now, let’s start with your first section, the header. Headers can be huge to the size of your body text. It denotes the headings of any sections. It could be a label, a title, etc. In the file I’ve shared, you will find H–H6 headers with different font sizes, weights, and line height. It depends on the type of content you will be creating, but these can be a good starting point:

Rinse and repeat for body text

Repeat the process for your body text and all the links:

Laying your fonts out in Figma

Now that you have all the fonts you’ll need, it’s time to repeat the process to make them available. Let’s do that now.

1. Let’s start with the header H1 font. Notice the four dots on the text section of your design tab, and click on them to open a panel that will allow you to create a text style. Click on the + sign to add a new style.
2. You will notice two tabs on the new panel: style and variable. Don’t worry about variables for now. Under style, you can give it a name. Similar to the pro tip above, if you want to have a group, you can use / to create it. e.g., Header/Heading 1:

Buttons

Another building block of your UI guide is buttons, the interactive elements used to denote actions. There are various ways of creating buttons; I prefer this process, which is one of the simplest ways. We have a more comprehensive guide on button states you can also check out.

Making a simple button

Use your already created text style and type “Button” as your placeholder text:

Refining the button

Select your text and hit Shift + A to create an auto layout, or right-click to create it. Once the auto layout is created, space the text according to your needs. You can then add horizontal and vertical padding and horizontal gaps between items when you add icons to the button:

Fill your button

Add fill to your color, and use your existing primary color’s default to create the backfill of your button. You can also stylize it if needed by rounding the corners.

Ensure you follow a naming convention, e.g., since this is a primary default button, let’s name it Button/Primary/Default, followed by other types of buttons such as Hover, Pressed, and Disabled. This is going to be very important for the next step:

Componentize the button

Now that you have your basic button, the next step is to create a component so that the button can be used as an instance in all your design files.

To do that, select the button notice on the navbar at the center, and you will see a dropdown components icon. Click that and like “Create component set”:

Arrange your buttons in your style guide

Once you have the component, select it, and you will notice two properties. Rename the first to Type, which is your primary and secondary. Notice that was the naming convention we followed when we were filling the button.

Rename the second property to state since it denotes the state where the button is. In the end, you will have something like this. You can then use a single button to have all these types of variants in it:

Controls

Let’s look at another example: radio buttons and checkboxes are other interactive aspects critical to any library. These interactive elements can also be created with the same concepts we used to make buttons. The steps are pretty simple, so let’s quickly run through them.

Making checkboxes and radio buttons

Create a checkbox with a solid primary color border and interactive color fill. Duplicate it to create other variations: hover, pressed/selected, disabled, error state, and multiple selections. Similarly, various states have a radio button as well. Multiple choice would not exist for a radio button.

Label your assets

Make sure that you name them appropriately as you create these assets. In the case of checkboxes, make sure to name them as Controls/Checkbox/Default and so on for the rest. Follow the same convention for radio buttons as well.

Create a component set

Once you have created all the variants and named them correctly, like the step for button creation, select all the controls and create a component set.

Arrange the elements for your style guide

Select the Controls component and change the name of the first property to Type and the second to State. And you are done; now you have another interactive asset ready:

Other interactions

Since this is a beginner’s guide, please look at this as a workbook. Use this opportunity to use the rest of the assets to build components and expand on what I have provided.

This would be a great learning opportunity to get your hands dirty. Sometimes, starting from scratch is intimidating; having a starting point would allow you to expand on what exists.

I have created another icon section; feel free to use the techniques you have learned to create components and variants.

Additional considerations

Accessibility

Incorporate accessibility into your designs from the foundation. The color selection, font size, and weights affect readability, so make sure the choices are ADA-compliant. It helps with the foundation of the entire product, which will be developed based on these assets.

Visual language

Along with all your design elements, the structure of the style guide is also essential. Illustrations and choice of style help define how an application will look. It also evokes the emotions you want your users to feel while using or at least supporting the app. This about your company’s vision, and see how that can translate into your company’s visual language.

Conclusion

There are plenty of style guides out there. However, very few share the process of creating one for yourself. This guide is free to use, so change it as you want, follow the existing colors or button styles, etc. Feel free to change it to your liking.

There is always a learning curve in adopting new tools, and showing support is what I can offer. Enjoy your exploration, make mistakes, and learn as you move ahead as a designer.