Reusable UI with Components and Assets in Adobe XD

Why Components and Assets Matter

Reusable UI is about designing once and updating everywhere. In Adobe XD, Components let you convert repeated UI (like nav bars, buttons, and cards) into a single source of truth. The Assets panel complements this by storing reusable design tokens such as colors, character styles, and components so you can apply consistent styling across multiple artboards and keep changes easy to propagate.

Key terms you will use

• Main component: the master definition. Changes here update all instances.
• Instance: a copy placed on an artboard. It stays linked to the main component unless you detach it.
• Overrides: instance-level changes allowed without breaking the link (commonly text and some appearance properties).
• Component states: variants (Default/Hover/Pressed/Disabled, etc.) stored inside one component for interactive UI.

Creating Components from Repeated UI

Any repeated group of elements can become a component: a button (shape + label), a navigation bar (background + links + logo), or a card (image + title + metadata + CTA). The goal is to identify patterns that repeat across screens and convert them into components early enough to avoid manual rework.

How to create a component

1. Select the UI: click-drag to select all layers that belong together (for example, a button rectangle and its text label). Ensure alignment is correct before converting.

2. Convert to component: use Object > Make Component or the shortcut (varies by OS). The selection becomes a component with a green outline.

3. Name it clearly: in the Layers panel, rename it using a system like Button/Primary, Nav/Top, Card/Product. Consistent naming makes the Assets panel usable at scale.

   Continue in our app.

   • Listen to the audio with the screen off.
   • Earn a certificate upon completion.
   • Over 5000 courses for you to explore!

   Or continue reading below...

   

   Download the app

4. Find it in Assets: open the Assets panel and confirm it appears under Components. You can drag it from Assets onto any artboard to create new instances.

What to componentize (practical checklist)

• Anything repeated 2+ times across artboards (buttons, form fields, cards, list rows).
• Anything likely to change (navigation, headers, footers, CTAs).
• Anything that needs consistent interaction states (buttons, toggles, tabs).

Main Component vs Instances (and Safe Overrides)

Understanding the relationship between the main component and its instances is the difference between a maintainable file and a fragile one.

Editing the main component

To update all instances, edit the main component. You can do this by selecting any instance and choosing Edit Main Component (or using the context options in the right panel). Typical main-component edits include:

• Changing padding, corner radius, stroke, shadow.
• Adjusting icon size or alignment rules.
• Updating default typography or color.

Editing an instance (when it’s appropriate)

Instances are meant for controlled variation. Common instance overrides include:

• Text overrides: change a button label from “Buy” to “Add to cart”.
• Image overrides: swap a card thumbnail while keeping layout consistent.
• Visibility overrides: hide an optional badge layer in one instance (if your component is structured to allow it).

If you find yourself repeatedly overriding the same thing (for example, changing button color for a secondary style), that’s a sign you should create a separate component variant or use component states rather than manual overrides.

Detaching instances (use sparingly)

Detaching breaks the link to the main component. Use it only when an element truly becomes unique and should no longer receive global updates. A healthier alternative is often to create a new component based on the existing one.

Component States for Interactive Variants

Component states let you store multiple visual variants inside one component, which is ideal for interactive UI such as buttons. Instead of creating separate components for hover/pressed/disabled, you define states like Default, Hover, Pressed, and Disabled within the same component.

When to use states

• Buttons: hover/pressed/disabled/loading.
• Inputs: default/focus/error/filled.
• Toggles: on/off.
• Tabs: active/inactive.

How states behave in prototypes

States can be switched using prototype interactions (for example, on Hover → Hover state, on Tap → Pressed state). This keeps your prototype realistic without duplicating artboards or manually swapping layers.

Building a Small Design System in the Assets Panel

A lightweight design system in XD is essentially a curated set of reusable tokens and components. The Assets panel is where you manage:

• Colors (brand, neutrals, semantic colors like success/error)
• Character styles (typography presets like H1, H2, Body, Caption)
• Components (buttons, nav, cards, icons)

Colors: create and apply shared swatches

1. Select an object that uses a color you want to standardize (fill or stroke).

2. Add to Assets: in Assets > Colors, click + to save it.

3. Rename swatches using a practical scheme, for example:

   • Brand/Primary
   • Brand/Primary Dark
   • Neutral/900, Neutral/100
   • Semantic/Error, Semantic/Success

4. Apply consistently: select objects and click the swatch in Assets to apply. Later, editing the swatch updates all linked uses.

Character styles: define typography once

1. Select a text layer that matches a style you want to reuse (font, size, weight, line height, letter spacing).

2. Add Character Style: in Assets > Character Styles, click +.

3. Name styles clearly such as Type/H1, Type/H2, Type/Body, Type/Caption, Type/Button.

4. Apply across artboards: select text layers and apply the style from Assets. Updating the style later updates all linked text.

Icons: manage as components for consistency

Icons are best handled as components so size, stroke, and alignment remain consistent. Create an Icon component set (for example, Icon/Search, Icon/User) and reuse them inside other components like nav bars and buttons.

Guided Build: Turn Navigation, Buttons, and Cards into Components

This guided build assumes you already have multiple artboards with repeated navigation, buttons, and card layouts. The goal is to convert them into components, add button states, and apply shared styles so updates propagate across the entire file.

Step 1: Create shared color and type tokens first

1. Collect your key colors: pick the primary brand color, a dark neutral for text, a light neutral for backgrounds, and one semantic color (error or success).

2. Add them to Assets > Colors and rename them (for example Brand/Primary, Neutral/900, Neutral/50, Semantic/Error).

3. Define typography: choose one heading style and one body style from your existing screens, then add them to Assets > Character Styles (for example Type/H2, Type/Body, Type/Button).

4. Apply tokens: go through your artboards and replace “one-off” colors and text formatting by applying the Assets swatches and character styles. This step is what makes later component edits predictable.

Step 2: Convert the navigation bar into a component

1. Select the full nav: include background, logo, nav links, icons, and any divider line.

2. Group logically (optional but helpful): for example, group left (logo), center (links), right (icons/user).

3. Make Component and name it Nav/Top.

4. Replace duplicates: on other artboards, delete the old nav copies and drag Nav/Top from Assets onto each artboard.

5. Test an update: edit the main component (e.g., change background color using Neutral/50 or adjust padding). Confirm all instances update.

Step 3: Convert buttons into a component (base structure)

1. Select one primary button that represents your standard size (rectangle + label, and optional icon).

2. Apply shared styles before componentizing:

   • Button fill: Brand/Primary
   • Label style: Type/Button
   • Label color: typically a neutral like Neutral/50

3. Make Component and name it Button/Primary.

4. Use instances: replace other primary buttons across artboards by dragging from Assets. Override only the label text per instance.

Step 4: Add component states to the button (Default/Hover/Pressed/Disabled)

1. Edit the main component for Button/Primary.

2. Define the Default state: ensure it uses your standard fill, text style, and any shadow/border rules.

3. Create Hover state: add a new state named Hover and adjust visuals subtly (common patterns: slightly darker fill, stronger shadow, or a border). Use a consistent token if possible (e.g., a darker brand swatch like Brand/Primary Dark).

4. Create Pressed state: add a state named Pressed and adjust to look “pressed in” (common patterns: reduce shadow, shift down 1–2px, darken fill).

5. Create Disabled state: add a state named Disabled and reduce contrast (e.g., fill to Neutral/100, label to Neutral/500). Ensure it still meets your product’s accessibility expectations.

6. Keep text override-friendly: ensure the label remains a text layer that can be overridden in instances without breaking the component.

Step 5: Convert a card into a component (with image and text overrides)

1. Select a representative card: include container, image/thumbnail, title, subtitle/metadata, and CTA (which can be a nested button component instance).

2. Apply shared tokens:

   • Card background: Neutral/50
   • Border/stroke: a neutral swatch (e.g., Neutral/200)
   • Title style: Type/H2 or a smaller heading style
   • Body/meta style: Type/Body or caption style

3. Make Component and name it Card/Standard.

4. Use instances for content variation: on each artboard, override the image and text content while keeping layout consistent.

Keeping Everything Easy to Update Across Multiple Artboards

Workflow: update tokens first, then components

When a visual change is global (brand color shift, typography adjustment), update the Assets tokens first. When a change is structural (padding, corner radius, icon placement), update the main component. This separation keeps your file predictable.

Practical update scenarios

Tips to avoid common component pitfalls

• Componentize after applying tokens: if you create components before standardizing colors and type, you’ll end up with inconsistent styling locked inside components.
• Name components like a library: use Category/Variant naming so Assets stays scannable.
• Prefer states over duplicate components for interaction variants (hover/pressed/disabled).
• Use nesting intentionally: place Button/Primary inside Card/Standard so button updates propagate through cards automatically.
• Override content, not structure: if you keep overriding spacing, alignment, or colors in instances, you’re fighting the system—promote that variation into a new component or state.

Mini Exercise: Apply the System Across Three Artboards

1. Artboard A: place Nav/Top, two instances of Card/Standard, and one Button/Primary.

2. Artboard B: place the same components but override card images and titles, and change button label text.

3. Artboard C: repeat again with different content overrides.

4. Global update test: edit the main Button/Primary (e.g., increase horizontal padding). Confirm all buttons update across all artboards, including buttons nested inside cards.

5. Token update test: edit Brand/Primary in Assets. Confirm nav accents, buttons, and any other linked elements update consistently.