Style organization and naming conventions in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use consistent style naming in BI dashboards?

Imagine you are designing a BI dashboard with many charts and tables. Why is it important to use consistent style names for colors, fonts, and spacing?

A It makes the dashboard load faster in the browser.

B It helps everyone understand and update the dashboard easily.

C It automatically improves the data accuracy.

D It reduces the number of charts needed.

💡 Hint

Think about teamwork and future changes.

Consistent style naming helps team members quickly find and update styles, keeping the dashboard uniform and easier to maintain.

❓ data_modeling

intermediate

Organizing color styles for a sales dashboard

You have three main categories: Revenue, Costs, and Profit. How should you organize color styles in Figma for these categories to keep your BI dashboard clear and scalable?

A Create color styles only for Revenue and ignore others.

B Use random colors for each chart without naming.

C Use one color style for all categories.

D Create separate color styles named Revenue/Primary, Costs/Primary, Profit/Primary.

💡 Hint

Think about clarity and future additions.

Organizing color styles by category with clear names helps keep the dashboard consistent and easy to update when new categories appear.

❓ visualization

advanced

Best practice for naming text styles in BI reports

Which naming convention below best supports accessibility and easy updates for text styles in BI reports?

A TextA, TextB, TextC

B Style1, Style2, Style3

C Heading/Large/Bold, Body/Medium/Regular, Caption/Small/Italic

D BigText, NormalText, SmallText

💡 Hint

Think about what information the name gives you.

Using descriptive names with role, size, and weight helps users understand and apply text styles consistently and supports accessibility.

🔧 Formula Fix

advanced

Identify the problem in this style naming approach

A BI team uses these color style names: 'Blue1', 'Blue2', 'Blue3' for different revenue charts. What is the main issue with this naming?

A The names do not describe the purpose or usage of the colors.

B The colors are not blue enough.

C The names use numbers which is not allowed in Figma.

D The names are too long and complex.

💡 Hint

Think about how easy it is to know what each color means.

Using generic names like 'Blue1' does not tell users what the color is for, making it hard to maintain and causing confusion.

🎯 Scenario

expert

Designing a scalable style system for a multi-dashboard BI project

You are leading a BI project with multiple dashboards for different departments. How should you organize and name your styles in Figma to ensure easy updates and consistency across all dashboards?

A Create a shared style library with clear category-based names and version control.

B Create separate style sets for each dashboard with no shared naming.

C Use default Figma styles without renaming or organizing.

D Create styles only for the first dashboard and copy them manually to others.

💡 Hint

Think about teamwork, updates, and consistency.

A shared style library with clear names and version control allows all dashboards to stay consistent and makes updates efficient across the project.