Multi-brand design systems in Figma - Dashboard Guide

Dashboard Mode - Multi-brand design systems

Dashboard Goal

This dashboard helps design teams track and compare the usage and consistency of design components across multiple brands within a company. It answers: Which brand uses which components most? Are there any inconsistencies in component usage?

Sample Data

Brand	Component	Usage Count	Consistency Score (%)
Brand A	Button	120	95
Brand A	Card	80	90
Brand B	Button	150	88
Brand B	Card	60	85
Brand C	Button	100	92
Brand C	Card	90	93
Brand C	Modal	40	89

Dashboard Components

• KPI Card: Total Usage per Brand
  Formula: Sum of Usage Count grouped by Brand.
  Example: Brand A total usage = 120 + 80 = 200
• Bar Chart: Component Usage by Brand
  Shows Usage Count for each Component per Brand.
  X-axis: Components, Y-axis: Usage Count, Color: Brand
• Table: Consistency Scores
  Lists each Brand and Component with their Consistency Score (%)
  Helps identify components with low consistency
• Filter: Brand Selector
  Allows selecting one or multiple brands to filter all visuals

Dashboard Layout

+----------------------+--------------------------+
|  KPI Cards (Brands)  |  Brand Selector Filter    |
|  [Total Usage]       |  [Dropdown: Brand A,B,C] |
+----------------------+--------------------------+
|                                              |
|      Bar Chart: Component Usage by Brand     |
|                                              |
+----------------------------------------------+
|                                              |
|           Table: Consistency Scores           |
|                                              |
+----------------------------------------------+

Interactivity

The Brand Selector filter controls which brands appear in the KPI cards, bar chart, and consistency table. Selecting one brand updates all visuals to show data only for that brand. Selecting multiple brands shows combined data. This helps users focus on specific brands or compare multiple brands side by side.

Self Check

If you add a filter to select only Brand B, which components update?

• KPI Cards show total usage only for Brand B (Button: 150 + Card: 60 = 210)
• Bar Chart shows usage counts for Brand B components only
• Consistency Table shows consistency scores for Brand B components only

Key Result

Dashboard showing component usage and consistency across multiple brands with brand filter.

Practice

1. What is the main purpose of a multi-brand design system in Figma?

easy

A. To create only one brand design without variations

B. To avoid using components and design everything from scratch

C. To store unrelated design files separately

D. To manage multiple brands using shared components and styles in one place

Solution

1. Step 1: Understand multi-brand design system purpose

   It is designed to handle multiple brands efficiently by sharing components and styles.

2. Step 2: Compare options with this purpose

   Only To manage multiple brands using shared components and styles in one place describes managing multiple brands with shared components and styles.

3. Final Answer:

   To manage multiple brands using shared components and styles in one place -> Option D

4. Quick Check:

   Multi-brand design system = Manage multiple brands [OK]

Hint: Think: one system, many brands, shared parts [OK]

Common Mistakes:

• Confusing single-brand with multi-brand systems
• Ignoring shared components concept
• Thinking design files must be separate

2. Which syntax correctly defines a component variant for different brands in Figma?

easy

A. Component { variant: 'brandA' }

B. Component { variants: ['brandA', 'brandB'] }

C. Component.variant('brandA')

D. Component.variant = 'brandA'

Solution

1. Step 1: Recall Figma variant syntax

   Variants are defined as a list inside the component, e.g., variants: ['brandA', 'brandB'].

2. Step 2: Check options for correct syntax

   Only Component { variants: ['brandA', 'brandB'] } correctly shows variants as a list inside the component definition.

3. Final Answer:

   Component { variants: ['brandA', 'brandB'] } -> Option B

4. Quick Check:

   Variants list syntax = Component { variants: ['brandA', 'brandB'] } [OK]

Hint: Variants are arrays inside component braces [OK]

Common Mistakes:

• Using dot notation incorrectly
• Assigning variant as a single string
• Calling variant like a function

3. Given a multi-brand design system with shared button components having variants 'brandA' and 'brandB', what happens if you change the primary color in the shared style?

medium

A. The primary color updates for all brands using that shared style

B. Only brandA buttons update, brandB stays the same

C. No buttons update until you manually change each variant

D. The shared style breaks and components lose color

Solution

1. Step 1: Understand shared styles in multi-brand systems

   Shared styles apply changes globally to all components using them.

2. Step 2: Apply this to button variants

   Changing the primary color in the shared style updates all variants using that style.

3. Final Answer:

   The primary color updates for all brands using that shared style -> Option A

4. Quick Check:

   Shared style change = global update [OK]

Hint: Shared styles update all linked variants automatically [OK]

Common Mistakes:

• Thinking variants are independent of shared styles
• Assuming manual update needed per variant
• Believing style changes break components

4. You notice that after adding a new brand variant to a button component, the variant does not appear in the component dropdown. What is the most likely cause?

medium

A. The new variant was not properly added to the component set

B. The component set was deleted accidentally

C. The Figma file is corrupted and needs repair

D. Variants only show after restarting Figma

Solution

1. Step 1: Check how variants appear in Figma

   Variants must be added inside the component set to appear in dropdown.

2. Step 2: Identify common mistakes

   If variant is missing, it usually means it was not added correctly to the set.

3. Final Answer:

   The new variant was not properly added to the component set -> Option A

4. Quick Check:

   Missing variant = not added to set [OK]

Hint: Add variants inside component set to see them [OK]

Common Mistakes:

• Assuming file corruption without checking variant setup
• Restarting Figma unnecessarily
• Deleting component sets accidentally

5. You want to create a multi-brand design system that supports three brands with unique color palettes but shared button shapes and sizes. What is the best approach to organize your Figma components and styles?

hard

A. Use only one brand's colors and ignore others to simplify design

B. Create separate button components for each brand with duplicated shapes and sizes

C. Create one button component with color variants for each brand and shared shape and size styles

D. Create button components without variants and manually change colors each time

Solution

1. Step 1: Identify shared and unique elements

   Button shapes and sizes are shared; colors differ by brand.

2. Step 2: Use variants for brand colors

   Create one button component with color variants for each brand to avoid duplication.

3. Step 3: Apply shared styles for shape and size

   Use shared styles for shape and size to keep consistency and easy updates.

4. Final Answer:

   Create one button component with color variants for each brand and shared shape and size styles -> Option C

5. Quick Check:

   Variants for colors + shared styles for shape = Create one button component with color variants for each brand and shared shape and size styles [OK]

Hint: Use variants for colors, shared styles for shape and size [OK]

Common Mistakes:

• Duplicating components for each brand causing maintenance issues
• Ignoring variants and manual color changes
• Mixing unrelated styles causing confusion