Components and Variants in Figma

# CHAPTER 9

Components and Variants in Figma #

1. Introduction #

Imagine you are designing a 100-page e-commerce website. You meticulously design a beautiful blue "Add to Cart" button and copy/paste it 500 times across all 100 screens. The next day, the client calls: *"We changed our branding. Make all the buttons Green, and change the corners from rounded to sharp."* If you are a beginner, you will spend the next 6 hours manually clicking and editing 500 individual buttons. If you are a professional, you will click *one* button, change it to green, and instantly, all 500 buttons across the entire massive file will magically update themselves in one second. This incredible superpower is achieved through Figma Components. In this chapter, we will master the concept of reusable design elements. We will define Master Components versus Instances, explore the power of Nested Components, and organize complex UI states using Variants.

2. Learning Objectives #

By the end of this chapter, you will be able to:

• Define the difference between a Master Component and an Instance.

• Convert standard UI elements into reusable Figma Components.

• Globally update hundreds of UI elements by modifying a single Master Component.

• Override specific properties (like text) within an Instance without breaking the link.

• Utilize "Variants" to organize different states of a component (e.g., Hover, Disabled).

3. Master Components vs. Instances #

The Component system in Figma is based on a parent-child relationship. 1. The Master Component (The Parent): When you create a component, Figma outlines it in Purple with a 4-diamond icon. This is the master blueprint. Whatever happens to this master blueprint happens to all of its clones.

2. The Instance (The Child): If you copy and paste the Master Component, you create an Instance (it has a single hollow diamond icon).

• If you change the color of the Master from Blue to Green, *all the Instances instantly turn Green.*

• If you change the text size on the Master, *all Instances update.*

4. Overrides (Customizing the Child) #

If all Instances are exact clones of the Master, how do you have one button say "Log In" and another say "Sign Up"? Figma allows Overrides. You can click on a specific Instance and type new text into it. You can even change its color.

• *The Magic:* The Instance remembers its specific overrides (the new text), but it *remains linked* to the Master for everything else! If you change the Master's corner radius, the overridden Instance will still update its corners, while perfectly maintaining its custom "Log In" text.

5. Creating a Component #

Turning a design into a Component is incredibly simple:

1. 1. Select the Frame containing your fully designed button or card.

1. 2. Look at the very top-center of the Figma interface.

1. 3. Click the icon with the Four Diamonds (or press Ctrl + Alt + K).

1. 4. The bounding box turns Purple. You have successfully created a reusable Master Component! You can now find it in the Assets Panel (Left Sidebar) to drag and drop onto any screen.

6. Variants (Component States) #

A button isn't just one static thing. In a real app, a button has states:

• Default State: Blue.

• Hover State: Dark Blue (when the mouse is over it).

• Disabled State: Gray (when the user cannot click it).

Instead of creating three completely separate components, Figma uses Variants. Variants allow you to group all these states into a single, massive purple dashed box. When you drag an Instance of the button onto your screen, you can look at the Right Properties panel and simply use a dropdown menu to instantly switch the button from "Default" to "Hover" or "Disabled"!

7. Diagrams/Visual Suggestions #

*Visual Concept: The Component Parent-Child Link* Draw a large, purple box labeled Master Component: Blue Button. Draw arrows pointing from the Master down to three smaller boxes labeled Instance 1, Instance 2, and Instance 3.

• Instance 1 text says "Submit" (Showing a text override).

• Instance 2 text says "Cancel".

• Instance 3 text says "Learn More".

Draw a visual "update wave" radiating from the Master, turning all three instances Green simultaneously, despite them having different text. This clearly illustrates the concept of localized overrides vs. global inheritance.

8. Best Practices #

• Create a Dedicated "Components" Page: Never leave your Master Components scattered randomly across your design screens. It is incredibly easy to accidentally delete one, which will break the link for all its instances! Best practice dictates creating a dedicated Page in the Left Panel named ❖ Components. You physically store all Master blueprints there, and you only ever copy/paste *Instances* onto your actual design screens.

9. Common Mistakes #

• Detaching Instances: Beginners often get frustrated when they want to make a massive change to an Instance and the Master component restricts them. They right-click and select "Detach Instance" (Ctrl + Alt + B). This permanently severs the link to the Master, turning it back into a dumb, static frame. If the client asks for a color change tomorrow, this detached button will *not* update automatically. *Never detach an instance unless absolutely necessary!*

10. Mini Project: Build an Interactive Button Set #

Let's create a scalable button system.

1. 1. Draw a Button (Blue Fill, White Text "Submit").

1. 2. Select it and press Ctrl + Alt + K to make it a Master Component.

1. 3. Look at the Right Properties panel and click Properties > Variant.

1. 4. A large dashed purple box appears around your button.

1. 5. Inside the purple box, duplicate the button (Hold Alt/Option and drag down).

1. 6. Change the color of this second button to Dark Blue.

1. 7. Select the first button. In the right panel under "Current Variant," name it Default.

1. 8. Select the second button. Name it Hover.

1. 9. Go to the Assets Panel (Left side). Drag an instance of your button onto the canvas.

1. 10. Select the instance. On the right panel, use the dropdown to instantly toggle between Default and Hover!

11. Practice Exercises #

1. 1. Define the relationship between a Master Component and an Instance. What happens to the Instances if you drastically alter the shape of the Master Component?

1. 2. Explain the concept of a Text Override. If you change the text of an Instance, and then later change the font size on the Master Component, what happens to the Instance?

12. MCQs with Answers #

13. Interview Questions #

• Q: Explain the architectural necessity of Figma Components when designing an enterprise software application containing over 300 unique screens. What catastrophic workflow inefficiencies occur if a team designs 300 screens without utilizing Components?

• Q: Walk me through the concept of "Overrides" within a Figma Instance. Provide a specific example of properties you would absolutely override on a child instance (like a UI Card), and properties you would leave strictly tethered to the Master Component.

• Q: A junior designer continually uses the "Detach Instance" command because they feel restricted by the Master Component's constraints. Explain why this is a highly destructive habit that destroys design system integrity.

14. FAQs #

Q: Can I put a Component inside another Component? A: Yes! This is called a Nested Component, and it is how professional apps are built. You make a small Master Component for a "Heart Icon." Then, you place an instance of that Heart Icon inside a larger Master Component for an "Instagram Post Card." If you later update the Master Heart Icon to a Star, every Instagram Card in the entire file automatically updates to show a Star!

15. Summary #

In Chapter 9, we unlocked the true power of digital product design: scalable automation. We abandoned the exhausting, amateur practice of manual copy-pasting, embracing the parent-child inheritance logic of Figma Components. We learned to designate Master Components as the single source of truth, effortlessly propagating sweeping design changes across hundreds of screens in milliseconds. We utilized Overrides to customize individual Instances without severing their connection to the Master, and we organized complex interactive button states into elegant, dropdown-selectable Variants.

16. Next Chapter Recommendation #

Our components are reusable, but they are currently stupid. If we change a button's text from "Ok" to "Submit Application Now," the text will spill out of the button box! We must teach our components how to physically respond to their contents. Proceed to Chapter 10: Auto Layout Fundamentals.