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.

Practice

1. What is the main benefit of using a design system in product design?

easy

A. It helps reuse components to speed up design.

B. It increases the number of unique colors used.

C. It makes the product design more complex.

D. It removes the need for any collaboration.

Solution

1. Step 1: Understand design system purpose

   A design system is created to reuse components and speed up the design process.

2. Step 2: Compare options

   Only It helps reuse components to speed up design. correctly states the main benefit of speeding up design by reusing components.

3. Final Answer:

   It helps reuse components to speed up design. -> Option A

4. Quick Check:

   Design systems speed up design = B [OK]

Hint: Focus on reuse and speed benefits of design systems [OK]

Common Mistakes:

• Thinking design systems increase complexity
• Believing design systems reduce collaboration
• Confusing color variety with design system purpose

2. Which of the following is the correct way to describe a design system in Figma?

easy

A. A set of reusable components and styles.

B. A collection of unrelated images and icons.

C. A random assortment of colors.

D. A single static image used in all designs.

Solution

1. Step 1: Define design system in Figma

   In Figma, a design system is a set of reusable components and styles to keep consistency.

2. Step 2: Eliminate incorrect options

   Options B, C, and D describe unrelated or static elements, not a system of reusable parts.

3. Final Answer:

   A set of reusable components and styles. -> Option A

4. Quick Check:

   Reusable components = A [OK]

Hint: Remember design systems are reusable parts, not random items [OK]

Common Mistakes:

• Confusing design systems with random images
• Thinking design systems are single images
• Ignoring the reuse and style aspect

3. In a team using a design system, what is the expected result when a button component is updated in the system?

medium

A. No buttons change unless manually edited.

B. Only new buttons created after update change.

C. The design system breaks and stops working.

D. All buttons in the product update automatically.

Solution

1. Step 1: Understand component update behavior

   When a component in a design system is updated, all instances of that component update automatically.

2. Step 2: Analyze options

   All buttons in the product update automatically. correctly states this automatic update. Options A and B are incorrect because they imply manual updates or partial changes. The design system breaks and stops working. is incorrect as updates do not break the system.

3. Final Answer:

   All buttons in the product update automatically. -> Option D

4. Quick Check:

   Component update = automatic change [OK]

Hint: Component updates reflect everywhere instantly [OK]

Common Mistakes:

• Thinking updates affect only new components
• Believing manual edits are needed after update
• Assuming system breaks on update

4. A designer notices inconsistent button styles across screens despite using a design system. What is the most likely cause?

medium

A. The colors in the design system are random.

B. The design system automatically updates all buttons.

C. They used local copies instead of components from the design system.

D. The design system does not support buttons.

Solution

1. Step 1: Identify cause of inconsistency

   Inconsistent styles usually happen if designers use local copies instead of linked components from the design system.

2. Step 2: Evaluate options

   They used local copies instead of components from the design system. correctly identifies this cause. The design system automatically updates all buttons. is false because automatic updates prevent inconsistency. The design system does not support buttons. is unlikely as design systems include buttons. The colors in the design system are random. is irrelevant to style consistency.

3. Final Answer:

   They used local copies instead of components from the design system. -> Option C

4. Quick Check:

   Local copies cause inconsistency = D [OK]

Hint: Check if components are linked or local copies [OK]

Common Mistakes:

• Assuming design system updates cause inconsistency
• Thinking design systems exclude buttons
• Blaming random colors for style issues

5. A product team wants to speed up design and keep consistent branding across multiple apps. How should they best use a design system in Figma?

hard

A. Design each app separately with unique styles for flexibility.

B. Create reusable components and shared styles, then enforce their use across all apps.

C. Use only images and icons without components.

D. Avoid using any design system to save time.

Solution

1. Step 1: Identify best practice for scaling design

   To speed up design and keep branding consistent, teams create reusable components and shared styles in a design system.

2. Step 2: Analyze options for team approach

   Create reusable components and shared styles, then enforce their use across all apps. describes this best practice. Design each app separately with unique styles for flexibility. sacrifices consistency. Use only images and icons without components. ignores components. Avoid using any design system to save time. contradicts the goal of saving time.

3. Final Answer:

   Create reusable components and shared styles, then enforce their use across all apps. -> Option B

4. Quick Check:

   Reusable components + shared styles = A [OK]

Hint: Use shared components and styles for consistency and speed [OK]

Common Mistakes:

• Designing apps separately losing consistency
• Ignoring components in favor of images
• Avoiding design systems to save time