Issue #2, July 2019, Working With Components
To convert a selection into a reusable component, click on the + button in the assets panel or press Cmd+K (Mac) or Ctrl+K (Win).
Want to apply styles from one object to another? Simply copy the object and paste appearance to apply all applicable styles to another object. For this action, you can also use shortcuts Opt+Cmd+V (Mac) and Ctrl+Alt+V (Win).
Component styles can be overridden. Change styles in any of the instances to override them; further changes to that particular style in the master component will then not apply. However, all other styles will still be inherited!
Want to see where a particular component is used? Right click the component in the assets panel and select “Highlight on Canvas.” Combine with Zoom to Fit (Cmd+0 Mac, Ctrl+0 Win) to see everything in your document
If you want to see which component is associated with the component you’re using, open the context menu over the object and select “Reveal Component in Assets.”
If your master component isn’t on your artboard, you can give it focus by launching the context menu (right click/Cmd+click) and selecting “Edit Master Component.” This will move your focus over to the master component, even if it’s out of view.
Note: Master components have a badge in the upper left hand corner. If you edit the master component, all of its styles are propagated to other instances.
Want to reset your component so that it matches your master component? Right click/Cmd+click over the component you want to update and select “Reset to Master Component.”
Components are resized using the responsive resize. All of the other properties (like color) are inherited from the master component.
Components can be rotated — simply hover just outside any of the handles to engage the rotation control. And you can hold down the shift key while rotating to snap to 15º increments.
In Prototype mode, you can copy an object and paste its interaction onto another. It even works for multiple selection! For this action, you can also use shortcuts Opt+Cmd+V for Mac and Ctrl+Alt+V for Windows.
This series is based on examples created by Elaine Chao. Follow her for more tips on using Adobe XD.