Components and Interactive States

# CHAPTER 7

Components and Interactive States #

1. Introduction #

If you have a website with 50 pages, and each page has a blue "Submit" button, what happens when you want that button to turn dark blue when the user hovers their mouse over it? *The Amateur Approach:* You duplicate all 50 screens, change the button color on the duplicates, and draw 50 prototype arrows connecting them all. Your file collapses into chaos. *The Professional Approach:* You build the interaction directly into the DNA of the button itself. In this chapter, we will master Components and Interactive States. We will unlock the most powerful feature in modern prototyping—Figma's Interactive Components (Variants)—allowing us to build self-contained Hover states, Checkboxes, and Toggle Switches that function flawlessly across thousands of screens automatically.

2. Learning Objectives #

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

• Define the concept of "Variants" and Component-level architecture.

• Engineer self-contained Hover and Pressed states for primary buttons.

• Prototype working UI inputs (Checkboxes, Radio Buttons, Toggles).

• Reduce prototype screen count (and file complexity) by 90%.

• Understand the UX psychology of tactile micro-feedback.

3. The Power of Component Variants #

A "Component" is a master template of a UI element (e.g., A Button). If you change the Master, all copies across your file instantly update. A "Variant" is a different *state* of that exact same Component. The Standard Button Variants:

• Default: The normal, untouched button (e.g., Blue).

• Hover: The state when the mouse rests on it (e.g., Dark Blue).

• Pressed (Active): The state when the mouse clicks down (e.g., Navy Blue, slightly scaled down).

• Disabled: The state when it cannot be clicked (e.g., Light Gray).

4. Wiring "Interactive Components" #

Instead of wiring Screen A to Screen B, you wire Variant A to Variant B.

• The Setup: In Figma, you select the "Default" button variant. You switch to Prototype mode.

• The Noodle: You drag the prototype arrow directly from the "Default" button to the "Hover" button variant sitting right next to it.

• The Logic: You set the interaction to: While Hovering -> Change To -> Hover Variant.

• *The Magic:* Now, you can drag a copy of this button onto *any* of your 50 design screens. When you hit play, every single button will perfectly execute the hover interaction automatically. You did not have to wire a single screen.

5. Prototyping Tactile Inputs (Forms) #

Interactive components are mandatory for prototyping forms. If a user clicks a checkbox, they expect it to fill with a checkmark.

• The Checkbox Component: Create two variants: [Unchecked] (an empty gray square) and [Checked] (a blue square with a white checkmark icon).

• The Wiring: Wire Unchecked to Checked using On Click -> Change To. Wire Checked back to Unchecked so the user can toggle it off.

• This exact same logic applies to iOS Toggle Switches (sliding from gray/off to green/on) and Radio Buttons.

6. The UX Psychology of Micro-Feedback #

Why do we bother spending hours building these tiny interactions?

• Tactile Assurance: When a user clicks a button on a screen, and it visually depresses or changes color, it tells the human brain, "The system heard your command."

• If a user clicks a button and nothing happens visually for 3 seconds while the next page loads, they will panic and click it 5 more times, potentially breaking the database (e.g., double-charging their credit card). *Micro-interactions prevent user panic.*

7. Diagrams/Visual Suggestions #

*Visual Concept: The Button Variant Matrix* Provide a visual diagram of a Figma Component Set (the purple dashed box).

• Top Row (Primary Button): Four states shown side-by-side: [Default: Blue], [Hover: Dark Blue], [Pressed: Navy/Smaller], [Disabled: Gray].

• Bottom Row (Secondary Button): Four states shown side-by-side: [Default: Outline], [Hover: Light Gray Fill], etc.

• Show prototyping arrows looping between the Default, Hover, and Pressed states. Label: "Self-Contained Interaction DNA."

8. Best Practices #

• Smooth the Transitions: When wiring a Hover state on a button, do not set the animation to Instant. It feels harsh and jarring. Always set the animation to Smart Animate with a duration of 150ms to 200ms. This creates a buttery smooth color crossfade that feels incredibly premium to the user.

9. Common Mistakes #

• Duplicating Screens for Micro-Interactions: As stated in the introduction, the greatest mistake a beginner makes is designing a massive "Dashboard" screen, and then duplicating the entire screen just to show a tiny dropdown menu opening. *The Failure:* If the client asks you to change the dashboard title, you now have to change it on both screens. *The Fix:* Build the dropdown opening logic entirely inside an Interactive Component. Keep your main canvas clean.

10. Mini Project: Build a Working iOS Toggle Switch #

Let's engineer a complex piece of micro-logic.

1. 1. Variant 1 (Off State): Draw a pill shape (gray). Draw a small white circle (the "thumb") sitting inside the pill on the far left. Select both and turn them into a Component. Add a Variant.

1. 2. Variant 2 (On State): Change the pill color to bright Green. Move the white circle to the far right.

1. 3. The Wiring: Switch to Prototype mode.

1. 4. Drag a wire from Variant 1 to Variant 2. Logic: On Click -> Change To -> Variant 2. Animation: Smart Animate -> Ease Out -> 300ms.

1. 5. Drag a wire from Variant 2 back to Variant 1. Logic: On Click -> Change To -> Variant 1.

1. 6. The Test: Drag a copy of Variant 1 onto a blank iPhone frame. Hit play. Click the switch. The white circle slides perfectly to the right, and the background smoothly fades to green. You have reverse-engineered Apple's UX physics.

11. Practice Exercises #

1. 1. Define the concept of an "Interactive Component" (or Variant) in modern UI prototyping software. How does this feature drastically reduce the number of individual screens you must draw in your Figma file?

1. 2. Explain the UX psychology of "Tactile Assurance." Why is it absolutely critical to design an "Active/Pressed" state for a primary Call-to-Action button? What user behavior does it prevent?

12. MCQs with Answers #

13. Interview Questions #

• Q: A junior designer hands you a Figma file containing 50 identical screens, each one showing a slightly different button being hovered over. Walk me through how you would audit their file and introduce them to the concept of "Interactive Components."

• Q: Explain the structural anatomy of a Button Component Set. What are the 4 standard "States" (Variants) you must design and wire together to create a production-ready UI element?

• Q: Walk me through the exact visual and interaction logic required to prototype a working iOS-style "Toggle Switch" (On/Off) using Figma's Smart Animate feature.

14. FAQs #

Q: If I change the logic in the Main Component, do the copies update? A: Yes! That is the entire point. If you decide that the Hover state animation should be 300ms instead of 150ms, you change that setting *once* on the Master Component. Every single copy of that button across all 100 pages of your prototype instantly inherits the new animation logic.

15. Summary #

In Chapter 7, we unlocked the highest echelon of prototyping efficiency. We stopped wiring massive, clunky screens together to simulate tiny changes, and instead engineered self-contained Interaction DNA using Component Variants. We mastered the micro-interactions of Hover states, Checkboxes, and Toggle switches, utilizing the Change To logic to keep our design files clean and hyper-scalable. Most importantly, we understood the psychological necessity of these micro-animations, providing the user with the immediate, tactile feedback required to establish absolute trust in the digital system.

16. Next Chapter Recommendation #

We have built functional, tactile components. Now, we must master the fluid physics that connect them. Proceed to Chapter 8: Animations and Microinteractions.