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.

Practice

1. What is the main reason to organize components in a Figma library by type or function?

easy

A. To make it easier for users to find and reuse components quickly

B. To increase the file size of the library

C. To make components look more colorful

D. To prevent users from editing components

Solution

1. Step 1: Understand component organization purpose

   Organizing by type or function groups similar components together logically.

2. Step 2: Identify benefit for users

   This grouping helps users find components faster and reuse them efficiently.

3. Final Answer:

   To make it easier for users to find and reuse components quickly -> Option A

4. Quick Check:

   Organizing by type/function = easier reuse [OK]

Hint: Group similar components to find them faster [OK]

Common Mistakes:

• Thinking organization increases file size
• Believing organization changes component colors
• Assuming organization restricts editing

2. Which of the following is the correct way to name components in a Figma library for clarity?

easy

A. Component123

B. Btn1

C. Button/Primary/Default

D. MyComponent

Solution

1. Step 1: Review naming conventions

   Clear names use categories and states separated by slashes for easy browsing.

2. Step 2: Compare options

   Button/Primary/Default uses descriptive hierarchy, others are vague or unclear.

3. Final Answer:

   Button/Primary/Default -> Option C

4. Quick Check:

   Clear, consistent names = Button/Primary/Default [OK]

Hint: Use slashes to separate categories in names [OK]

Common Mistakes:

• Using short codes like Btn1
• Using generic names like Component123
• Using personal names like MyComponent

3. Given a Figma library with components named as Icon/Small/Active, Icon/Small/Inactive, and Icon/Large/Active, which component will appear first when sorted alphabetically?

medium

A. Icon/Large/Active

B. Icon/Small/Active

C. Icon/Small/Inactive

D. Icon/Active/Small

Solution

1. Step 1: Understand alphabetical sorting

   Sorting compares strings from left to right character by character.

2. Step 2: Compare component names

   "Icon/Large/Active" comes before "Icon/Small/Active" because "Large" starts with 'L' which is before 'S' in "Small".

3. Final Answer:

   Icon/Large/Active -> Option A

4. Quick Check:

   Alphabetical order = Icon/Large/Active first [OK]

Hint: Sort by first differing word alphabetically [OK]

Common Mistakes:

• Ignoring alphabetical order and picking Small first
• Confusing order of words in names
• Choosing a name not in the list

4. You notice your Figma component library is hard to browse because many components have inconsistent naming like BtnPrimary, button_secondary, and BTN-Tertiary. What is the best way to fix this?

medium

A. Delete all components and start over

B. Add random numbers to each component name

C. Leave names as they are to avoid confusion

D. Rename all components using a consistent naming pattern like Button/Primary

Solution

1. Step 1: Identify the problem

   Inconsistent naming makes browsing and finding components difficult.

2. Step 2: Apply consistent naming

   Renaming with a clear pattern like "Button/Primary" improves clarity and organization.

3. Final Answer:

   Rename all components using a consistent naming pattern like Button/Primary -> Option D

4. Quick Check:

   Consistent naming fixes browsing issues [OK]

Hint: Use one naming style for all components [OK]

Common Mistakes:

• Deleting components unnecessarily
• Keeping inconsistent names
• Adding confusing numbers

5. You are building a Figma component library for a large project with buttons, icons, and forms. How should you organize the library to keep it simple and easy to browse for your team?

hard

A. Put all components in one folder with random names

B. Create folders for each component type and use clear names like Button/Primary, Icon/Small, and Form/Input

C. Use only colors to differentiate components without naming

D. Create separate files for each component without naming conventions

Solution

1. Step 1: Organize by component type

   Grouping components by type (buttons, icons, forms) helps users find them easily.

2. Step 2: Use clear, consistent names

   Names like "Button/Primary" clearly describe the component and its purpose.

3. Step 3: Keep library simple and browsable

   Folders and naming reduce clutter and improve navigation for the team.

4. Final Answer:

   Create folders for each component type and use clear names like Button/Primary, Icon/Small, and Form/Input -> Option B

5. Quick Check:

   Folders + clear names = simple, easy browsing [OK]

Hint: Group by type and name clearly for easy browsing [OK]

Common Mistakes:

• Mixing all components without folders
• Using colors only without names
• Splitting components into many files without naming