Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 20

Figma: Create a One-Page Brand Guide

Recommended resources

Introduction

In our last lesson, you did the detailed work of transforming a simple brand name into a polished, custom wordmark in Illustrator. That wordmark is the cornerstone of your brand's visual identity. But a logo alone is not enough; to build a recognizable brand, you need consistency.

This lesson bridges the gap between having brand assets and using them effectively. We will focus on how to compile your brand colors, fonts, and logo usage into a simple, one-page brand guide in Figma. This guide will act as the official "rulebook" for your brand's visual style, a concept that should appeal to your preference for systematic frameworks.

We are specifically using Figma for this task. It's a powerful, free, and industry-standard tool that you'll be using extensively as we move into designing your website. Think of this lesson as setting up the foundational system that will make all future design work faster and more consistent.

What is a Brand Style Guide?

Before we start building, let's clarify what a brand style guide is and why it's so valuable. At its core, it's a document that provides guidelines and standards for how a brand should be represented visually. It ensures that no matter who is creating content for the brand—even if it's just you on different days—the result feels cohesive and professional.

For a deeper understanding of its purpose and key elements, take a few minutes to read through this article from Figma's own resource library.

What Is A Style Guide & How To Create One? - Figma

This article, 'What Is A Style Guide & How To Create One?', clearly defines a brand style guide and its benefits. It will give you a solid theoretical foundation before we jump into the practical steps.

Please read the sections 'What is a brand style guide?' and '5 key elements of a brand style guide'. Pay close attention to the 'Visual identity' bullet point, as that's what we will be building today.

1. Setting Up Your Guide in Figma

First, we need to create the canvas for our style guide. We'll create a single frame in Figma and divide it into the three core sections for our guide: Logo, Colors, and Typography.

Your Task:

  1. Open Figma and create a New design file. Give it a name like "My Brand Guide".
  2. Press F to select the Frame Tool. In the right-hand panel, you can choose a preset size like A4 or just draw a custom frame on the canvas (a good starting size would be 1920px wide by 1080px tall).
  3. Using the Text Tool (T), create three titles on your frame: "Logo," "Color Palette," and "Typography." Arrange them to create clear sections.

This next video provides a quick, no-frills tutorial on how to lay out a basic brand guide structure like this.

How to Create A Brand Style Guide from Scratch in Figma | Quick & Easy Tutorial

This tutorial by KDC Marketing gets straight to the point, showing you how to quickly set up a frame and add dividing lines to structure your style guide. It's a great example of a clean, simple layout.

Watch from 00:30 to 02:31. Focus on how the presenter creates a frame and uses simple text and line elements to establish the basic sections of the guide. You can follow along to create a similar structure for your own guide.

2. Compiling Your Brand Assets

With the structure in place, it's time to populate it with the brand assets you've already developed.

A. Logo Section

This section will display your wordmark and provide basic rules for its use.

  1. Export from Illustrator: Open the Illustrator file with your final wordmark from the previous lesson. Select the wordmark and go to File > Export Selection.... Choose SVG as the format. SVG (Scalable Vector Graphics) is the ideal format because it can be resized infinitely without losing quality.
  2. Import to Figma: Drag and drop the exported SVG file directly onto your Figma canvas and move it into the "Logo" section of your frame.
  3. Define Clear Space: Clear space (or padding) is the minimum amount of empty space that must surround your logo to ensure it doesn't get crowded by other elements. A common and simple rule is to use a part of your logo as a unit of measurement. For example, you can create a small square the height of one of your letters and use that to show the required padding on all sides of the logo.

B. Color Palette Section

Here, you'll document the color palette you created in Module 1. More importantly, you'll turn them into Color Styles in Figma—a system that will let you apply and update colors across your designs with a single click.

How to Create Style Guides in Figma for Instructional Design

Let's watch how to add colors to a style guide and, crucially, how to create Color Styles in Figma. This video from Devlin Peck breaks down the process clearly.

Please watch two segments from this video: 07:57 - 09:15: Observe how the presenter creates simple shapes to represent the brand colors (dark neutral, light neutral, accent). Follow this process to add your brand's primary, secondary, and neutral colors to your guide. 25:20 - 26:15: This is the key part. The presenter shows you how to select a color and save it as a 'Color Style' in Figma's right-hand panel. Do this for each of your brand colors, giving them simple names like 'Primary', 'Accent', 'Neutral-Dark', etc.

Your Task:

  • Create a shape (circle or square) for each color in your palette.
  • Use the Text Tool (T) to add the HEX code (e.g., #1A1A1A) underneath each color swatch for easy reference.
  • Follow the video's instructions to save each of your colors as a Color Style in Figma.

C. Typography Section

This section defines your typographic hierarchy. Like with colors, we'll also create Text Styles to make applying fonts and sizes consistent and efficient.

How to Create Style Guides in Figma for Instructional Design

This same video also provides an excellent walkthrough for setting up the typography section and creating Text Styles.

Watch from 10:11 to 15:45. Pay close attention to how the presenter defines a 'Heading' and 'Body' text, specifying the font family, weight, and size for each. He then demonstrates how to save these as 'Text Styles.' You will do the same.

Your Task:

  1. In the "Typography" section of your guide, use the Text Tool (T) to type out a line for your primary heading (e.g., "Heading 1") and a line for your body text.
  2. Apply the serif/sans-serif fonts you chose in Module 1 to these text objects.
  3. Adjust the font, weight, and size for each. A good starting point is 36-48px for a heading and 16-18px for body text.
  4. Below each example, write out the specifications (e.g., "Poppins, Semi-Bold, 48px").
  5. Finally, select each text object and save it as a Text Style in Figma, naming them "H1" or "Body."

3. The Final Product

Once you have completed these steps, you will have a clean, simple, and highly practical one-page brand guide. It serves not only as a visual reference but also as a functional toolkit within your Figma file, thanks to the Color and Text Styles you created.

Here are a couple of examples of what a finished guide can look like. Notice the clean layout and clear specifications, which align well with the minimalist aesthetic you appreciate.

Figma Brand Style Guide Template: Colors and Typography
A minimalist brand style guide in Figma, clearly defining Brand Colors with hex codes and a Typography scale with font sizes for headings and body text. This is a great target for your one-page guide.
Figma Style Guide Example
A more detailed style guide built in Figma. On the right, you can see the saved 'Text Styles' and 'Color Styles', which is exactly what you have just created.

To share your guide outside of Figma, you can select its frame, go to the Design panel on the right, scroll down to Export, and export it as a PDF or PNG.

Conclusion

Excellent work. You've now created a central source of truth for your brand's visual identity. This is a critical step in moving from a creative individual to a systematic brand builder. This one-page guide will save you hours of guesswork in the future and ensure everything you create looks like it came from the same professional source.

Key Takeaways:

  • A brand style guide is your rulebook for maintaining visual consistency.
  • The three core components of a basic guide are Logo Usage, Color Palette, and Typography.
  • Using Figma's Color and Text Styles is a powerful workflow for creating scalable and maintainable designs. It turns your guide from a static image into a dynamic tool.

Preview of the Next Lesson:
Your brand identity is now defined and documented. In the next module, we will put this system to immediate use. You will learn how to structure a multi-page website design in Figma using pages, frames, and layers. The Color and Text Styles you just created will be instrumental in building your website's interface quickly and consistently.