Lesson Note: Components, Assets, and Reusable Elements in Figma

Learning Objectives

By the end of this session, students will be able to:

1. Understand the concept of components and why they are essential in UI design.

2. Create and manage reusable UI elements in Figma.

3. Use the Assets panel to organize and access design elements.

4. Learn about variants and how they make components flexible.

5. Apply components to maintain consistency across designs.

1. Introduction to Components (10 mins)

• Components are reusable UI elements (e.g., buttons, cards, navbars) that help maintain consistency across projects.

• Any change made to the main component automatically updates all instances of it.

• Examples:

  • A button used across multiple screens.

  • A navigation bar repeated in different pages.

🔑 Key Point: Components save time and ensure design consistency.

2. Creating a Component (15 mins)

• Steps:

  1. Select an object/group of objects (e.g., a button).

  2. Right-click → Create Component OR use shortcut Ctrl + Alt + K (Windows) / Cmd + Option + K (Mac).

  3. The element turns purple (indicating it’s a component).

• Instances:

  • Drag copies of the component from the Assets Panel.

  • Changes to the master component reflect across all instances.

3. Assets Panel (10 mins)

• Located on the left sidebar in Figma.

• Stores components, icons, and reusable elements.

• You can search, filter, and drag components directly into your canvas.

• Helps keep designs organized across large projects.

4. Variants (20 mins)

• Variants allow you to bundle multiple versions of a component into one (e.g., Button: Primary, Secondary, Disabled).

• Example:

  • A button can have different states: default, hover, pressed, disabled.

• Steps:

  1. Create multiple button components.

  2. Select them → click Combine as Variants.

  3. Organize and label properties (e.g., “Type = Primary/Secondary”).

🔑 Key Point: Variants make components scalable and flexible.

5. Reusable Elements in Real Projects (15 mins)

• Components typically created in projects:

  • Buttons

  • Input fields / forms

  • Cards

  • Navigation bars

  • Icons

• Designers usually store these in a Design System / Component Library.

6. Hands-On Exercise (25 mins)

Task:

1. Create a button component with the following states:

   • Primary (Blue background, white text)

   • Secondary (Gray background, black text)

   • Disabled (Light gray background, faded text)

2. Use Variants to group them.

3. Drag and use the button in a mock screen design (e.g., login screen).

7. Review & Discussion (10 mins)

• Why are components important in design?

• Difference between master component vs. instance.

• How do variants improve design workflows?