This lesson is exclusive to members

Figma UI UX Design Essentials

Lorem ipsum & placeholder text in Figma

Daniel Walter Scott

Download Exercise Files

Contents

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up
Hi everyone, in this video we're going to, introduce some placeholder text, instead of using the word placeholder text, or xxx, which we learned earlier on. I'm going to share a website to get it from, and I'm going to show you a sweet plugin called Content Reel, and we will update our paragraph style, just because, all that and more, actually, no more, just that in this video, let's get started. 

So we need some placeholder text, because that, writing that, or writing, I think earlier on we did xxx, that's not going to fly, we're going to use something called Lorem Ipsum, some people don't like using it, that's fine. You saw at the beginning there, it just is Latin mixed up words, that kind of look like English, there is Lauren Ipsum for all different languages, but let's have a look, there's an easy way, well, easy way, this is like, I don't know, it's a right of passage to go to lipsum.com, full of ads, horribly designed, but I don't know, everybody uses it. 

So if you only see it just this once, know that, there you go, that is it, I need one paragraph, generate Lorem Ipsum, and you can copy this out and paste it into your document, and it just kind of holds the place, the placeholder, that's about it, until we get the text from the copywriter. It just means we're not, yeah, it's a little bit easier to design, and it gives us an idea of kind of, like line height and different words, and the font size, but, like a lot of things in Figma, there is a plugin for that. 

So I'm going to go back to my 'Home', or, remember, go back to 'Files', however you get back here, find the 'Community' part, and we're going to go to 'Plugins', and I want to search for "content reel", r-e-e-l. This one here is super awesome, we're going to use it for this, plus a lot of other things on the course. There might be a better one now, Google "best alternative for content reel", or "best placeholder text plugin for Figma", I'm going to install it, and-- plugins are so good, install real quickly, go to the tab, open the plugin, there it is there, Content Reel, and what I'm going to do is, I'm going to grab my Type Tool, 'T' key, drag this out, and actually turn on my, columns, there we go. 

So I'm going to grab my Type Tool, and I'm going to drag up a Type Box, that's kind of fitting within here, and with the cursor flashing I'm going to say, "Lorem Ipsum". You can kind of break it down, we'll look at some of these other ones later on, but I want Lorem Ipsum to go in, it's too big. Imagine if I had a shortcut to get it to-- to get it down to like body copy text. 

So I'm going to select it all, and I'm going to go over here and say, actually you, my friend, going to be paragraph, and I've also noticed here, is that my line spacing. So my line spacing for paragraph isn't good, it's really tight, and I like it better over here. So what I'm going to do is, I'm going to click on this, what is this set to? Set it to 115%, I don't like that weird number, but over here it is set to-- how do I go and update this one? Who remembers, it's a good test, pop quiz, you remember, have nothing selected, and there they all are here. 

I can go into this, what I'm going to do is, finish with you, Content Reel, thank you very much, that was the Lorem Ipsum thing, we're finished with him, so here we are, it remembered that from the last time I was working. So if you delete it all and kind of just click out, it'll go to Auto, Auto is quite handy, it's pretty good. You can force it by typing stuff in, but I'm just going to leave it at 100% or auto, actually, it's not 100%, it's a little bit bigger. So the default here is 20.2, and I like that better. 

The cool thing about it is, now if I apply it over here, and I say, you are going to be the style of paragraph, it's going to keep the white, but it's going to use that new line spacing. So if you get style set up, even though they feel a bit early for them, especially with body copy, it means that you can update things quickly, across a really large document. I'm going to go, you, my friends, are, paragraph, look at that. 

All right, that is Lorem Ipsum placeholder text in Figma for your mockups. Oh, one note that, if you are working, you're like, say your client is like my dad, love my dad, if I send him this though he would complain that it was broken, and you might-- I'll have to explain it to him in an email, that it's placeholder text, and it's, you know, it's mixed up Latin words, just to give the impression, because we don't have the text written yet, just, just so you know, it'll happen once to you, all right, next video.