Component library organization in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UI/UX designer at a growing software company.

📋 Request: Your manager wants you to organize the existing Figma components into a clear, reusable component library to improve design consistency and speed up the design process.

📊 Data: You have a Figma file with 50+ components including buttons, input fields, icons, and cards. Currently, they are scattered across multiple pages without naming conventions or grouping.

🎯 Deliverable: Create a well-structured Figma component library with clear naming, grouping by categories, and usage guidelines.

Sample Data

Component Name	Type	Current Page	Usage Count
Button Primary	Button	Page 1	15
Button Secondary	Button	Page 2	10
Input Text	Input Field	Page 1	20
Input Password	Input Field	Page 3	5
Icon Search	Icon	Page 2	12
Icon Close	Icon	Page 3	8
Card Product	Card	Page 1	7
Card Profile	Card	Page 2	6
Button Tertiary	Button	Page 3	3
Input Email	Input Field	Page 2	9

1

Step 1: Create a new Figma file named 'Component Library'.

In Figma, click 'File' > 'New File', then rename it to 'Component Library'.

Expected Result

A new blank Figma file named 'Component Library' is ready for organizing components.

2

Step 2: Import all existing components from the scattered pages into the new file.

Use 'Assets' panel to drag and drop or copy-paste components from original files into 'Component Library'.

Expected Result

All 50+ components are present in the new file.

3

Step 3: Group components by type into separate pages named: Buttons, Input Fields, Icons, Cards.

Create four pages in the file and move components accordingly: Buttons page for all buttons, Input Fields page for inputs, etc.

Expected Result

Components are organized into four pages by category.

4

Step 4: Rename components using a consistent naming convention: Category / Component Name / State (if applicable).

Example: 'Button / Primary / Default', 'Input Field / Email / Focused'.

Expected Result

All components have clear, consistent names that show category and state.

5

Step 5: Create a 'Usage Guidelines' page with text instructions on how and when to use each component.

Add text boxes describing usage scenarios for Buttons, Inputs, Icons, and Cards.

Expected Result

Designers can read guidelines to understand component purposes.

6

Step 6: Publish the component library as a Team Library in Figma for easy access by all designers.

Click 'Assets' panel > 'Library' icon > 'Publish' to share the library with the team.

Expected Result

The component library is available for all team members to use in their designs.

Final Result

-----------------------------------------
|           COMPONENT LIBRARY            |
|---------------------------------------|
| Pages:                                |
| 1. Buttons                           |
|    - Button / Primary / Default      |
|    - Button / Secondary / Hover      |
| 2. Input Fields                      |
|    - Input Field / Email / Focused   |
|    - Input Field / Password / Default|
| 3. Icons                            |
|    - Icon / Search                   |
|    - Icon / Close                    |
| 4. Cards                            |
|    - Card / Product                  |
|    - Card / Profile                  |
| 5. Usage Guidelines                 |
|    - Text instructions for usage    |
-----------------------------------------

✓Organizing components by category improves findability.

✓Consistent naming helps designers understand component purpose quickly.

✓Usage guidelines reduce design errors and speed up design work.

✓Publishing as a Team Library ensures everyone uses the same components.

Bonus Challenge

Add variants to components to handle different states (e.g., hover, disabled) within the same component set.

Show Hint

Use Figma's Variants feature to group related states under one component for easier switching.