Multi-brand design systems in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Multi-brand Design Systems

Which of the following best describes the main advantage of using a multi-brand design system in a business intelligence dashboard environment?

A It allows multiple brands to share a single source of design components, ensuring consistency while enabling brand-specific customization.

B It forces all brands to use the exact same colors and fonts without any customization to save time.

C It requires creating separate design systems for each brand with no shared components.

D It eliminates the need for any brand-specific design considerations by using generic templates.

💡 Hint

Think about how design systems can balance consistency and flexibility across brands.

A multi-brand design system provides a shared foundation of components that can be customized per brand, maintaining consistency and efficiency.

❓ data_modeling

intermediate

Structuring Components for Multi-brand Systems

You are designing a multi-brand design system in Figma. Which data structure best supports managing shared components with brand-specific overrides?

A A flat list of components with separate copies for each brand.

B A hierarchical structure where base components are defined once and brand-specific variants inherit and override properties.

C Completely separate files for each brand with no shared components.

D A single component with all brand styles mixed together without separation.

💡 Hint

Consider how inheritance and overrides help reduce duplication.

Using a hierarchical structure with inheritance allows efficient reuse of base components while enabling brand-specific customization.

❓ visualization

advanced

Visualizing Brand Variants in a Dashboard

You want to create a dashboard visualization that dynamically switches color themes based on the selected brand in a multi-brand design system. Which approach is best?

A Create separate dashboards for each brand with hardcoded colors.

B Apply random colors to dashboard elements each time it loads.

C Use a single dashboard with theme variables that update colors dynamically based on brand selection.

D Use static images of dashboards for each brand and switch images on selection.

💡 Hint

Think about how to maintain one dashboard but change its look per brand.

Using theme variables allows one dashboard to adapt its colors dynamically, supporting multiple brands efficiently.

🔧 Formula Fix

advanced

Fixing Component Overrides in Multi-brand System

In your multi-brand design system, a button component's color override for Brand B is not applying correctly, and it shows Brand A's color instead. Which is the most likely cause?

A The override for Brand B is not linked properly and the base component color is used instead.

B Brand B's color override is correctly set but the component is hidden.

C Brand A's color is set as the default and Brand B's override is applied on top correctly.

D The button component does not support color overrides.

💡 Hint

Check how overrides are linked and applied in the design system.

If the override is not linked or applied properly, the base component's default color will show instead of the brand-specific color.

🎯 Scenario

expert

Scaling Multi-brand Design Systems for New Brands

Your company plans to add three new brands to an existing multi-brand design system. What is the best strategy to scale the system efficiently without duplicating effort?

A Copy one existing brand's design system and rename it for each new brand.

B Create new design systems from scratch for each new brand to ensure full customization.

C Use only the base brand's design system for all new brands without any customization.

D Extend the existing multi-brand system by adding new brand-specific overrides and shared components as needed.

💡 Hint

Think about reusing and extending existing assets to save time and maintain consistency.

Extending the existing system with new overrides and shared components allows efficient scaling while maintaining consistency and flexibility.

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