Subscribe or Login to watch video

Login or Subscribe to watch video

41 - How to use Character Styles in Adobe XD

Questions & Comments

Melindy - 7 months ago

Hi Daniel, I have question on character style. Video 23 of UI/UX & Web Design Using Adobe XD - between clip 43 - 48 sec. I could not do the changing of the front style. I highlighted the text , same way as you did then click each one in my character style list but no changes happened. Is there something that i missed in the process? Thank you.

melody tse - 4 months ago

You have to press the letters not the whole box on the character style asset. See the Image i've attached. Hope this helps, I was so lost for a good hour!

Abdulla_ka - 2 months ago

I have issue here is sees that the font is missing

ALL ACCESS: $12 per Month + Cancel anytime   

Video Transcription

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.

ALL ACCESS: $12 per Month + Cancel anytime