Character Styles: Free Adobe XD Tutorial

Topics covered in this Adobe XD tutorial:

Creating & Editing Character Styles

Exercise Preview

Exercise Overview

In this exercise, you’ll learn about creating and editing character styles.

Creating Character Styles

1. In Adobe XD, go to File > Open from Your Computer or hit Cmd–Shift–O (Mac) or Ctrl–Shift–O (Windows).

2. Navigate into Desktop > Class Files > Adobe XD Class and double–click on iTastify Design Done.sketch to open it.

   NOTE: Notice that this is a Sketch file, and XD can open it! The conversion may not be perfect, so be sure to inspect your files closely if you’re converting them.

3. Zoom in on the iTastify Helps You Remember section (below the hand holding an iPhone).
4. There are 3 features, each with an icon and 2 lines of text. Try clicking on any of them to see the whole section is grouped.
5. Ctrl–click (Mac) or Right–click (Windows) on any of them and choose Ungroup.
6. Click in an empty area of the artboard to deselect the text.
7. To open the Libraries panel, at the bottom left of the window click the  icon.
8. Select the Tag Companions heading of the first feature.
9. In the Libraries panel, click the + button to the right of Character Styles to save it as a style.

10. Let’s see another way to create a style. Ctrl–click (Mac) or Right–click (Windows) on the feature’s description: You’ll never mix up company again and choose Add Character Style to Assets.

Editing Character Styles

1. Click in an empty area of the artboard to make sure nothing is selected.
2. In the Libraries panel, Ctrl–click (Mac) or Right–click (Windows) on the Arial — 21pt style and choose Edit.

3. Drag to choose any new color (it doesn’t matter what you choose) and notice that the color changes on all 3 headings!

   Character Styles work a lot like we saw with Colors in the previous exercise. When you edit a style, XD will change every place that exact same text formatting appears in the entire file. You didn’t have to apply the style to create a link as you do in many other apps. Think of this more like a search and replace for type styling. Pretty cool!

4. Click on an empty part of the artboard to close the style options.
5. In the Libraries panel, Ctrl–click (Mac) or Right–click (Windows) on the Arial — 20pt style and choose Edit.

6. Change the size from 20 to 18 and hit Return (Mac) or Enter (Windows) to apply the change.

   Notice all three descriptions change, because there styling matched the character style. How easy was that?

7. Click on an empty part of the artboard to close the style options.

Naming Character Styles

It would be easier to remember what these styles were for if they had a name.

1. Make sure nothing is selected.

2. Double–click on the Arial — 21pt style name, type in feature name and hit Return (Mac) or Enter (Windows) to apply the change.

   NOTE: You must be in List View to see/edit a style name.

3. Double–click on the Arial — 18pt style name, type in feature description and hit Return (Mac) or Enter (Windows).