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 22

Figma: Color & Type Harmony

Recommended resources

Hello! Welcome back to the course.

In our last lesson, we established a strong foundation in typographic hierarchy, learning how to guide a reader's eye using font size, weight, and style. You now know how to create structure and importance in your text. Today, we're going to add the second major pillar of visual design to your toolkit: color.

This lesson will teach you how to combine color and typography to create a cohesive typographic composition in Figma. Color doesn't just make things look nice; it enhances hierarchy, sets the mood, and builds brand identity. By learning to pair it effectively with your type, you'll be able to create designs that are not just organized, but also emotionally resonant and professional.

Why Color and Typography are a Team

Think of typography as the skeleton of your design—it provides the structure. Color is the skin and personality; it brings the skeleton to life. A successful design depends on how well these two elements work together.

  • Enhancing Hierarchy: A bright, saturated color can make a call-to-action button pop, while a muted grey can signal that text is secondary.
  • Setting the Mood: A palette of warm, earthy tones combined with a serif font can feel traditional and comforting. A set of neon colors with a bold sans-serif can feel energetic and modern.
  • Creating Cohesion: Using a consistent color and type system throughout a design makes it feel unified and polished.

To see this in action, let's look at a practical example where a designer builds a simple system from scratch.

UI design: typography and colour fundamentals

The article 'UI design: typography and colour fundamentals' by a UX designer on Medium shows a complete thought process for choosing and applying both typography and color to a fictional project.

Please read the section titled 'Typography and colour in practice'. Observe how the author first chooses a typeface and defines font styles (Headings, Body text), and then separately chooses a brand color to create a monochromatic palette. This separation of concerns is a key professional workflow.

The Figma Workflow: Separating Text and Color Styles

As you saw in the article, the designer first defined their type system and then their color system. Figma is built to support this exact workflow. This might seem strange at first, but it's incredibly powerful.

In Figma, Text Styles and Color Styles are created and managed separately.

  • A Text Style saves properties like font family, size, weight, line height, and letter spacing.
  • A Color Style saves a specific color (or gradient).

This separation is intentional. Imagine you've designed 50 screens and the client wants to change the main brand color from blue to green. If your color was baked into your text styles, you'd have to update every single text style. By keeping them separate, you only need to update your one "Primary Brand" color style, and that change will apply everywhere you've used it—on text, on buttons, on backgrounds. It makes your designs scalable and easy to maintain.

This official Figma article explains the concept perfectly.

Kick-start your typography system in Figma

The article 'Typography systems in Figma' from Figma's own best practices guide is essential reading. It clearly explains what is—and what is not—included in a text style.

Please read two short sections: Start with 'Text style basics' to see the table that explicitly shows that color is not part of a text style. Then, jump down to 'Combining color styles and text styles'. This section explains the workflow of applying separate color styles to text objects. This is a fundamental concept for working efficiently in Figma.

Practical Steps: Creating and Combining Styles in Figma

Now, let's turn theory into practice. We'll build a small but complete design system with typography and color styles, and then apply them to create a cohesive design. The following video tutorials demonstrate a professional workflow using Figma plugins to speed up the process.

Step 1: Create Your Text Styles

First, you need to turn your typographic scale (which we discussed in the last lesson) into reusable Text Styles. This video will show you how to take a set of text elements and save their properties as styles in Figma's right-hand panel.

Build a Complete Figma Design System (Freelance Course Preview)

Let's watch a segment from 'Build a Complete Figma Design System' by Arnau Ros. This part focuses on turning a generated typography scale into formal, reusable Text Styles.

Watch from 04:18 to 08:00. Pay close attention to how he selects each text layer, clicks the four-dot 'Style' icon in the Text section, and creates a new style with a clear name (e.g., H1, H2, Body, Caption).

Step 2: Create Your Color Styles

Next, you'll define your color palette and save those colors as reusable Color Styles. A great way to start is by picking a primary brand color and then generating shades and tints from it. This ensures your colors are harmonious.

This next segment from the same video demonstrates a fast and effective way to do this using a plugin.

Build a Complete Figma Design System (Freelance Course Preview)

Continuing with the same video, let's see how to generate a color palette and create Color Styles.

Watch from 08:00 to 10:57. The key steps are: Using the 'Foundation color generator' plugin to create a full range of shades from a single base color. Clicking 'Create Styles' to automatically add this palette to your local Color Styles.

Your local styles panel should now be populated with both text and color styles, ready to be combined. A well-organized set of styles might look something like this:

Figma Type and Color Styles Overview
This image shows how Text Styles and Color Styles are organized separately in Figma's design panel. This setup allows a designer to mix and match them to create consistent and flexible designs.

Step 3: Combine the Styles in a Composition

This is the final and most important step. You will now apply your predefined styles to elements in a design. You select a text element, apply a Text Style to define its size and weight, and then apply a Color Style to define its color.

Build a Complete Figma Design System (Freelance Course Preview)

Let's finish the sequence from 'Build a Complete Figma Design System'. Here, the presenter applies the text and color styles he just created to a hero header design.

Watch from 10:57 to 13:11. Notice how quickly he can change the look of the design by selecting an element and simply clicking on the desired style from the panel. This is the power of a style-based workflow.

Test your understanding!

Now it's your turn to create a cohesive typographic composition. Let's design a simple "Quote of the Day" card.

  1. Set up your styles:

    • Color: Choose one primary color you like. Use the Foundation plugin (or Shift + I to search for "Foundation color generator") to create a palette. Create the styles. You'll now have colors like Blue 50, Blue 100... Blue 900.
    • Typography: Choose a font (e.g., Inter). Create three text elements on your canvas:
      • A quote (e.g., "Design is not just what it looks like and feels like. Design is how it works.") - Set it to 18px, Regular.
      • The author (e.g., "— Steve Jobs") - Set it to 14px, Italic.
      • A title (e.g., "Quote of the Day") - Set it to 12px, Bold, ALL CAPS (add 10% letter spacing).
    • Create a Text Style for each of these: "Quote Text", "Author Text", and "Card Title".

  2. Build the composition:

    • Create a frame (e.g., 400x400px).
    • Set the frame's background fill to a very light color from your palette (e.g., Blue 50).
    • Place your three text elements inside the frame.
    • Apply your styles:
      • Select the quote text. Apply the "Quote Text" style. Now, for its color, select a dark shade from your palette (e.g., Blue 800).
      • Select the author text. Apply the "Author Text" style. Give it a slightly lighter color (e.g., Blue 600).
      • Select the title. Apply the "Card Title" style. Give it the main brand color from your palette (e.g., Blue 500).

  3. Experiment! Try changing the background to a dark color (Blue 900) and the text colors to light shades (Blue 100, Blue 200). Because you used styles, you can experiment with new combinations in seconds.

Show answer

There's no single correct visual outcome, but a successful result will have these characteristics:

  • Your Figma file's "Local styles" panel shows the color and text styles you created.
  • When you select any text element on your card, the Text and Color sections in the right-hand panel show the names of the styles you applied.
  • The composition has a clear hierarchy. The quote should be the most prominent element, followed by the author. The title should be a small, subtle label.
  • The colors feel related because they came from the same generated palette, creating a cohesive and professional look.

Conclusion

Excellent work! You have now integrated color with typography, taking a massive step toward creating professional and cohesive designs. This practice of building and using styles is fundamental to modern design workflows, especially for larger projects.

Here are your key takeaways:

  • Color and typography work together to create hierarchy, mood, and cohesion.
  • Figma intentionally separates Text Styles (font, size, weight) and Color Styles for maximum flexibility and scalability.
  • A professional workflow involves creating these styles first, then applying them to your design elements.
  • Using plugins like Foundation color generator can rapidly speed up the creation of a harmonious color palette.

In our next lesson, we will introduce the third major element of graphic design. You'll learn how to source and import license-free images into Figma. Now that you can control typography and color, you'll be ready to start combining them with powerful imagery to create even more complex and engaging layouts.