How to Make Style Changes Across Artboards in Adobe XD CC | Adobe Creative Cloud

How to Make Style Changes Across Artboards in Adobe XD CC | Adobe Creative Cloud

05.03.2018
/ / /
Comments Closed

Learn how to create assets within Adobe XD that you can then use to quickly make changes to the colors and character styles used throughout your web and app prototype designs.

Start from scratch, or download practice files [http://learndownload.adobe.com/pub/learn/xd/global-changes.zip] for a head start. Steps below.

1. Open an .xd document, or use ours (global_changes.xd).
2. Open the Assets panel, if it’s not open (View – Assets).

Tip: You can also click the Assets icon on the lower left side of Adobe XD.

3. Add a global color palette: Click the title of the Home artboard. Click the plus + sign next to Colors in the Assets panel to add the colors used on the artboard.
4. Modify global colors and gradients:
a. Right-click the gradient color swatch and select Edit. Click the color stop on the far right of the gradient preview at the top of the Color Picker. Use the vertical slider on the far right to change the opacity. Notice the effect on all of the artboards where the gradient is used.
b. Right-click on a solid color swatch, such as purple or orange and select Edit. Use the sliders in the Color Picker to change the color. Notice the effect on all of the artboards where the color is used.
5. Add global character styles: Click the title of the Saved Trip artboard. Click the plus + sign next to Character Styles in the Assets panel to add the character styles used on the artboard.
6. Modify global character styles: Right-click on the character style (e.g., purple/blue text) and select Edit. Change the font size, style, or any other font properties and notice the changes on the artboards.

That’s it!

To learn, more visit our Adobe XD CC Tutorials page: https://adobe.ly/2oIbdaZ

Subscribe: https://www.youtube.com/user/adobecreativecloud?sub_confirmation=1

LET’S CONNECT
Facebook: http://facebook.com/adobecreativecloud
Twitter: http://twitter.com/creativecloud
Instagram: http://www.instagram.com/adobecreativecloud/

Adobe Creative Cloud gives you the world’s best creative apps so you can turn your brightest ideas into your greatest work across your desktop and mobile devices.