Style organization and naming conventions in Figma - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the main purpose of using consistent naming conventions in style organization?

Consistent naming helps everyone understand and find styles quickly. It keeps the design system clear and easy to use.

beginner

How should colors be named in a style system?

Colors should be named by their use or meaning, like Primary/Secondary or by color and shade, like Blue/Light Blue. Avoid vague names like 'Color1'.

beginner

Why is grouping styles into categories important?

Grouping styles (like colors, text, effects) helps keep the design system organized. It makes it easier to find and update styles.

beginner

What is a good practice for naming text styles?

Use names that describe the text role and size, like Heading/Body/Caption - Size. For example, 'Heading Large' or 'Body Small'.

intermediate

How does style organization improve collaboration in BI projects?

Clear style organization and naming make it easy for team members to use and update styles consistently, reducing mistakes and saving time.

What is the best way to name a primary button color in Figma styles?

A Primary/Blue

B Color1

C ButtonColor

D BlueShade

Using 'Primary/Blue' clearly shows the color's role and its hue, making it easy to understand and find.

Which grouping is most effective for organizing styles?

A Random order

B By file size

C Alphabetical by style name

D By style type like Colors, Text, Effects

Grouping by style type keeps the system organized and easy to navigate.

What should text style names include?

A Text role and size

B Font name only

C Color code

D File name

Text style names should describe their role (like Heading) and size to clarify usage.

Why avoid vague style names like 'Color1'?

A They are too long

B They confuse users and hide meaning

C They look professional

D They save time

Vague names make it hard to know what the style is for, causing confusion.

How does good style naming help BI dashboards?

A Increases file size

B Makes dashboards colorful

C Speeds up finding and applying styles

D Removes the need for documentation

Clear names help users quickly find and use the right styles, improving efficiency.

Explain why consistent style naming and organization matter in BI design projects.

Think about how clear names help everyone work faster and avoid mistakes.

Describe best practices for naming color and text styles in Figma.

Consider how you would name styles so a new team member understands them immediately.

Practice

1. Why is it important to use clear and consistent naming conventions for styles in Figma?

easy

A. It changes the colors of the styles.

B. It makes the file size smaller.

C. It automatically fixes design errors.

D. It helps find and reuse styles quickly, saving time and keeping designs consistent.

Solution

1. Step 1: Understand the purpose of naming conventions

   Clear and consistent names help users quickly identify and reuse styles without confusion.

2. Step 2: Connect naming to design consistency

   Using good names ensures styles are reused properly, keeping the design uniform across the project.

3. Final Answer:

   It helps find and reuse styles quickly, saving time and keeping designs consistent. -> Option D

4. Quick Check:

   Clear naming = easy reuse [OK]

Hint: Good names save time and keep designs uniform [OK]

Common Mistakes:

• Thinking naming affects file size
• Believing naming fixes design errors
• Assuming naming changes style colors

2. Which of the following is the correct way to organize styles using categories and subcategories in Figma?

easy

A. Button-Primary-Active

B. Button/Primary/Active

C. Button Primary Active

D. Button.Primary.Active

Solution

1. Step 1: Identify the correct separator for categories

   Figma uses slashes (/) to separate categories and subcategories in style names.

2. Step 2: Compare options with Figma naming rules

   Only Button/Primary/Active uses slashes correctly to organize styles hierarchically.

3. Final Answer:

   Button/Primary/Active -> Option B

4. Quick Check:

   Use slashes (/) for style categories [OK]

Hint: Use slashes (/) to separate style categories [OK]

Common Mistakes:

• Using dashes or dots instead of slashes
• Using spaces without separators
• Mixing separators inconsistently

3. Given these style names in Figma: Text/Heading/H1, Text/Heading/H2, Button/Primary/Default, which style will appear first in the style list when sorted alphabetically?

medium

A. Button/Primary/Default

B. Text/Heading/H1

C. Text/Heading/H2

D. They all appear at the same time

Solution

1. Step 1: Understand alphabetical sorting in Figma

   Styles are sorted alphabetically from left to right, starting with the first category.

2. Step 2: Compare the first parts of each style name

   "Button" comes before "Text" alphabetically, so any style starting with "Button" appears before "Text" styles.

3. Final Answer:

   Button/Primary/Default -> Option A

4. Quick Check:

   Alphabetical order starts with first word [OK]

Hint: Alphabetical order sorts by first word first [OK]

Common Mistakes:

• Assuming H1 comes before Button
• Thinking subcategories affect order first
• Believing all styles appear simultaneously

4. You notice your Figma styles are named inconsistently: some use spaces, others use slashes, and some use dashes. What is the best way to fix this?

medium

A. Rename all styles to use slashes consistently for categories and subcategories.

B. Leave them as is because Figma accepts all formats.

C. Use spaces only because they look cleaner.

D. Use dashes only because they are shorter.

Solution

1. Step 1: Identify the recommended naming convention

   Figma recommends using slashes (/) to organize styles into categories and subcategories clearly.

2. Step 2: Apply consistent naming across all styles

   Renaming all styles to use slashes ensures easy navigation and reuse, avoiding confusion.

3. Final Answer:

   Rename all styles to use slashes consistently for categories and subcategories. -> Option A

4. Quick Check:

   Consistent slashes improve style organization [OK]

Hint: Fix inconsistent names by using slashes everywhere [OK]

Common Mistakes:

• Ignoring inconsistent naming
• Using spaces or dashes inconsistently
• Thinking Figma accepts all naming equally

5. You have these styles in Figma: Color/Primary/Light, Color/Primary/Dark, Color/Secondary/Light, Color/Secondary/Dark. You want to create a new style for a medium shade between light and dark for Primary colors only. What is the best naming convention to keep your styles organized?

hard

A. Primary/Color/Medium

B. Color/PrimaryMedium

C. Color/Primary/Medium

D. Color-Medium-Primary

Solution

1. Step 1: Follow existing naming pattern

   Current styles use the pattern Category/Subcategory/Variant with slashes.

2. Step 2: Insert new variant in the same subcategory

   Adding "Medium" as a variant under "Primary" keeps the naming consistent and organized.

3. Final Answer:

   Color/Primary/Medium -> Option C

4. Quick Check:

   Match existing pattern for new styles [OK]

Hint: Match existing slash pattern for new style names [OK]

Common Mistakes:

• Combining words without slashes
• Changing category order
• Using dashes instead of slashes