Figma Components Overview Lecture

Introduction to Components

• Components are a core part of Figma's success.
• They represent reusable pieces of UI.
• Key features include creation, modification, and instances.

Demonstration

• Example: Button component and its instances.
• Components ensure consistency and save time in UI design.

Creating Components

• Identifying non-component objects (blue outline in Figma).
• Transforming objects into components:
  • Right-click and select "Create Component."
  • Shortcut: Option + Command + K.
• Once created, components have a purple outline and a four-diamond icon.

Components vs. Instances

• Main Component: The original, where changes are initiated.
• Instances: Copies of the main component.
• In the layers list, instances have a single diamond icon.
• To navigate to the main component from an instance, use the button labeled with the instance's name at the top right.

Modifying Components

• Changes to the main component reflect on instances.
• Example: Changing corner radius affects all instances.
• Overrides: Custom changes made to instances (e.g., text changes) that are preserved even when the main component changes.
• Overrides include changes to text, fills, strokes, and effects.

Managing Overrides

• Undoing overrides can be done via the instance menu:
  • Options: Reset all changes or specific properties like strokes.
• If a specific override (e.g., text) is made, it won't change with main component updates.

Workflow with Design Systems

• Making component changes based on instance context:
  • Use "Push overrides to main component" feature if the main component is in the same file.
  • This integrates instance changes into the main component for broader consistency.

Summary

• Components and instances are foundational to building and managing UI in Figma.
• Main components guide design consistency, while instances allow for flexibility.
• Overrides provide customization but require careful management.
• Next modules will cover more advanced aspects of component creation and use.

Conclusion

• Components are a building block of component libraries in Figma's design systems.
• More ways to build and utilize components to be covered in future lectures.