Multi-brand design systems in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a new component variant for a brand in a multi-brand design system.

Figma

component.setVariant('[1]')

Drag options to blanks, or click blank then click option'

AcolorPrimary

BbrandA

Cvariant1

DsizeLarge

Attempts:

3 left

💡 Hint

Common Mistakes

Using a style property like 'colorPrimary' instead of the brand variant.

Confusing size or variant names with brand names.

Setting the variant to the brand name like 'brandA' allows the component to switch styles for that brand.

2fill in blank

medium

Complete the code to apply the correct color style for a specific brand in the design system.

Figma

component.fillStyle = styles.get('[1]')

Drag options to blanks, or click blank then click option'

AtextColor

BprimaryColor

CbrandBColor

DbackgroundColor

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing generic color names instead of brand-specific ones.

Using text or background colors that are not brand-specific.

Using 'brandBColor' applies the color style specific to brand B in the multi-brand system.

3fill in blank

hard

Fix the error in the code to switch the component to the correct brand variant.

Figma

component.variant = '[1]'

Drag options to blanks, or click blank then click option'

AbrandC

BBrandC

Cbrand_c

Dbrand-c

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect casing like 'BrandC' or underscores/hyphens.

Assuming variant names are case-insensitive.

The variant name must exactly match the variant defined in the design system, which is 'brandC' with lowercase 'b' and uppercase 'C'.

4fill in blank

hard

Fill both blanks to correctly retrieve and apply the text style for brand A in the multi-brand system.

Figma

const textStyle = styles.get('[1]');
component.textStyle = [2];

Drag options to blanks, or click blank then click option'

AbrandAText

BtextStyle

CbrandBText

DbrandATextStyle

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up style names between brands.

Assigning the style name string directly instead of the variable.

First, get the 'brandAText' style from styles, then assign it to component.textStyle using the variable 'textStyle'.

5fill in blank

hard

Fill all three blanks to create a new component instance for brand B with the correct variant and color style.

Figma

const instance = component.createInstance();
instance.variant = '[1]';
instance.fillStyle = styles.get('[2]');
instance.textStyle = [3];

Drag options to blanks, or click blank then click option'

AbrandB

BbrandBColor

CtextStyle

DbrandA

Attempts:

3 left

💡 Hint

Common Mistakes

Using brand A names instead of brand B.

Confusing string literals with variables.

Not matching variant names exactly.

Create an instance, set its variant to 'brandB', apply the brand B color style, and assign the text style variable 'textStyle'.