Style organization and naming conventions in Figma - Step-by-Step Guide

Introduction

Organizing styles and using clear naming helps keep your design files neat and easy to update. This makes it simple to find and reuse colors, text, and effects across your project without confusion.

When you want to quickly apply consistent colors and fonts across multiple charts or dashboards

When your BI project grows and you need to avoid duplicate or conflicting styles

When collaborating with others who need to understand and use your design system

When you want to update a style once and have it reflect everywhere in your report

When preparing your design for handoff to developers or other team members

Steps

Step 1: Open the Assets panel

- Left sidebar in Figma

You see all your current styles and components listed

💡 If the Assets panel is not visible, click the 'Assets' tab next to 'Layers'

Step 2: Click the 'Styles' icon at the top of the Assets panel

- Assets panel header

All your color, text, and effect styles appear grouped by type

Step 3: Right-click a style and select 'Rename'

- Style list in the Assets panel

The style name becomes editable

💡 Use clear, descriptive names like 'Color/Primary/Blue' or 'Text/Heading/H1' to organize styles

Step 4: Create new styles with organized names

- Select an object, then click the '+' icon next to the style type in the right sidebar

A new style is saved with the name you provide

💡 Use slashes '/' in names to create folders and group related styles

Step 5: Use consistent naming patterns for all styles

- When naming or renaming styles

Styles are grouped logically and easy to find

💡 Decide on a naming convention before starting, like 'Category/Type/Variant'

Before vs After

Before

Styles panel shows many styles with unclear names like 'Blue', 'Heading', 'Text1', mixed without grouping

After

Styles panel shows styles grouped and named clearly like 'Color/Primary/Blue', 'Text/Heading/H1', making it easy to find and apply

Settings Reference

Style Naming

📍 Assets panel > Styles list > Right-click style > Rename

To give styles clear, organized names for easy reuse and management

Default: Untitled style

Create New Style

📍 Right sidebar > Fill/Text/Effect section > '+' icon

To save a selected color, text, or effect as a reusable style

Default: No default name, user must enter

Common Mistakes

Using vague or duplicate style names like 'Blue' or 'Text'

It causes confusion and makes it hard to know which style to use or update

Use descriptive names with categories and variants, e.g., 'Color/Primary/Blue' or 'Text/Body/Regular'

Not grouping styles with slashes '/' in names

Styles appear in a long flat list, making it difficult to navigate

Use slashes to create folders, e.g., 'Color/Secondary/Green' groups all secondary colors together

Summary

Organize styles with clear, consistent naming to keep your BI designs tidy and easy to update

Use slashes '/' in style names to group related styles into folders

Good naming helps you and your team quickly find and reuse styles across dashboards and reports