Alright. This video is all about character styles and XD all the character style is, is a reusable style that we get to add to our assets panel so we can have some consistency. I can grab all of these guys and then over here, make sure you're on assets. Okay. This little icon down here and click on the plus next to character styles. I've got them all there to be reused, updated actually gonna undo them and just show you at one at a time because I want to show you one of the perks for them added. Just this one here, it's added the name of it and the size you can actually right click it and rename it. You might call this one my heading one to make it just a little easier to work with. Maybe maybe you're setting some guidelines up for your team and you want it to be consistent. But the good thing about it is, let's say I use this a few times, right? It's in different pages across different art boards. And the client comes back and says, I don't like play fair. So you're going to go into h...

ere. You can go to edit. Okay. You can go into here and you can say, no problem clients job done. Okay. And it's gone through your whole document and adjusted it. Even if they're not connected. Like if you've used, say adobe in designs, character styles or illustrator or Photoshop, you have to like make sure they're connected. XD is different. Um, you could create this one. You don't actually have to connect them to them, they just have to match. Okay, so it doesn't, you don't have to apply them or make sure they're connected, it'll just go through and say if you, you know, if it was a Playfair font that was 40 it just went through and found it and changed it for us. Super cool, super handy. And undo that the other thing to consider when you're doing an undue before that character style existed is that it pulls in a few things. We just got these on single lines. Who remembers what this is called, what kind of text box it is. Point text, you got it. So it's just running on forever. But if its body copy, it's going to break into separate lines and that's something we haven't really considered here. We just we made them, we picked the font but we didn't pick the line spacing with the leading and we didn't play around with the space after. So that will get pulled in as well. So you've just got to be careful, you know, at this stage, like Let's have a look at that. So if I put two lines in here and put a return in um and put in another line, that line spacing is fine, you might be like 53, the automatic default one picked for 40, it's fine. My only trouble is that it doesn't match my baseline grid, okay, if the model is at eight, so I might have to bump it up to 56 a little bit wider, but at least it's gonna line up with that grid. You might not care. Just know though, that that will be part of the character style. So just be conscious. I want that one to be 56. Yeah, this one here is going to be 40. Actually, none of these headings break onto two lines, it's mainly this body copy. So, I want all of these fellas to be quite specific. So, I've got them all. You're gonna have a line spacing of 24. Let's have a little look at what 24 looks like copy paste paste paste. That's not really good. Pasting, Yep, I like it as spacing between the lines if you're unsure what I mean by line spacing, I bump it up to the next one which is, man, my brain doesn't work. 32. Probably too much Cool. Get rid of you. What else have I got to get rid of you? One of you fellas. 24 is great. This one here only plan on using on single lines, so all of you guys are in and I should go and rename them all, But I'm happy enough with Playfair 40 maybe because I'm lazy, you should call it hitting one, hitting two, hitting three. I'm going to add all the white ones as well. Oh, I forgot to change the spacings on all these, so speed this up. I'll see you in a sec. All right, you can see it's edited and it's edited alpha numerically. So bits of whites are all spread through the kind of darker versions. So you allowed to drag it around afterwards. So it's like all of these actually. Where's my other heading there? It is there and just get it looking nice in here. This could be a little O C D. You might not care. But all the light ones, all the dark ones. It's the opposite of what I said. Police are all in there. All right. And for the people who are using some of the other adobe products. So photo joop illustrated in design, let's say that you have designed something you're like, oh, you know, I want to pull the fonts in sort of got the corporate bond, you've got all the right sizes. Really might even done a mock up like this. This is like a mock up done in Photoshop as a kind of, you know, a full website mock up and I want this fondle through the easy way to do it is find it in your layers panel. Okay, So I found it here. Got it highlighted. Make sure your libraries panel is open. Got a window. Make sure libraries is open. Find the library that we created. I've got a bunch of them. Right? I want to find it's called I H Q XD class. So this is the connection between the CC library annex D and in Photoshop. So as long as you've got that text selected, you can hit this little plus button and say actually give me the character style please. You can see, brings it through. I could even right click it and rename it and give it something a bit more. I don't know. This is raw cycles, you can't see it there. The company has raw raw bikes actually, and this is their say hitting one and what you can do and instantly see annex D. So if you go to window, sorry, file and go to open C. C. Libraries, as long as you're on the exact same one, you can see there it is there white so I can grab that. Oh, my library disappeared again. Doesn't want to stay open and click on this and it's brought it through here. Cool. And remember it doesn't work with character and paragraph styles at the moment, hasn't forever. So I can't imagine it's going to in the future, but it's brought through the font, that character spacing, line, height, all sorts of cool stuff. I don't want that. I'm going to undo it. Same thing for illustrator. Um Let's say this is one of the briefs is working on. Okay with this text selected here. I can go over to the same thing, make sure the library's panels open, make sure you're on the right library, little plus button, grab the character style and there it goes in there and that's my museo sans should name it, but I'm not okay and I can grab all of this and actually you guys are gonna be museo sans now, same thing. If you've got characters styles going in in design, you get the idea to make sure the library's open, select it hit the little plus button and it will suck it over. Alright, That is it for character styles, if you find yourself when you're designing, you know, and you leave this project and you don't end up doing this at the beginning, you do it at the end retrospectively because you're like, I didn't even know what font I wanted to pick. That's okay. I only do it at the beginning here for a couple of reasons. One is I I've done it so many times that I kind of know the structure that I want and it saves me time later on. I also wanted it to be here so that we can I can show you how character styles work for this course. There are times where I'm just blazing through and picking any old font and any old size and I tidy it up later, but for the moment, follow me get everything sorted so that we're not going to run into problems later on and I closed down my CC library and I will see you in the next video

Class Materials

Bonus Materials with Purchase

Six Completed Files

Exercise Files

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

Web Design Design Thinking UX Design Design Projects

Ratings and Reviews

Haseebullah Johar

Thank you, Dan Scott, for providing such a beautiful Adobe XD course. I completed the course today and noticed a couple of things that are missing. I want to share them here so that you can upgrade the course, which would be helpful for us. Hover state and toggle state. Dragging pages from 1-2 to 2-3 and then back from 3-2 to 2-1 with dragging is not working. Another thing is that we learned scrolling the website from top to bottom, but scrolling or pushing things from right to left has been completely omitted. These are the things I have noticed, and I would like you to upgrade them so that we can improve our Adobe XD skills.

2,000+ classes ranging from fundamentals to advanced techniques.

Character Styles

Character Styles

Lesson Info

40. Character Styles

Lessons

Getting Started with XD

What is UI vs UX

The UX Brief & Persona

Wireframing (Low Fidelity)

How Wide for my Website

Existing UI Kits

Working with Type

Basic Colors & Buttons

Free UI Icons

Footers & Lorem Ipsum

New Pages & Artboards

Class Project 01 - Wireframe

Prototyping & Interactivity

Create a Popup Modal

Prototype

Groups & Isolation Mode

How to Use Components (Previously Components)

Production Video - Left Nav

Repeat Grid

Updating Components & Repeat Grids

Prototype Tricks

Navigation Tricks & Tips

Class Project 03 - Components

Mocking Up an App

XD App on Your Phone

Fixing the Position

iPhone & Android Status Icons

Production Video - Login

Sharing Wireframes

Recording Your Interactions

Class Project - Wireframe Feedback

Mood Boards

Class Project - Mood Board

12 Column or Grids

Working with Colors

Tricks for Using Colors

Gradients

Class Project 06 - Colors

Use Web Safe Fonts

Character Styles

Font & Text Tips Tricks

Plugin Lorem Ipsum

Paste Properties

Class Project 07 - Text & Buttons

Draw Custom Icons

Strokes & Lines

Pen Tool

Drawing Practice

Production Video with Tips

Illustrator in XD

Class Project 08 - Custom Icons

InDesign in XD

Pros & Cons for Images

CC Library Connection

Adobe Stock

Free Images

Masking

Photoshop in XD

Infographic

Class Project 09 - Hi-Def Mockup

Mobile Phone Mockup

Class Project 10 - Mobile Website

Hidden Features for Repeat Grid

Plugin - Content Generator

Plugin - UI Faces

Plugin - PhotoSplash

Plugin - Copy Cat

Advanced Asset Panel

Advanced Symbols

What are Micro Interactions

Button Grow

Animated Image Gallery

Full Vector Change

Class Project 11 - Micro Interactions