Components (Reusable Elements)

Topics Covered in This Adobe XD Tutorial:

Mastering component creation and editing, implementing targeted content overrides versus global component updates, detaching components when needed, and understanding the strategic differences between components and repeat grids

Exercise Preview

Exercise Overview

Efficient design systems depend on reusable components that can be updated globally across entire projects. In this exercise, you'll master Adobe XD's component system (formerly called symbols) to build scalable design elements like navigation bars and buttons that maintain consistency while allowing for strategic customization. This approach dramatically reduces maintenance overhead and ensures design coherence across complex projects.

Creating a Component

1. In Adobe XD, navigate to File > Open from Your Computer or use the keyboard shortcut Cmd–Shift–O (Mac) or CTRL–Shift–O (Windows).

2. Browse to Desktop > Class Files > Adobe XD Class > Pulse and double–click Pulse—Ready for Components.xd to open the file.

   You'll notice the Home Page artboard contains a nearly complete design, while the other artboards have partial content that needs finishing. The navigation bar at the top represents a perfect candidate for componentization—rather than copying and pasting it across artboards (which would require manual updates in multiple locations), we'll create a linked component system that updates universally when modified.

3. Access the Libraries panel by clicking the icon in the bottom left corner of the interface.
4. Observe that the Libraries panel currently shows no existing components—we'll be building our component library from scratch.
5. Set your view to 100% zoom using Cmd–1 (Mac) or CTRL–1 (Windows) for optimal working precision.
6. Locate the black navigation bar positioned at the top of the Home Page artboard. This element will serve as our first reusable component.
7. Create a selection around the entire navbar, ensuring you capture both the black background and all interactive icons within it.
8. Convert the selection into a component by clicking the + button next to Components in the Libraries panel.
9. Notice the new component appears in the Libraries panel with a generic identifier that we should customize for better organization.

10. Double–click the Component 1 name, replace it with nav, and press Return (Mac) or Enter (Windows) to confirm the change.

    NOTE: When viewing components in grid mode, names only appear on hover—keep this in mind when organizing larger component libraries.

11. Deploy the component by dragging it from the Libraries panel directly onto the Autumn Collection artboard.
12. Position the navbar so it snaps precisely to the top-left corner of the artboard, maintaining consistent placement.
13. Demonstrate an alternative deployment method by selecting either navbar instance (the source doesn't matter for this operation).
14. Copy the selected component using Cmd–C (Mac) or CTRL–C (Windows).
15. Click on the Product Page artboard to set it as your target.

16. Paste using Cmd–V (Mac) or CTRL–V (Windows). Notice how XD intelligently remembers the positioning, maintaining visual consistency across artboards.

Now that we've established our component system, let's explore how to make strategic edits that either affect all instances globally or customize individual components locally.

Editing Components

Understanding the distinction between global and local component editing is crucial for maintaining design system integrity while allowing necessary customizations.

1. Select the navbar on the Autumn Collection artboard with a single click.
2. Examine the selection handles: notice that most corners display white circular resize handles, while the top-left shows a distinctive diamond shape—this diamond indicates you're working with a component instance.
3. Now select the navbar on the Home Page artboard and observe the handle differences.

4. This original element displays a solid green diamond in the top-left corner, identifying it as the Main Component. This is the master version—any changes made here will cascade to all component instances throughout your project.

   Understanding this hierarchy is essential: the Main Component (solid green diamond) controls global updates, while instances (hollow white diamonds) can receive individual customizations that won't affect other instances.

5. The search and shopping bag icons need visual adjustment—they're currently too subdued. Double–click the gray search icon outline in the Home Page navbar. If you accidentally select the background, you're now inside the component, so simply click the search icon again.
6. With the search icon selected, hold Shift and click the shopping bag icon to select both elements simultaneously.
7. In the Property Inspector's Appearance section, adjust the Opacity to 100% for better visibility.
8. Observe how this change instantly propagates across all navbar instances—this demonstrates the power of component-based design systems.
9. Let's enhance the hamburger menu icon (the three-line menu indicator) on the navbar's left side. Increase your zoom to 200% using Cmd–2 (Mac) or CTRL–2 (Windows) for precise editing.
10. Navigate to the hamburger menu icon in the Home Page navbar.
11. If you still have other icons selected, you're already in component edit mode—simply click the menu icon once. Otherwise, double–click to enter the component.
12. With the menu icon selected, drag the right-middle handle outward to increase width proportionally.

13. To increase height while maintaining center alignment, hold Option (Mac) or ALT (Windows) and drag the bottom-middle handle downward.

    NOTE: The Option/ALT modifier key enables center-point scaling, maintaining visual balance during resize operations.

14. Click an empty canvas area to deselect and observe your changes across all component instances.

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

Button components showcase the sophisticated balance between reusability and customization that makes component systems so powerful in professional design workflows.

1. Locate the Women button (displayed as a black square) on the Home Page artboard.
2. Select the button with a single click to capture the complete group containing both the rectangle and text elements.
3. Right-click the Women button (use CTRL–click on Mac) and select Make Component from the context menu.
4. In the Libraries panel, double–click the automatically generated women button name, replace it with button, and press Return (Mac) or Enter (Windows) for better component organization.
5. Create a companion button for men's content by holding Option (Mac) or ALT (Windows) while dragging the Women button to the right, positioning it over the men's product image.
6. Customize the duplicated button by double–clicking the text until it becomes editable, then change Women to Men.
7. Click outside the Men button multiple times to fully deselect and exit edit mode.
8. Select the Men button with a single click to prepare it for resizing.

9. Adjust the width to create more balanced spacing around the text, matching the visual weight of the Women button.

   Notice that XD intelligently resizes the button container without distorting the text—this smart scaling preserves typography integrity while adapting the component dimensions.

10. Undo the previous change using Cmd–Z (Mac) or CTRL–Z (Windows) to demonstrate a more efficient approach.

    Manual spacing adjustments work but aren't optimal for maintaining consistency across multiple component instances. XD offers an automated solution through padding controls.

11. Select the Women button (the Main Component) to access global settings.
12. In the Property Inspector, enable the Padding checkbox to activate automatic spacing calculations.
13. Observe how the Men button automatically adjusts its width to match the padding ratio established in the Main Component—this ensures visual consistency without manual intervention.
14. Create a third button instance by dragging the button component from the Libraries panel to a position below the email input field, near your existing buttons.
15. Edit this new button's text by double–clicking until it becomes editable, then change Women to Sign Up.

16. With the text still selected, apply uppercase formatting by clicking the Uppercase button in the Property Inspector.

    This demonstrates local overrides in action—only this specific instance receives the uppercase treatment, while other button instances remain unaffected.

17. Now let's implement global changes that will enhance all button instances simultaneously.

18. Since the Women button serves as our Main Component, modifications made here will update all instances (except where local overrides exist).

    Double–click the black background of the Women button to access its shape properties.

19. Locate the four corner radius controls (small circles within the shape) and drag any of them inward to create rounded corners, as illustrated below.

    

20. Watch as the corner radius change immediately applies to all three button instances (Women, Men, and SIGN UP), demonstrating the efficiency of component-based updates.
21. Select the Women text within the Main Component button.
22. In the Property Inspector, change the font weight from Bold to Light to create a more refined appearance.

23. Again, observe how this typography change cascades across all button instances, maintaining design consistency throughout your project.

Component Versus Repeat Grids

Repeat grids automate content duplication within contained areas, making components unnecessary unless you plan to reuse that content elsewhere in your design system. Let's examine this distinction through practical application.

1. If you're not viewing at 200% zoom, press Cmd–2 (Mac) or CTRL–2 (Windows) for optimal detail work.
2. On the Autumn Collection artboard, examine the repeat grid containing four product cards (images with descriptions and pricing information).

3. This product grid was constructed using XD's repeat grid functionality for efficient content management. Notice that the first product, Distressed Denim Jacket, displays a white heart icon in the bottom-right corner for favoriting functionality, but the other products lack this element.

   This inconsistency occurred during the import process from Illustrator—the heart wasn't properly grouped with the product content before grid creation. Let's resolve this systematically.

4. Select the white heart icon on the Distressed Denim Jacket product card.
5. Cut the heart using Cmd–X (Mac) or CTRL–X (Windows) to remove it temporarily.
6. Double–click the Distressed Denim Jacket image to enter repeat grid edit mode.
7. Paste the heart back using Cmd–V (Mac) or CTRL–V (Windows)—notice how it automatically appears on all product cards within the grid.
8. Reposition the heart to the bottom-right corner of the product image where it belongs functionally.
9. Since product images may have light backgrounds that could obscure the white heart, let's add definition. With the heart selected, enable Border in the Property Inspector.

10. Reduce the heart's visual prominence by setting Opacity to 50% for a more subtle, professional appearance.

For our final exercise, let's explore an innovative application of repeat grids that showcases their versatility beyond traditional content layouts.

Optional Bonus: an Interesting Use of Repeat Grids

1. Navigate to the Product Page artboard and locate the single gray star positioned below the Distressed Denim Jacket product title.

   We need to create a five-star rating interface for customer reviews. While components might seem appropriate, repeat grids offer superior functionality here because we need multiple instances with consistent spacing that can be easily adjusted as a unit.

2. Select the gray star element to prepare it for grid conversion.
3. Click the Repeat Grid button in the Property Inspector to transform the single star into a repeatable element.
4. Drag the right handle outward to create a total of five stars for the complete rating interface (don't worry if it temporarily overlaps adjacent text).
5. Fine-tune the spacing by hovering between stars until you see the pink spacing indicator, then drag left to reduce gaps until the star group fits properly within the available space.
6. Since this product hasn't received ratings yet, outlined stars would better indicate an interactive rating interface. Double–click any star to enter edit mode.

7. In the Property Inspector, disable Fill to create outlined stars that suggest user interaction capability.

   All stars update simultaneously, demonstrating how repeat grids maintain consistency while allowing global modifications.

8. Save your work using Cmd–S (Mac) or CTRL–S (Windows) and close the file to complete the exercise.