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!
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!
Be familiar with these concepts in XD:
To create a Component, select Object > Make Component. You can also select an object or group of objects and use any of these options:
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.
Here are some best practices when working with Components:
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.
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.
Here are some best practices when working with Component instances:
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:
Here is a best practice when editing Main Components:
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.
Here are some override types and their usage scenarios:
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.
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.
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.
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.
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.
Here are some best practices when working with overrides in Component instances:
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:
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: New, Hover, and Toggle.
Use New State for scenarios where you want to show variations of a Component such as a disabled or clicked version of a Component.
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.
Use Toggle State when you want to create components with interactive toggle behavior such as toggle, radio button, checbox and so on.
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:
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.
You can use Tap, Hover, Keys & 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.
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.
Here are some best practices when adding states 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.
Here is a best practice when adding interactivity to a Component:
To learn more about working with Components, watch this video.
Viewing time: 9 minutes
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.