Adding and editing text layers

Tutorial Breakdown

Great typography is vital to great designs, and Studio’s tools empower you to make strong typographical decisions. Knowing how to make the most of these tools is a surefire way to create highly navigable digital experiences that inspire trust.

In this tutorial, we’ll look at:

  • Adding text
  • Formatting text

Studio project file

Download this free Studio project file to follow along—step by step—with the tutorial.

New to Studio?

Download the latest version of InVision Studio to get started

Download StudioDownload InVision Studio

Transcript

When you're ready to add some text to your design InVision Studio has type and typography tools that make it very easy and very streamlined to create beautiful type. So if you've got your sample file opened up that's included with this video, we've got an area at the top that has an image that needs some text on top. So first things first. Let's get zoomed into this area by selecting it and then pressing Command 2 on the keyboard to zoom to our selection. And now that we're zoomed in, it'll be a lot easier to work. So now, we're ready to add some text. And the way we do that is by using the Text tool, which you can access either from the toolbar at the top of the screen. You'll find the Text tool here or by tapping on the letter, T, on the keyboard. When you tap on the letter, T, your cursor will become a text cursor, which can be used one of two ways. You can either click to add a line of text. Or you can click and drag to add a body of text and to set the boundaries of that body of text. We're going to do both. But first, I'm going to start with our body text here by dragging out a box moderate in size, leaving a margin around the top, bottom, left and right. And then when I let go, we're ready to click and add in our text. I've already got my text copied to my clipboard. I'm just going to hit Command V to paste it. And you'll find that my text has pasted in with some settings remembered. But yours may paste in a different color. Yours may paste in with a different font family. So it's important that we take a look at how to format this text before we go any further just to be sure we're all on the same page. So we are inside this text box right now. And that means we don't have all of the text selected. We can either highlight our text in order to format it, or we can select the entire text box. The text box is an object. It's an object that we're currently inside of. So to pop back out and select the text box as an object, we can hit the Escape key on the keyboard. And when we do so, you see the boundaries appear around the text box itself. And now we can click and drag to move it around, which is important, because we may not have placed it centered. We may not have placed it in the right place or at the right size at all. So now we've got control over all of that by being outside of the text box, so to speak. Now that we have the entire text box selected, we are also controlling all of the text inside. And therefore, any changes we make here will affect the entire text box. So first things first-- font family. Our font family-- we're going to go with Oswald, which is a font included with your demo files. And Oswald is currently selected on my machine. If it's not selected on yours, you can either do a search for Oswald, or you can scroll through the list and find it. But just typing O-S-W should make it appear immediately, unless you've got other fonts that start with O-S-W, which is unlikely. So we'll select Oswald. And then with that font selected, we will choose a specific weight for that font, which is medium. So with medium selected, our fonts look nice and substantial. We could also bump the size up a little bit. But before we do that, it's still possible that your text is black and a little bit illegible. So let's head over here to the swatch that's to the right of our font weight. And when you click on that, you get your color picker. And you'll find that I've already created two document colors within this document that you can choose from. Or you can just drag around on the color spectrum until you find the color you're looking for. But we are looking for white here. If you don't see the document colors on the bottom, there is a dropdown menu where you can switch between global colors, document colors, or recently used colors. So make sure you're looking at document colors if you're looking for those two colors that I've saved for you. The other one, that red color, we're going to need that in just a moment. Let me click to dismiss that. And our size, we can bump this up a little bit. You can either use the arrow keys on the keyboard, or you can type in a specific value. I'm going to go with 26. But the other thing we want to do is we want to make sure the text is centered and all caps. So I've got my text centered already. You've got alignment options here for how to align the text within its respective box. Centered is going to be our second option which we'll choose. Down below and to the right, we can choose our capitalization options to either go title case, or we can go all lowercase, regardless, of how the text was typed or all uppercase, regardless, of how the text was typed. And you'll notice that in all upper case, the text gets a little bit bigger. And now we've gone to a fourth line. So again, we'll go in. We'll adjust the text box size until we're back on three lines. And then we'll center that back up again. And when it comes to centering a text box, you'll notice I'm just clicking and dragging and using those smart guides to snap to the center. But you can also go to the top of the inspector and use the center option to force the selected object to be centered on the canvas. So now, that's looking pretty good. The only thing is the letter spacing. We've got a little bit of extra space between these letters that we can reduce just a fraction. And by heading to letter on the inspector, we can bump this down. I'm going to go negative 0.4 just to match the original design. And that's looking pretty good. Now, I think we're ready to add our line text down below. Now before we do that, I do want to point out the word, fixed, here on the inspector. You'll find you have a switch to toggle between auto or fixed. Fixed means that the text box size, specifically, the width of the text box is determined by us. And it will stay fixed at that size. The text will simply wrap around and around and around to create new lines each time it reaches the maximum width of our established text box. Auto, on the other hand, asks that Studio determine the width of the text box based on how much text is in the box. So let's look at the alternative here by creating another piece of text. So I'm going to click on the canvas to make sure we have nothing selected, to make sure I'm not accidentally typing in the inspector. And I'm going to press the letter T on the keyboard to switch to the Text tool. And now this time, instead of clicking and dragging, I'm just going to click. And by clicking, we get line text. And that line text is going to determine the width of its container automatically. You'll see auto is now selected on the inspector by default. When you click, you get auto. When you click and drag a box, you get fixed, because one way, you're determining the size of the box. The other way, you're not. And Studio's going to do it for you. So now, Studio's going to do it for us. So we're going to make this say read more. And Studio has remembered our font settings, which is nice. We'll just make a few modifications from here. And I'll press Escape to get the box back, so that I can click and drag to move this around. And the next thing I want to do is make sure it's centered. So I'll use the inspector again to click and make sure that that is centered. And that is separate, again, from the text being center-aligned within the box. There's the box itself, and there's the text within the box. Both should be set to centered if we want to make it centered and keep it centered as text is added and removed. So with that done now, we're ready to change the formatting a little bit. We're going to switch the font weight from medium to semi-bold. And now that we've got semi-bold, we can bring this size down a smidge. We'll bring the size all the way down to 16. And I'm going to increase our letter spacing. I'm going to go to a positive 0.8 here instead of a negative. And when I hit Return, that's looking pretty good. But because we played with the font size, because we made some changes to the formatting, we have affected its alignment on the page. Now, you might be wondering, why did we affect its alignment on the page if it's centered? We centered it up here. We centered the box. And we centered the text within the box. So what the heck just happened? And the reason for that is that the size of the box changed. And we misinformed Studio on how we wanted it to handle the position of the size of the box changes. That's actually right here. So we've got our responsive resizing settings set to respect the top left corner of the box as it's resized. We want that to be centered as well. We want it to be centered relative to the art board. So now, I'm going to center that up again. And now you'll find that if I make this bigger or smaller, even if I do so drastically, it keeps it centered. Because as the box resizes, it's now respecting the center as the anchor point from which that resizing will occur. That's a very important thing. We'll talk about that and more responsive resizing in other videos. The last thing we want to do to format this text is to choose that red color. So I'll click on our white color swatch. And then we'll head down to our document colors, which, again, is a drop down. So you may need to switch it to document colors. And then we'll choose that red color. And that's looking pretty good. So now, we've got our area text here that's a fixed box that we can control. We've got our auto text here, which, again, it has those handles. And those handles are there so that you can click and drag to make it a fixed size. You can see there that just by clicking and dragging, it's switched from auto to fixed. I'm going to hit Command Z to undo, because I want to keep that on auto in case the size of this changes, in case the text string gets longer or shorter as edits are made. I just want it to remain centered the way we have it set at all times. So that's looking pretty good. Just remember your text tool for adding text, and the inspector on the right-hand side for formatting it to create beautiful typography in just a few minutes.

Read More
Free. Forever.

Push your craft to new heights.

InVision Studio—designed with you in mind.

Make your next screen your best one yet.

Download studio free Download studio