Components (Reusable Elements)

Topics Covered in This Figma Tutorial:

Creating & Editing Components, Overriding Content in One Instance Vs. Globally Updating All Components, Detaching from a Component

Exercise Preview

Exercise Overview

Components are the backbone of efficient design systems. Whether you're maintaining consistency across a single project or building enterprise-scale design libraries, mastering components will dramatically improve your workflow efficiency. In this exercise, you'll learn how to create reusable elements like navigation bars and buttons that can be updated globally across your entire design—a fundamental skill that separates professional designers from beginners.

Creating a Component

1. In Figma, navigate to your file browser if you're not already there:

   • In the Desktop app: Click the Home tab (Mac users can also choose File > Open File Browser).
   • In the Web app: Click the Main menu button and choose Back to files.
2. To open a local file, click Import file (typically located near the top right).

3. Navigate to Desktop > Class Files > Figma Class > Pulse and double-click on Pulse—Ready for Components.fig to open it.

   You'll notice the Home Page frame features a nearly complete design. We've also begun work on additional screens, but they're intentionally incomplete. Our goal is to reuse the navigation bar from the Home Page across all screens. While copying and pasting might seem simpler, it creates maintenance nightmares—imagine updating a logo or menu item across dozens of screens manually. Components solve this by creating a single source of truth that propagates changes automatically.

4. Set your zoom to 100% by pressing Shift-0 for optimal precision during component creation.
5. Let's transform the navigation bar into a reusable component. Scroll to locate the black navigation bar at the top of the Home Page frame.
6. Carefully drag a selection around the entire navbar, ensuring both the black background and all navigation icons are selected.
7. In the toolbar's center section, click Create Component .
8. In the Layers panel, double-click on the auto-generated Component 1 name, replace it with nav, and press Return (Mac) or Enter (Windows) to confirm the change.

9. At the top of the left panel, click on Assets to switch panels.

   Your navbar component now appears here as a reusable asset. The Assets panel serves as your component library—think of it as your design system's inventory. While we can drag components directly from here, let's explore an alternative method that's often more efficient for larger projects.

10. Switch back to the Layers panel at the top of the left panel.

11. In the top toolbar, click on Resources .

    • In the popup panel, ensure you're viewing the Components tab.
    • Drag the nav component from this panel and drop it precisely at the top of the Autumn Collection frame.
12. Fine-tune the navbar's position so it snaps cleanly into the top-left corner of the frame.
13. Components also support standard copy-paste operations, which is often the fastest method. Select either navbar (the choice doesn't matter at this stage).
14. Copy the selected navbar using Cmd-C (Mac) or Ctrl-C (Windows).
15. Click on the Product Page frame's title (located at the frame's top-left corner) to select the destination frame.

16. Paste using Cmd-V (Mac) or Ctrl-V (Windows).

    Notice how Figma intelligently maintained the navbar's original position within the frame—this positional memory is invaluable when building consistent layouts across multiple artboards.

Now that we've created and distributed our component instances, let's explore how to make strategic edits that affect either individual instances or the entire component system.

Editing Components

Understanding the distinction between local modifications and global updates is crucial for maintaining design system integrity. This decision point—edit one instance or update all components—is where many designers make costly mistakes that can derail entire projects.

1. Click once on the navbar within the Autumn Collection frame to select it.
2. In the Layers panel, under Autumn Collection, observe that the nav icon displays as —this diamond symbol indicates you're working with an instance.
3. Now click once on the navbar within the Home Page frame.

4. This represents the original component we converted. In the Layers panel, under Home Page, notice the nav icon appears as

   • A Main Component displays this icon: (four-pointed shape)
   • An Instance displays this icon: (diamond shape)

   Critical principle: Modifications to the Main Component automatically update all instances throughout your design. This is the foundation of scalable design systems used by companies like Airbnb, Spotify, and Google.

5. Let's address a common UX issue: the search and shopping bag icons are too subtle in their current state. In the navbar on the Home Page, double-click on the gray search icon outline to select it. If you accidentally select the black background, you're now inside the component—simply click the search icon once more.
6. With the search icon selected, hold Shift and click on the shopping bag icon to select both elements simultaneously.
7. In the Design panel, under Layer, increase the Opacity from 50% to 100% for better visibility and accessibility compliance.
8. Observe the immediate global update—all navbar instances reflect this change instantly, demonstrating the power of component-based design.
9. Next, we'll improve the hamburger menu icon's prominence. Ensure you can clearly see the three-line menu icon on the left side of the Home Page navbar, and zoom in for precision.
10. If your previous selection is still active, you're already editing the component—simply click once on the menu icon to select the group. If you've deselected, double-click the menu icon to enter edit mode.
11. With the menu icon selected, drag the right handle to increase the width slightly, improving touch target accessibility.

12. To increase height proportionally, hold Option (Mac) or Alt (Windows) while dragging the bottom handle downward.

    Pro tip: The Option/Alt modifier resizes from the center point, maintaining visual balance—a technique essential for professional icon design.

13. Click on an empty area to deselect and observe your changes.

    Every navbar instance now features the enhanced menu icon, demonstrating how thoughtful component architecture scales design improvements across entire products.

With navigation components mastered, let's tackle one of the most frequently used UI elements in any interface: buttons. This next section will teach you advanced component techniques used in production design systems.

Making a Button Component: Overriding Content in One Instance Vs. Globally Updating All Instances

Button components showcase the true power of Figma's component system. We'll create a flexible button that adapts to different text lengths while maintaining consistent styling—exactly how design systems work at scale in companies like Netflix, Uber, and Slack.

1. On the Home Page, locate the Women button—the black square element that will serve as our component foundation.
2. Click once on the Women button to select the entire group (which contains both rectangle and text elements).
3. Ctrl-click (Mac) or Right-click (Windows) on the Women button and choose Create component from the context menu.
4. In the Layers panel, double-click on the auto-generated women button name, replace it with the more semantic button, and press Return (Mac) or Enter (Windows) to apply.
5. Now we'll create a companion button for the men's section. Hold Option (Mac) or Alt (Windows) while dragging the Women button to the right, positioning it over the men's photo. This modifier key creates a duplicate while preserving the original.
6. In the newly created copy, double-click on the text repeatedly until it becomes editable, then change Women to Men.
7. Click away from the Men button multiple times to fully deselect all elements.
8. Click once on the Men button to reselect it as a complete component instance.

9. Attempt to resize the width to make it narrower, aiming to match the visual spacing of the Women button.

   Notice how Figma intelligently handles the resize—the text remains crisp and properly formatted rather than being stretched or distorted. This smart resizing behavior is what makes Figma components superior to simple graphics.

10. Undo that manual adjustment using Cmd-Z (Mac) or Ctrl-Z (Windows).

    While manual resizing works, there's a more sophisticated approach using Auto Layout—a feature that creates truly responsive components that behave like modern CSS flexbox.

11. Select the Women button (our main component) to access its foundational properties.
12. In the Design panel, locate Auto layout and click the Plus (+) button to enable this powerful feature.
13. Observe how the Men button automatically adjusts its width to maintain consistent padding around the text—this is Auto Layout ensuring visual harmony across all instances.
14. Let's create a third button instance to demonstrate advanced constraint handling. From the Assets panel, drag the button component to a position below the email input field, near the existing buttons.

15. Double-click on the new button's text until it becomes editable, then change Women to Sign Up.

    Notice the button expanding from left to right—this default behavior isn't ideal for a centered call-to-action button that should remain visually balanced.

16. Undo the text change using Cmd-Z (Mac) or Ctrl-Z (Windows) to reset the button temporarily.
17. Click away from the button several times to deselect, then click once to reselect it cleanly.

18. In the Design panel, under Constraints, you'll see layout behavior controls:

    • The blue left line indicates left-edge constraint (fixed pixel distance from the frame's left side).
    • Click the center horizontal line (the middle of the plus sign, not the vertical line) to change the constraint. The center horizontal line should turn blue, indicating center alignment within the parent frame.
      

      

19. Now double-click on the button text until it's editable and change Women to Sign Up.

    Perfect! The button now expands symmetrically from its center point, maintaining visual balance—exactly how professional CTAs should behave.

20. With the Sign Up text still selected, we'll apply a local override that demonstrates instance-level customization.
21. In the Design panel, locate the Text section and click the ••• button at the bottom right.

22. In the Type details panel, find Case and click the AG button (representing all capitals transformation).

    This change affects only this specific instance—notice how the Women and Men buttons remain unchanged. This demonstrates the flexibility of component overrides for contextual variations.

23. Now we'll apply global improvements that enhance all button instances. Since the Women button is our Main Component, changes here will cascade to all instances.

24. Select the Women button to access the main component properties.

25. In the Design panel, locate the Corner radius field below the height (H) value, and set it to 10.

    Watch as all three buttons (Women, Men, and SIGN UP) instantly adopt rounded corners—this immediate propagation is the cornerstone of efficient design system maintenance.

26. Double-click on the Women text within the button to select it directly.
27. In the Design panel, change the font weight from Bold to Light for a more contemporary, accessible appearance.

28. Observe how this typography change applies to all button instances simultaneously, maintaining consistency across your interface.