Why design systems scale product design in Figma - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a reusable button component in Figma's design system.

Figma

component Button {
  width: 100px;
  height: 40px;
  background-color: [1];
  border-radius: 4px;
}

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

A16px

B#007AFF

Csolid

Dcenter

Attempts:

3 left

💡 Hint

Common Mistakes

Using a size value instead of a color for background-color.

Using alignment or border style instead of color.

The background color of the button should be a hex color code like #007AFF to style it properly.

2fill in blank

medium

Complete the code to apply consistent padding inside a card component.

Figma

component Card {
  padding: [1];
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

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

A50%

B5px

C16px

Dnone

Attempts:

3 left

💡 Hint

Common Mistakes

Using too small padding like 5px which looks cramped.

Using percentage or 'none' which are invalid for padding here.

Padding of 16px is a common spacing value in design systems to maintain consistency.

3fill in blank

hard

Fix the error in the code to correctly define a text style in the design system.

Figma

textStyle Heading {
  font-family: 'Roboto', sans-serif;
  font-weight: [1];
  font-size: 24px;
  line-height: 32px;
}

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

Alight

Bnormal

Cbold

D700

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'bold' keyword which might not be supported in all design tools.

Using 'light' or 'normal' which do not represent bold weight.

Font-weight in design systems is often defined using numeric values like 700 for bold.

4fill in blank

hard

Fill both blanks to create a scalable grid layout in the design system.

Figma

layout Grid {
  columns: [1];
  gap: [2];
  width: 100%;
}

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

A12

B8px

C16px

D6

Attempts:

3 left

💡 Hint

Common Mistakes

Using too few columns like 6 which limits layout flexibility.

Using gap values that are too small or not in pixels.

A 12-column grid with 16px gap is a common standard for responsive design systems.

5fill in blank

hard

Fill all three blanks to define a responsive button with hover effect in the design system.

Figma

component Button {
  background-color: [1];
  padding: [2];
  &:hover {
    background-color: [3];
  }
}

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

A#005BBB

B12px 24px

C#003F7F

D16px

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same color for base and hover which gives no visual feedback.

Using padding with only one value or invalid units.

The button uses a base blue color #005BBB, padding of 12px 24px for comfortable size, and a darker blue #003F7F on hover for clear feedback.