Mastering Styles: Color and Text for Consistency

1. The "Why": Styles as a Single Source of Truth

Before we jump into the "how," it's vital to understand why styles are non-negotiable in professional design. Inconsistent colors or text sizes erode user trust and make a product feel unprofessional. Styles solve this by creating a "single source of truth."

Imagine your client decides to change their primary brand color from blue to green. Without styles, you would have to manually find and change every single blue element across dozens of screens. With styles, you change it once, and it updates everywhere. This efficiency is critical for a freelancer.

Let's watch a short clip that explains this powerful concept.

2. Mastering Color Styles

Color styles allow you to save and reuse specific colors (including solids, gradients, and even images) across your designs.

Creating and Applying Color Styles

The mechanics of creating a style are straightforward. You select an object with the color you want to save, and then you create a style from its properties. The official Figma channel has a very clear tutorial on this.

Naming Conventions: From Literal to Semantic

How you name your styles is just as important as creating them. Naming a color "Blue" is limiting. What if you change it to green? A more robust approach is to name colors based on their function or purpose. This is called semantic naming.

This approach will feel familiar to you from your accounting background, where accounts are named based on their function (e.g., "Accounts Receivable," not "Money Owed by ABC Corp"). It makes the system scalable and understandable to others, like developers.

To build on this, let's explore a practical system for naming your colors. A common professional practice is to group colors into categories like Primary (for the main brand color), Neutral (for text and backgrounds), and Indicator or System (for success, warning, and error states).

3. Defining Text Styles

Text styles work just like color styles but control typographic properties: font family, size, weight, line height, and letter spacing. Using them ensures a clear and consistent visual hierarchy throughout your product.

Creating and Organizing Text Styles

The process is very similar to creating color styles. You format a piece of text as you want it, then save those properties as a style.

A key best practice is to use a hierarchical naming convention with slashes (/). This creates folders in your Styles panel, keeping everything organized. For example:

• Heading/H1
• Heading/H2
• Body/Regular
• Body/Bold
• Caption/Small

Let's read a short guide that walks through the process and reinforces this naming strategy.

Important Note: In Figma, a text style does not include color. This is intentional and incredibly flexible. It means you can have one Body/Regular text style and apply any of your color styles to it (e.g., Neutral/Text for standard text, or Primary/Brand for a link). This prevents you from having to create dozens of separate text styles for every color combination.

4. Hands-On Practice: Building a Mini Style Guide

Now it's time to apply what you've learned. In your Figma practice file, you will create a mini style guide. This exercise simulates the first step of any professional project.

1. Create a new Frame and name it "Mini Style Guide".
2. Define Color Styles:
   • Create three squares. Pick a primary color, a dark neutral for text, and a light gray for backgrounds.
   • Create a color style for each. Use a semantic, slash-based naming convention:
     • Brand/Primary
     • Neutral/Text
     • Neutral/Background
3. Define Text Styles:
   • Create two text layers.
   • Set the first to a large, bold font for a heading (e.g., Montserrat, Bold, 32px).
   • Set the second to a smaller font for body text (e.g., Montserrat, Regular, 16px).
   • Create a text style for each, using the hierarchical naming convention:
     • Heading/H1
     • Body/Regular
4. Apply Your Styles:
   • Create a simple card UI with a heading and some body text.
   • Apply your newly created Heading/H1 and Body/Regular styles.
   • Apply your Neutral/Text color style to the text and Neutral/Background to the card.
5. The "Aha!" Moment:
   • With your card selected, click on the canvas to deselect everything.
   • In the right-hand panel, find your Brand/Primary color style and click the "Edit style" icon.
   • Change the color. Now, watch how any element using this style would instantly update across your entire file. This is the power of styles in action.

Conclusion

You've now learned one of the most fundamental skills for professional UI design. By systematizing colors and typography, you're building a foundation for speed, consistency, and scalability—all essential for a successful freelance career.

Key Takeaways:

• Single Source of Truth: Styles are reusable properties that ensure consistency and make global changes effortless.
• Semantic Naming: Name styles by their function (e.g., Brand/Primary, System/Error), not their appearance (Blue, Red). Use slashes (/) to create organized folders.
• Decoupled Styles: Text styles and color styles are separate in Figma, giving you the flexibility to combine them as needed.
• Efficiency is Key: Mastering styles is a direct investment in your productivity as a designer.

Preview of the Next Lesson:

We've organized our layouts with alignment tools and established a consistent visual language with styles. The next step is to make our designs dynamic. In the next lesson, we will dive into Auto Layout, a powerful Figma feature that allows you to create flexible, responsive components that grow or shrink automatically with their content.