How to make Character Styles in Adobe XD

Hey there, in this video we're going to look at Character Styles. We're going to add them to our Assets panel over here, and then show how awesome they are when you go and edit them. And they change color magically, all connected to this Character Style. Totally essential when you've got lots of pages you've mocked up, and you need to control fonts over a big scale of pages. All right, let's go and check it out. 

So creating Character Styles is super easy. Down the bottom here, make sure you're on your Assets panel. Actually I'm just going to select all of them in one big go using my Black Arrow and click this 'Character Styles'. They're all added, nice, ready to go. Now what makes Character Styles useful is that when I start typing I can just select it all, and then click on any of these guys. So that's, I guess, the nice thing about it. That's once nice thing, at least. Other nice thing is that, say later on, I decide I've used this a bunch of different times throughout the site and then later on I decide, actually, that's not what I wanted to do. Clients come back and say they don't like the font so I can go through in here, and pick Museo. And they all update, and link. 

You can change everything in here, colors, fonts, sizes. Anything you like, and it's all connected to this Character Style. Now if you're a person who comes from say, something like InDesign or Illustrator, the Character Styles are pretty strict. What XD have done here is, they've done some pretty amazing stuff, I think. This is a Wireframe for an app. You can see over here, if I delete all the Styles, there's no Styles at all. And you've gone through and designed this whole thing, you're like "Man, if this is InDesign I want to add this Style", so I'm going to double click him, add it to my Character Styles. Great! This has been used, that size, that's been used hundreds of times already in this app. So what a pain. So what XD have done though they've been super clever. Watch this. If I go and update this, and I say, actually I want this to be pink you'll notice that not only has-- that was obvious. So I've made it to green. You can see, I've updated this, and this one updated, but look all these other guys did as well. So what XD does is, it goes "You probably mean all of the fonts that are the right size, that are the right color, that are Arial" and it reaches through the document, and goes and changes those. It's just super helpful, you can see, all of them have changed. 

So you don't have to be as strict with everything, applying in this Character Style. You can add it to it at the end, and make little changes, and it spreads throughout the document. You can adjust these separately. So in here, I can decide to go in here, and say actually I'd like this one to be-- everyone else has to be green, but I want this to be pink. And you'll see, it gets overridden. I feel it's a really clever way of introducing Character Styles. They're not 100% strict. They're just really usable. And now if I make a change to this guy here, and I make them all, say, Lite or Regular, you can see, all the rest of them-- you might not see it because I picked a hard to see font. You can see now, all of these have changed, but because I made a slight little alteration to this one and he doesn't match his friends he can stay like that, so I think, Character Styles are pretty amazing in XD. Thanks Adobe. Let's move on to the next video.