Why components enable consistency in Figma - Business Case Study

Scenario Mode

👤 Your Role: You are a UI/UX designer working with a product team

📋 Request: Your manager wants you to explain why using components in Figma helps keep designs consistent across the product

📊 Data: You have access to a Figma file with multiple screens and repeated UI elements like buttons, headers, and cards

🎯 Deliverable: Create a simple Figma prototype showing how components keep design consistent and prepare a short explanation for your team

Sample Data

Screen	Button Text	Button Color	Header Font Size
Login	Sign In	Blue	24px
Signup	Create Account	Blue	24px
Dashboard	Submit	Blue	24px
Settings	Save	Blue	24px
Profile	Edit	Blue	24px

1

Step 1: Create a button component in Figma with blue background, white text, and 16px padding

Select a rectangle, set fill color to blue (#0000FF), add text 'Button' in white, group them, then create component (Right-click > Create Component)

Expected Result

A reusable button component with consistent style is created

2

Step 2: Replace all individual buttons on different screens with instances of the button component

Select each button on Login, Signup, Dashboard, Settings, Profile screens, delete them, then drag instances of the button component from Assets panel

Expected Result

All buttons across screens use the same component instance ensuring uniform style

3

Step 3: Create a header text component with font size 24px and consistent font family

Add text element with font size 24px, choose font family (e.g., Roboto), create component

Expected Result

Header text component is ready to use on all screens

4

Step 4: Replace all headers on screens with instances of the header component

Remove existing headers, add header component instances in their place

Expected Result

All headers have consistent font size and style

5

Step 5: Demonstrate updating the button color in the main component to green and observe changes on all instances

Select button component, change fill color to green (#008000)

Expected Result

All button instances on all screens update automatically to green, showing consistency

6

Step 6: Prepare a short explanation for your team about how components save time and keep design consistent

Explain that components let you change one master element and update all copies, avoiding mistakes and saving effort

Expected Result

Team understands the value of components for consistent design

Final Result

-----------------------------
|       BUTTON (Green)       |
-----------------------------

Screens:
- Login: Button 'Sign In'
- Signup: Button 'Create Account'
- Dashboard: Button 'Submit'
- Settings: Button 'Save'
- Profile: Button 'Edit'

Headers all use 24px font size

All buttons and headers update instantly when main component changes

✓Using components ensures all buttons and headers look the same across screens

✓Changing the main component updates all instances automatically

✓This saves time and reduces errors in design

✓Components help keep the product visually consistent and professional

Bonus Challenge

Create a variant of the button component for a disabled state with grey color and show how switching variants keeps consistency

Show Hint

Use Figma's Variants feature to add a 'Disabled' state with grey fill and toggle it on button instances