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.
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.
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.
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.
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.
In your Figma file, create a shape and fill it with your primary color. You can use any style you’d like:
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:
Replicate this process for your secondary color as well, which should provide contrast and visual interest:
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:
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:
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:
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.
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. 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.
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:
Repeat the process for your body text and all the links:
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.
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.
Use your already created text style and type “Button” as your placeholder text:
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:
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:
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”:
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:
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.
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.
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.
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.
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:
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.
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.
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.
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.
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
Great UX shouldn’t cost the Earth. Or your users’ patience. Because when you make sustainable font choices in digital design, you’re not only going eco-friendly, but also building efficient, accessible, and fast-loading UX.
When every UI element screams for attention, nothing really stands out. But with the Von Restorff effect guiding your design decisions, you can amplify user recall. More on that in this blog.
Designing digital products isn’t just about pretty interfaces. It takes a blend of creativity, research, and iterative design. More on that in this blog.
There are five different types of grids at your disposal as a UX designer. In this blog, I talk about which grid works best for which use case, so you can find the best one for your next design project to be intuitive and functional.