19 Essentials for an Effective Figma Style Guide

What is a style guide?

In the design world, there are various deliverables relating to the branding and style of a project. From branding guides and style guides to design systems, these deliverables range in complexity and scope. If we were to think of them as sitting on a spectrum, style guides sit in the sweet spot right in the middle. They contain the essentials of a project’s brand, including colors and typography, but they go a step further by including common UI components for web development.

Using our Style Guide template, you’ll have all the basic building blocks you need to customize a project’s style and design a user interface. Unlike a design system which is overwhelming with thousands of components and hundreds of colors and text styles, our Figma style guide gives you the bare essentials that you can tailor to your needs.

Over 5 years of web and mobile app development, our designers and developers have worked together to create a basic style guide that serves as the starting point of all projects. Whether you’re starting from scratch with a client or jumping in mid-project, taking time to establish your styles and components in the style guide will give your designs a level of polish that is only attained with applying standardized styles. Not only will your designs look more professional, but this consistency will help the developers write cleaner and more efficient code.

A style guide is composed of styles and components, so let’s dive into the 19 essentials that you’ll need for a functional style guide.

Style

The style of an interface is conveyed through a combination of visual elements such as color and typography. On its own these elements may not evoke any emotions, however used in concert with each other they are a powerful tool to foster brand recognition and loyalty.

1. Color

Color is one of the most important aspects of an interface as it serves to convey brand identity, give semantic meaning to components, and provide hierarchy. Our style guide gives you the bare essentials - a neutral, primary, and accent color palette. Each palette has shades that range from light to dark.

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation is a percentage from 0 to 100 where 0% saturation would be a shade of gray and 100% saturation would be the pure color. Lightness is also a percentage where 0% is black and 100% is white

In interfaces it’s common to use palettes of color ranging from light shades to dark shades. Using HSL comes in handy when picking your color shades. Simply increasing or decreasing the lightness value of a color can produce shades that look muddy and desaturated. A trick around this is to adjust the hue or saturation values in addition to the lightness.

For example an orange palette might have lighter shades that have hues shifted towards yellow and darker shades that have hues shifted towards red. This works because hues themselves vary in their perceived brightness. Adjusting saturation works similarly.

Opacity represents how transparent a color is by a percentage. 0% is fully transparent and 100% is fully opaque. Colors with opacity are handy for image overlays to improve text readability and more.

Color gradients are formed by smoothly shifting from one color to another on a line (linear gradient) or outwards from a center point (radial gradient). They can add depth and dimension to an otherwise flat design.

2. Typography

Typography can drastically change the style of your interface. The font pairings you can create are limitless! When it comes to typography, less is more. 2 fonts is a perfect number for designing an interface - one can be used for headings while the other is used for body text. A great way to learn about what fonts pair well together is to look for examples on websites and apps that you like.

For typography it’s important to use a scale for the font sizes to help establish a visual hierarchy. Varying font size and weight helps users to consume text more easily. A 4px scale is used in the style guide template to ensure that all text boxes will align with a 4px grid. There are also mobile sizes included for the headers to ensure that the typography fits on smaller screens.

3. Drop Shadow

Drop shadows are an effect that give an illusion of depth to an interface. This depth can act as subtle communication to the user about how they can interact with the interface. To help convey the illusion of depth, you’ll need a selection of shadows that range in intensity, blur, and spread. Elements closer to the background will have smaller shadows, while elements further away will have larger shadows.

4. Blur

Blur is a relatively new effect for interfaces. Similar to drop shadows, blurs can also help give an illusion of depth. Paired with drop shadows, you can even create a glass effect. Blurs are widely used in Apple’s iOS platforms and give a modern, sleek vibe to any interface.

5. Shape

Shapes are trending in interface design - common rectangles and squares in layouts are being replaced with shapes of all kinds! For a subtle take on shapes, rounding corners with border radius can soften harsh squares and rectangles. You can even play around with only rounding 1 or 2 corners! Try to establish a system for your border radius values and document them in your style guide so they can be used consistently.

For fancier shapes it’s best to use SVGs which can be scaled to any dimension without losing quality. If drawing shapes by hand isn’t your thing, check out the Figma Shaper plugin by Anna Voshkarina and Lev Bruk.

6. Iconography

Icons have grown to be an essential element of interface design. Unlike designs consumed for print, icons in interfaces are widely assumed to be interactive in some capacity. Although they can be some of the smallest elements on a page, their utility is powerful - especially on smaller screens where space is limited. The shapes, strokes, and fills of an icon all contribute to a brand.

A good rule of thumb to follow is to pick icons that match characteristics of your typography. Thin text pairs well with stroke icons, whereas thick text pairs well with filled icons. It’s best to stick to a single icon pack in a project. Mixing icons from different sets can quickly degrade the professional appearance of an interface.

Design systems vary on their requirement of having a label accompany icons. Labels make icons accessible to users of assistive devices and have the added benefit of removing ambiguity from the icon’s meaning. Whether you include labels or not, make sure to stay consistent.

7. Spacing

Spacing is the essential foundation to any interface. Without a spacing system, you can quickly be overwhelmed with the minutiae of single-pixel differences, and these arbitrary values will overwhelm your developers’ code.

The easiest way to build spacing into your design is to establish a spacing system and stick to the finite values within your system. Our style guide template uses a 4px grid with the following possible values for spacing (think paddings and gaps in Figma).

Components

If we combine elements of style with functionality, we get components. If elements of style are like atoms of our interface, components would be the molecules. These basic components are just the tip of the iceberg - explore design systems and other interfaces for inspiration on what else you can add to your component library.

8. Buttons

The basic structure of a button is simple: all you need is a label and a container with some padding! Buttons are endlessly customizable. When designing a button component, make sure to keep hierarchy in mind. The style guide template contains 3 button types: contained, outlined, and text. Contained buttons are intended for primary actions, outlined buttons for secondary actions, and text buttons for tertiary actions.

9. Input fields

Simple on the surface, input fields can actually be quite complex considering their different uses. For the sake of simplicity, the input field component in the style guide template is adaptable to different uses:

• Labels can be hidden or visible
• Labels can be required (adds an asterisk) or optional
• Icons can be added to the start or end of the field
• A select (dropdown arrow) can be hidden or visible
• Helper text can be hidden or visible
• Even the content of the field can be switched with any component, so you can replace the text with chips to create a multi chip select field without having to detach the instance

If you’re not sure what kind of input fields you’ll need, it’s always a good idea to talk with your developers to see what is at their disposal.

10. Rich Text Editor

Sometimes a project may require something more customizable than a basic input field, and that’s where a rich text editor comes in. TinyMCE is an open source rich text editor that we’ve used in internal and client projects, and it’s a great option if coding a text editor from scratch isn’t feasible.

11. Toggles

1. Radio

• Radio buttons are a staple in forms. They allow the user to make a single selection out of multiple options, and they’re typically circular to differentiate from checkboxes. Out of the radio options, there is usually one selected by default.

2. Checkbox

• Checkboxes allow users to choose multiple options from a list rather than just a single one. As the name suggests, they’re characterized by a check icon contained in a square frame. Since checkboxes allow you to select anywhere from none to all of the options, none are usually checked by default.

3. Switch

• Switches or toggles allow users to choose between a binary option. Unlike a radio or checkbox which typically requires a submit action before any effect is applied, toggling a switch should trigger an instant effect. Depending on their designs, a switch’s state can be ambiguous, which is why it’s helpful to use a contrasting color to differentiate its ‘on’ state from its ‘off’ state. Another way to reduce ambiguity is to label both sides of the switch.

4. Visibility

• Visibility toggles are commonly found on input fields for passwords and others where the inputted text is sensitive and should be protected from prying eyes. They also help prevent frustration when you type in your password incorrectly, since you can toggle it visible and correct the mistake instead of having to retype it altogether.

5. Counter

• Sometimes number counters are built into input fields, but in case you need an independent component you can use a counter. These are common in e-commerce sites for increasing or decreasing the quantity of a product before adding it to your cart. Similar to buttons, they can be styled in various ways.

12. Tooltip

Tooltips are temporary informational messages that typically appear after some user interaction. Since a tooltip may appear in a variety of contexts, the tail (the pointy bit) needs to be able to point in all 4 directions (top, bottom, left, and right). Thanks to the magic of absolute positioning and autolayout, the tooltip component in the template not only has variants for each tail direction but also resizes to fit any text content.

13. Floating Action Button

The floating action button or FAB is an icon button that ‘floats’ in a fixed position on a screen as a user scrolls. The icon should indicate what the action is. Some common uses of FABs are to perform the most common page action, scroll the user to the top of the page, to interact with a chatbot, or access help resources.

14. Badge

Badges are the small circles that appear on the corners of icons to indicate that something requires the attention of the user. Sometimes they have numbers inside to indicate how many messages, notifications, etc. are waiting to be seen.

15. Rating

The rating component uses an icon to represent a user’s overall sentiments of something. They are common in e-commerce platforms where users can leave reviews of products and rate them on a scale of 1 to 5, with 5 being the highest. Stars are the most common icon used, however some rating systems use thumbs up or down icons, or even face emojis.

16. Slider

Sliders let the user pick a single value or range of values from a set scale. Volume sliders are a good example of selecting a single value (typically on a scale of 1 to 100). Whereas price filters are a common example of selecting a range (typically on a scale from the lowest value available to the highest value available).

17. Toasts

Toasts are temporary messages that appear on screen to give feedback to the user on an action they performed. They are less intrusive than pop ups and typically don’t require any user action to be dismissed. Their position can vary, though they are often anchored somewhere along the edge of the viewport.

18. Avatar

An avatar is a representation of the user. When clicked they typically navigate the user to their profile or account. They are a simple way to inform the user of who is currently logged in. Avatars can be represented by an image, icon, or even the initials of the user. They are often in a circular frame, though this can vary.

19. Chip

Chips are versatile components that represent an input, attribute, or action. They can be interactive, with interactions often represented as an icon within the chip’s boundaries. They can be used with input fields as a way to represent multiple selections, or even used as a filter.

The TL;DR

The 19 essentials for a Figma style guide can be split into two categories: style and components. For style, you should consider color, typography, drop shadow, blur, shape, iconography, and spacing. Once you have the style of a project established, you can apply them to your components. Common components that will come in handy as you design include (but are not limited to) buttons, input fields, rich text editors, toggles (think radio buttons, checkboxes, switches, visibility toggles, and counters), tooltips, floating action buttons, badges, ratings, sliders, toasts, avatars, and chips. Lucky for you, we have all of these basics built into our free style guide template, which you can download by clicking the ‘Get This Template’ button! Happy designing! And if you need some hashtag ideas for sharing your designs on social media, check out this article.

‍