Components are a powerful part of Adobe XD. They allow you to create systems for your design work. With components you can create reusable elements that help to organise your workflow. Components are hierarchical, you create main components and then reuse instances of the component. If you have design elements that you regularly use, you can make them components and use them across projects, and share them with team members and collaborators via libraries.
Anything that you have added to an artboard, an individual object or an object group, can be defined as a main component. You can convert artwork to a component in a number of ways, select Object > Make component, right click on the artwork, click on the + Component icon in the properties panel, or use the shortcut, ⌘ K. Once artwork has been converted to a component, the selection colour will change from blue to green.
New components will be listed in the components panel. You can rename them by double clicking on the component name and typing. A main component is a “parent” component, other instances of the component are children. If you make changes to the main component, all instances will be updated with that change. For example, if you add padding to a button component, all instances will receive the same padding value.
You can select a component from the component list, right click it, and choose > Edit Main component. This will add the main component to the workspace if it is not already there. You can recognize a main component by the filled in diamond top left of the green bounding box. Instances have an empty diamond top left.
Component terms
- Main component: Top of the hierarchy, all instances rely on it’s properties
- Component instance: When you reuse a component in is called an instance
- Nested component: When you include one component into another
- Outer component: Is the component with another nested inside
Nesting components
XD lets you nest components inside each other to create complex hierarchical design systems. When you apply changes to a main component, all instances are updated, even if it is nested inside another component.
To nest components, you select a component on the artboard along with other objects that will make up the parent component. Right click the selection and choose > Make component. The component will now be added to the component list. You can also make the nested component from the Object menu, or selecting the + icon in either the Component list of the Properties panel.
Swapping out components
You can swap out component by dragging a new component from the list and hovering over another component that is already placed on the art board. When you hover the new component over the old one it will highlight, letting you know that you can swap the components.
Component states
Each component can include multiple visual states. This can be used for your design system implementation and also for creating interactive UI objects. There are two default states, hover and toggle. These visually describe the change that occurs to the component when users interreact with the object with a tap action for example. A component can have multiple other states applied to it. Click the + icon in the component section of the properties panel. Name your states appropriately.
