Component-Based UI Development

1. The Core Concept: Main Components and Instances

At its heart, the component system is built on a simple but powerful relationship: the link between a main component and its instances.

• Main Component: This is the master version of your element (like a button or a card). It defines the element's structure and base properties. You can identify it by the four solid diamonds icon next to its name in the Layers panel.
• Instance: This is a linked copy of the main component that you place in your designs. You can create hundreds of instances from a single main component. You'll recognize an instance by its single, hollow diamond icon.

The magic is that any structural or property change made to the main component will automatically apply to all of its instances. This ensures absolute consistency across your designs.

Let's begin with a clear, text-based definition to solidify these terms.

The image below perfectly illustrates this concept. There is one "master" Button component, and from it, three unique instances have been created for different contexts.

2. Creating and Using Components in Figma

Now that you understand the "what" and "why," let's dive into the "how." Creating a component is simple. You design an element—let's say a button you've already set up with Auto Layout—and then convert it into a main component. From there, you can find it in your Assets panel and drag instances onto your canvas.

The official Figma channel has an excellent short video that walks through this entire fundamental workflow.

3. Customizing with Overrides

If every instance had to be identical to the main component, they wouldn't be very useful. The real power comes from overrides. An override is a customization you make to a specific property of an instance (like its text or color) without breaking its link to the main component.

This means you can have a single main button component but use instances of it with different text labels ("Log In," "Sign Up," "Learn More") and even different colors for different situations (e.g., a secondary button). However, you cannot change the underlying structure, like reordering or deleting layers within an instance.

Let's continue with the same video to see how overrides work in practice.

4. Practical Application: Componentizing Your Auto Layouts

It's time to put theory into practice. In the last lesson, you built a responsive button using Auto Layout. Let's take that skill and combine it with what you've just learned to create a truly reusable button component.

Follow these steps in your Figma practice file:

1. Create the Base Button:

   • Type out some text, for example, "Button Text."
   • Press Shift + A to add Auto Layout to the text layer.
   • In the Design panel, add a Fill color and adjust the horizontal and vertical padding to your liking.
   • Set a Corner Radius to make the corners rounded.

2. Create the Main Component:

   • Select your button frame.
   • Create a component by clicking the four-diamond "Create Component" icon in the top toolbar or by using the shortcut Cmd + Option + K (Mac) or Ctrl + Alt + K (Windows).
   • Notice its icon in the Layers panel changes to four solid diamonds. Let's rename it "Button / Primary".

3. Create and Override Instances:

   • It's best practice to keep your main components on a separate page (e.g., a "Components" page) and use instances in your designs. For now, you can just move the main component off to the side of your canvas.
   • Create three instances: You can do this by dragging the component from the Assets panel or by holding Option (Mac) / Alt (Windows) and dragging from the main component.
   • Text Override: Select the first instance and change its text to "Sign Up". Select the second and change it to "Get Started." Select the third and change it to "Learn More."
   • Color Override: Select the "Learn More" button. In the Fill section, change its color to a light grey. This is now a color override.

4. Test the Main Component Link:

   • Go back to your main component.
   • Change its Corner Radius to be more or less rounded.
   • Watch as all three instances update immediately.
   • Now, change the Fill color of the main component. Notice that the "Sign Up" and "Get Started" instances update, but the "Learn More" instance does not, because its color is being controlled by an override.

This exercise solidifies the relationship between Auto Layout, Components, and Overrides—a fundamental workflow for any UI designer.

Conclusion

Today you've unlocked a core pillar of professional design workflows. By converting your flexible layouts into reusable components, you've moved from creating individual elements to building a design system. This approach ensures consistency, saves enormous amounts of time, and makes managing large projects feasible—all skills that directly increase your value as a freelance designer.

Key Takeaways:

• Components Drive Efficiency: They are reusable "master" elements that ensure visual consistency across your projects.
• Main vs. Instance: The main component is the source of truth, identified by four solid diamonds. An instance is a linked copy, identified by a single hollow diamond.
• Changes Propagate: Modifying the main component updates all its instances instantly.
• Overrides Add Flexibility: You can customize properties like text and color on an instance without breaking its fundamental link to the main component.

Preview of the Next Lesson:

You've created a reusable button, but what happens when you need distinct variations? For example, a primary button, a secondary (outline) button, a small one, and a large one? Creating a separate main component for each is inefficient. In our next lesson, we will dive into Variants and Component Properties, powerful features that let you combine all these variations into a single, highly-organized, and easy-to-manage component set.