User Guide Cancel

Work with components

  1. Adobe XD User Guide
  2. Introduction
    1. What's new in Adobe XD
    2. Common questions
    3. Design, prototype, and share with Adobe XD
    4. Color Management
    5. System requirements
      1. Hardware and software requirements
      2. Adobe XD, Big Sur, and Apple silicon | macOS 11
    6. Workspace basics
    7. Change app language in Adobe XD
    8. Access UI design kits
    9. Accessibility in Adobe XD
    10. Keyboard shortcuts
    11. Tips and tricks
  3. Design
    1. Artboards, guides, and layers
      1. Get started with artboards
      2. Use guides and grids
      3. Create scrollable artboards
      4. Work with layers
      5. Create scroll groups
    2. Shapes, objects, and path
      1. Select, resize, and rotate objects
      2. Move, align, distribute, and arrange objects
      3. Group, lock, duplicate, copy, and flip objects
      4. Set stroke, fill, and drop shadow for objects
      5. Create repeating elements
      6. Create perspective designs with 3D transforms
      7. Edit objects using Boolean operations
    3. Text and fonts
      1. Work with drawing and text tools
      2. Fonts in Adobe XD
    4. Components and states
      1. Work with components
      2. Work with nested components
      3. Add multiple states to components
    5. Masking and effects
      1. Create a mask with shapes
      2. Work with blur effects
      3. Create and modify gradients
      4. Apply blend effects
    6. Layout
      1. Responsive resize and constraints
      2. Set fixed padding for components and groups
      3. Create dynamic designs with stacks
    7. Videos and Lottie animations
      1. Work with videos
      2. Create prototypes using videos
      3. Work with Lottie animations
  4. Prototype
    1. Create interactive prototypes
    2. Animate prototypes
    3. Object properties supported for auto-animate
    4. Create prototypes with keyboard and gamepad
    5. Create prototypes using voice commands and playback
    6. Create timed transitions
    7. Add overlays
    8. Design voice prototypes
    9. Create anchor links
    10. Create hyperlinks
    11. Preview designs and prototypes
  5. Share, export, and review
    1. Share selected artboards
    2. Share designs and prototypes
    3. Set access permissions for links
    4. Work with prototypes
    5. Review prototypes
    6. Work with design specs
    7. Share design specs
    8. Inspect design specs
    9. Navigate design specs
    10. Review and comment design specs
    11. Export design assets
    12. Export and download assets from design specs
    13. Group sharing for enterprise
    14. Back up or transfer XD assets
  6. Design systems
    1. Design systems with Creative Cloud Libraries
    2. Work with document assets in Adobe XD
    3. Work with Creative Cloud Libraries in Adobe XD
    4. Migrate from linked assets to Creative Cloud Libraries
    5. Work with design tokens 
    6. Use assets from Creative Cloud Libraries
  7. Cloud documents
    1. Cloud documents in Adobe XD
    2. Collaborate and coedit designs
    3. Coedit documents shared with you
  8. Integrations and plugins
    1. Work with external assets
    2. Work with design assets from Photoshop
    3. Copy and paste assets from Photoshop
    4. Import or open Photoshop designs
    5. Work with Illustrator assets in Adobe XD
    6. Open or import Illustrator designs
    7. Copy vectors from Illustrator to XD
    8. Plugins for Adobe XD
    9. Create and manage plugins
    10. Jira integration for XD
    11. Slack plugin for XD
    12. Zoom plug-in for XD
    13. Publish design from XD to Behance
  9. XD for iOS and Android
    1. Preview on mobile devices
    2. Adobe XD on mobile FAQ
  10. Troubleshooting
    1. Known and fixed issues
      1. Known issues
      2. Fixed issues
    2. Installation and updates
      1. XD appears as not compatible on Windows
      2. Error code 191
      3. Error code 183
      4. Issues installing XD plugins
      5.  Prompt to uninstall and reinstall XD on Windows 10
      6. Issues with preferences migration
    3. Launch and crash
      1.  XD crashes when launched on Windows 10
      2.  XD quits when you sign out of Creative Cloud
      3. Issue with subscription status on Windows
      4. Blocked-app warning when launching  XD on Windows
      5. Crash dump generation on Windows
      6. Crash log collection and sharing
    4. Cloud documents and Creative Cloud Libraries
      1. Issues with XD cloud documents
      2. Issues with linked components
      3. Issues with libraries and links
    5. Prototype, publish, and review
      1. Unable to record prototype interactions on macOS Catalina
      2. Issues with publish workflows
      3. Published  links do not appear in browsers
      4. Prototypes do not render correctly in browsers
      5. Commenting panel suddenly showing up on shared links
      6. Unable to publish libraries
    6. Import, export, and working with other apps
      1. Import and export in XD
      2. Photoshop files in XD
      3. Illustrator files in XD
      4. Export to After Effects from XD
      5. Sketch files in XD
      6. Third-party apps not visible in Export

Learn how to work with Components across design systems in Adobe XD.

Components are design elements with an unmatched flexibility that help you create and maintain repeated elements while varying the instances for different contexts and layouts like the usage of buttons in varying contexts.

Read on to learn how to use Components to easily maintain multiple versions of the same foundational element!

Components

New to XD?

Get XD

Learn app basics

Already on XD?

Update Your App

Check out What's New

Try it yourself

Get Sample UI kit

.xd; 80 MB

Familiarize yourself with these concepts before you proceed in XD:

Create a Component

To create a Component, select Object Make Component. You can also select an object or group of objects and use any of these options:

Property inspector
From the Property inspector

Click the + icon in the Component section of the Property Inspector.

Assets panel
From the Assets panel

Click the + button in the Components section of the Assets panel.

Context menu
From the context menu

Right-click an object and select Make Component (Ctrl/Cmd+K).

The first time you create a Component in XD, it becomes a Main Component, indicated by a green-filled diamond in the upper left corner. You can edit a Component just as you would edit any other element. 

Create Components

You can view the name of the selected component in the Property Inspector. To rename a component, double-click the name in the Property Inspector.

Things to watch out for

  • XD does not have a dedicated view to edit Main Components. When you edit a Main Component, you edit it on canvas.
  • If you delete a Main Component on canvas, you can still select an instance and access the Edit Main Component option in the context menu. XD will generate a Main Component on canvas.
  • If you want to unlink a single Component instance, use the Ungroup Component option in the context menu. However, if you want to unlink all instances on canvas, use the delete option in the Assets Panel.
  • To ensure that you're editing the Main Component, watch out for the green filled diamond in the upper left corner of the bounding box.

Best practices

Here are some best practices when working with Components:

  • Creating a large design system of Components? Ensure to organize the related Main Components on separate artboards. For example, buttons on one artboard and navigational bars on another artboard.
  • When building your design system, ensure to build the Components at the most atomic level for maximum flexibility and reuse. For example, when creating a dialog Component, ensure that the buttons for the dialog are Instances nested within the dialog Component.

Work with Component Instances

Every copy of the Main Component is known as an instance. Component instances are indicated by a green hollow diamond in the upper left corner. When you make changes to the Main Component, same changes are applied to all instances.

Instance override
Instance override

Overrides are unique changes that apply only to that instance and not the Main Component. If you change a property in an instance, XD marks that property as an override. You can override properties of an instance without breaking its connection to the Main Component. 

Main component
Main Component

Instance
Instance

Instance with overrides
Instance with overrides

Best practices

Here are some best practices when working with Component instances:

  • Do you want to experiment with a Component variation? Select Ungroup Component from the context menu to detach the instance from the Main.
  • Are you trying to locate:
    • All instances of a Component on canvas? Right-click the Component in the Assets Panel and select Highlight on Canvas.
    • The Main Component while working with an instance? Right-click the instance and select Edit Main Component.
    • The previous component instance after editing the main component? Right-click the component and select Back to Previous Instance

Edit a Main Component

When you edit a Main Component, all instances are updated unless they contain overrides for that specific property. 

To edit a Main Component, select an instance or Component on canvas, and use any of these options:

Context Menu
From the context menu on canvas

Right-click an instance on canvas and select Edit Main Component (Shift + Ctrl/Cmd + K).

Assets panel
From the Assets panel

Right-click a Component in the Assets panel and select Edit Main Component.

Property Inspector
From the Property Inspector

Select the edit pencil icon next to Default State in the Component section.

Once you're done editing the main component and want to return to the previous instance, right-click on the component and select Back to Previous Instance.

Things to watch out for

  • Rotation and opacity properties don't propagate from the Main Component to instances.
  • To ensure that you're editing the Main Component, watch out for the green-filled diamond decoration on the upper left corner of the bounding box.

Best practices

Here is a best practice when editing Main Components:

  • If you delete a Main Component from the canvas, right-click an instance and select Edit Main Component. XD generates a Main Component on the canvas.

Override a Component Instance

Main Components provide the required consistency to maintain a design system. Any changes made to the Main Component automatically propagate to its instances. However, a design system is only as useful as the degree of flexibility it provides. You can start with the same original element, but you have to customize it depending on the context where it is used. That’s where instances come in.

Overrides are unique changes that apply only to that instance and not the Main Component. If you change a property in an instance, XD marks that property as an override. Overridden properties are always preserved, even if you edit the same property from the Main Component. 

To clear overrides and reset the Main Component, right-click an instance, and select Reset to Main State

Override in Component instance
Override in a Component instance

Types of overrides

Here are some override types and their usage scenarios:

  • Text: You can edit the text content in a Component instance, for example, when you change the label for a button Component. 
  • Bitmap: You can replace the bitmap content in a Component instance, for example, when you replace an image in a profile picture Component.
  • Size: You can resize an instance when applying padding and responsive resize, for example, when you modify the size of the text fields in a form.
  • Appearance: You can modify the appearance properties such as fill color, border, and blur, for example, when you modify the background color for notifications.
  • Layout and structure: You can add, delete, and move objects within a Component instance, for example, when you modify the drop-down menus with additional menu entries.
Structure and layout overrides
Types of overrides: Text, Bitmap, Size, Appearance, and Layout

Size Overrides

Components are also resizable and come with the powerful capabilities of responsive resize baked right in. If you resize the Main Component, instances that have not been resized manually as an override are automatically resized. Therefore, instances that have been resized preserve their resized position as an override. 

How does resize work in a Main Component or its instances?

  • You can independently resize an instance without affecting the Main Component.
  • You can you resize an entire Component and alter the layout of the items within.
  • You can change the Component instances irrespective of the sizes you’ve adapted them to.

Just like responsive resize, XD re-creates the placement of your elements on a larger or smaller canvas as you resize them.

In the Property Inspector, you can toggle Responsive Resize from Auto to Manual that allows you to edit the constraints for more control.

Appearance overrides

Appearance override
Appearance override

Changing your original elements depending on context is important when creating reusable elements. As a result, you can override every style and appearance property of an instance. The overrides allow for a range of variations while still keeping their ties to the Main Component. 

Layout and structure overrides

Not only can you override the size of a Component or the layout of elements within, but you can also structurally override the Components. This means you can add or subtract elements in the Main Component and its instances.

Layout and structure override
Layout and structure overrides

If you add an object to the Main Component, it is also added to its respective instances. When you add an object, XD applies the responsive resize algorithm and automatically places the constraints on the object. This depends on the position of the new object relative to its container. When an object is deleted from the Main Component, it is also removed in all instances.

Elements can also be added or removed from an instance and constraints are automatically placed on an object when it is added. When an element in an instance is deleted, only the element in that instance is removed. The same element continues to exist in the Main Component. 

Things to watch out for

  • You can reset all the overrides and not individual overrides back to the Main Component. 
  • If you have marked a property as an override on an instance, select Reset to Main State to get it back in sync with Main. 

Best practices

Here are some best practices when working with overrides in Component instances:

  • To create a variation of the Component for reuse, create a state in the Main Component rather than an instance with overrides.
  • While overriding instances, ensure that you override the property that does not need updates from the Main. For example, in a button Component, overriding the text ensures that the label can be different, but the size and color are still in sync with the Main. 

Add states to Components

Component states allow you to save different variations of the Component for each reuse. Once you make overrides on the Main Component, you can create a state out of those overrides so that it can be reused easily.

For example, you can create a button Component with different variations like the primary and secondary. Using states, you can create variations using overrides on the Main Component. 

When working with states and Components, remember these pointers:

  • States created on the Main Component are available across all the instances of that Component. This allows you to create Components with multiple instances and easily switch states.
  • You can rename and delete them from the state switcher in the Property Inspector.
  • You can add a trigger with an action to switch from one state of a Component to another state. For example, you can switch from the default to the Hover state while hovering over a button Component. 

Add states

Once you have created a Component, the Property Inspector lists the Component with a Default State. You can now add three types of states for your Components: NewHover, and Toggle.

Create a new state

Use New State for scenarios where you want to show variations of a Component such as a disabled or clicked version of a Component.

New State
New State

In Design mode, click the + button next to the Default State of the Main Component in the Property Inspector, and select New State.

By default, new state does not have any interactivity baked into it. For more information on how to wire an interaction to Components, see Add interactivity to Components.

Create a hover state

Use Hover State if you want the component to change and display a different state when you hover over the Component when interacting with your prototype.

Hover state
Hover State

In Design mode, click the + button next to the Default State of the Main Component in the Property Inspector, and select Hover State.

By default, Hover state has interactivity baked within it. 

Create a TOGGLE state

Use Toggle State when you want to create components with interactive toggle behavior such as toggle, radio button, checbox and so on. 

Toggle state
Toggle State

In Design mode, click the + button next to the Default State of the Main Component in the Property Inspector, and select Toggle State.

Once the toggle state is created, by default, XD will automatically bake in two bi-directional Tap interactions between the Default State and the Toggle State, making it fully interactive.

View and manage states

After you create the states for your Component, you can edit the properties of your Component and visualize how your Component appears when you interact with it. Here are some workflows associated with states:

Switch states

Switch states
Switch states

Select the Component and from the Property Inspector and toggle or switch between various states.

Rename states

Rename states
Rename states

Double-click the component state name in the Property Inspector and add a new name. You can only rename and delete states in the Main Component. You cannot rename the default state.

Delete states

Delete states
Delete states

Right-click the component state and select Delete. When you delete a component state from the Main Component, Component instances with the active state switches back to the default state.

Overrides in states

Any edits you make to the default state in the Main Component are propagated to the default state in all instances. Similarly, editing a specific state in the Main Component results in all instances receiving those edits for that specific state. Always make sure you’re editing the state in the Main Component to have it updated across all instances.

With states, you do have the ability to override properties like text, bitmap, size, layout, and appearance. Once you override a state property in an instance, it will no longer receive updates for those properties from the Main Component.

If you are not happy with the results of your overrides, reset it back to the original Main Component by right-clicking an instance and selecting Reset to Main State. This clears all overrides on an instance and resets it back to the Main Component.

Add interactivity

You can use Tap, HoverKeys & Gamepad, and Voice triggers for wiring interactions between component states in the Prototype mode. Wiring interactions between component states is similar to wiring interactions between artboards. The main difference is that when wiring interactions between component states, you choose a state as a destination instead of an artboard.

Create a tap interaction
Wiring up component states to create a tap interaction

  1. Switch to the Prototype tab.

  2. Select the component state from which you want to create the interaction. 

  3. Click the > icon on the component state or the + in the Interaction section in the Property Inspector to add an interaction.

  4. Choose Tap (for click events), Hover (for mouseover actions), Keys & Gamepad (navigation and accessibility use cases), or Voice (navigation and accessibility use cases), as a trigger.

  5. Pick an action type (such as Auto-Animate or Transition).

  6. Pick a state as the destination.

  7. Switch to the Preview window and test your Component's interactivity.

You can define multiple interactions for the same component state. For example, if you have a toggle switch that has both hover and tap states, you can define those interactions by repeating steps 4-7 twice to define the tap and hover states. After you create multiple interactions, you can see the Interaction section displaying the defined interactions. Toggle between those interactions and modify the interaction properties to fit your requirements. 

If you want to create nested hover interactions, like flyout menus, or pop-ups with multi-state buttons, you can also nest components with hover states.

Things to watch out for

  • When you double-click a Component, the state picker in the Property Inspector disappears.
  • XD supports only Tap, Hover, Keys & Gamepad, and Voice as triggers between states.
  • XD does not propagate overrides from one state to another state in instances.

Best practices

Here are some best practices when adding states to Components:

  • Always create your states for your Components to reuse different variations of it.
  • You can switch over to prototype mode and manually edit the interactions between different states.
  • When adding interactivity between states, if you are changing properties like color, then pick the action as Transition with None or Dissolve as the animation. If you're animating position or size between states, pick Auto Animate as the action.
  • When creating a new state, you can start by replicating the default state or an existing state. Depending on the end goal, you can choose to select the default state and then click + to duplicate it for a new state or select an existing state and then click + to duplicate that state. When you create a new state from an existing state, the new state will also have the same overrides. This means that the overridden properties will not receive any updates from the default state. For most use cases, we recommend creating new states by clicking on + for the default state. Starting with the default state ensures it is in sync with the Main Component and doesn’t contain any overrides.

Manage Components

View 

Reveal Components in Assets
Reveal Components from Assets panel

You can view or drag new instances to the canvas from the Assets panel.
To locate all instances, right-click on a Component in the Assets panel and select Highlight on canvas. 
To locate Components in the Assets panel, right-click on a Component instance on canvas and select Reveal Component in Assets panel. 

Edit, rename, or delete

Context menu from the Assets panel
Context menu from the Assets panel

Right-click a Component in the Assets panel or select an instance on canvas and use the context menu options to edit or delete. To rename Components, right-click and select Rename. 

Reset to a Main State

Reset to main state
Reset to Main State

Right-click an instance and select Reset to Main State to clear all overrides and link it back to the Main  Component.
To detach an instance from the Main, right-click an instance and select Ungroup a Component.
 

Add interactivity to Components

You can add interactivity to Components and between states. When you create an interaction on the Main Component, all instances of that Component receive that interaction. Any changes to interactions on the Main Component automatically update the interactions on the instances.

You can also override interactions on instances after which it will no longer receive updates from the Main Component. Just like design overrides, you can override the interaction properties for a Component.

Things to watch out for

  • There is no way to prevent propagating interactions from the Main Component to instances.
  • There is no way to distinguish between an interaction added to an instance (as an override) versus the interaction it inherited from the Main Component.
  • A limited set of actions and triggers are supported for states. 

Best practices

Here is a best practice when adding interactivity to a Component:

  • When you copy-paste or share Components between documents, XD doesn't preserve the Component to artboard interactions since we can't guarantee that the destination artboards are always available. However, XD preserves the state to state interactions for each Component. What that means is for a Component that has a Hover state and a Tap trigger to an artboard - on pasting this in another document, XD preserves the Hover state interaction and discards the Tap trigger to the artboard. 
  • Choose when you add an interaction to the Main Component vs the instance.
  • If all the instances share the same destination, then wiring the Main Component is more effective since it automatically propagates to all of them. For example, a Home button that goes to the home screen.
  • If all the instances or some of them have different destinations then it's easier to wire the individual instances instead of the Main Component. For example, a primary button that is used across the project that has different destinations based on its usage and context.

Learn more

To learn more about working with Components, watch this video.

Viewing time: 9 minutes


What's next?

We've got you started on how to work with Components in XD. Take a step forward and learn how to use nested components in XD.

Have a question or an idea?

Ask the Community

Have a question to ask or an idea to share? Come and participate in Adobe XD Community. We would love to hear from you and see your creations!

 Adobe

Dapatkan bantuan lebih cepat dan lebih mudah

Pengguna baru?

Adobe MAX 2024

Adobe MAX
Konferensi Kreativitas

14–16 Oktober Miami Beach dan online

Adobe MAX

Konferensi Kreativitas

14–16 Oktober Miami Beach dan online

Adobe MAX 2024

Adobe MAX
Konferensi Kreativitas

14–16 Oktober Miami Beach dan online

Adobe MAX

Konferensi Kreativitas

14–16 Oktober Miami Beach dan online