Manage typography

- [Instructor] Here we are in our project, and now it's time to play with text. In this case, you can select any element, and anytime we need to change its content, you can select it and hit Enter. Then if I select the text and just change the text tile, I can select it, go here, change it to the text I want, size, bold, with a -40 for character spacing and 60 for line spacing, and our color here will black.

Then I can save this to my brand new Asset panel in XD. I just select the text I want and hit plus here. Now that style is saved in my Character Style. So I can now select all the elements that need to change as well, and click there. It's going to do it for me. Or if I'm smarter, I can go back all the way to the beginning because this style is also available in different places here, I can add this guide to my Character Style.

It's Helvetica, and then I can right click Edit, and now watch. All the changes I make here will be applied to all of those elements in real time. Isn't that cool? So everything's changed, everything is updated. I can do the same thing with this one, so on the mobile version, I have this here and titles there, so let's add this guy and let's Edit.

It's going to be the same Adelle, and the size here will be a little different. It will be 32, and then character spacing will be zero, and line spacing will be 32, and color black. Once I do it, it found all the instances of that title, and it applied my changes right there. All right, moving forward. Now I need to bring copy to be here.

To speed up my process, I'm going to go to finder. I'm going to select the Project Text folder, and I'm going to drag a text file that says Header.txt that contains unformatted text. I just select it and drag it there. It populates my area. Then I'll do the same thing with Design Thinking, with Design Sprint, with my SURF, and if I want, even with my Focused here.

Now that we're here, let's say you need to repeat this elements horizontally. For that, we have a pretty cool tool called the Repeat Grid, so you select all the elements you want to repeat, and you hit Repeat Grid. Now it just repeat them, and I can adjust the padding by selecting this pink area, and I find that perfect spot, and I can then update this to Fun, my text there is unique, and this is Fast.

If I need to make changes to the height, let's say it's a list, I can then ungroup this grid. Now that's all ungrouped, I can go to finder and drag text. So my Focused is already there. My Fun is here, and my Fast is right here. So that's all you can do with text in Adobe XD.

I can also do things on this side if I want to drag those so header will come here. As I move down, Design Sprint is already there, and then on this area, I can say okay, my Focused goes here, my Fast goes here, and my Fun goes right here. Perfect. It's looking a lot better. Now that we learned how to do everything with text, using the brand new Character Styles panel in the Asset panel in Adobe XD, let's learn how to do the same thing now with colors.