Note: If you have a different UI than in the course, you can change it back by clicking the '?' in the bottom right corner of Figma and select 'Go back to previous UI'. Happy Figma'ing!

Figma UI UX Design Essentials

Lorem ipsum & placeholder text in Figma

This lesson is exclusive to members

Course contents
SECTION: 1
Getting Started 30:36
SECTION: 2
Wireframing - Low Fidelity 11:03
SECTION: 3
Type, Color & Icon Introduction 1:12:34
SECTION: 4
Pages 8:32
SECTION: 5
Prototyping - Level 1 30:08
SECTION: 6
Animation Level 1 10:46
SECTION: 7
Commenting 14:09
SECTION: 8
Moodboard - High Fidelity 13:40
SECTION: 9
Columns 13:54
SECTION: 10
Tips & Tricks 7:21
SECTION: 11
Colors 34:48
SECTION: 12
Text & Fonts Advanced 47:48
SECTION: 13
Drawing 35:41
SECTION: 14
Working with Illustrator 4:16
SECTION: 15
Images 17:55
SECTION: 16
Working with Photoshop 11:58
SECTION: 17
Autolayout & Constraints 52:08
SECTION: 18
Effects 15:30
SECTION: 19
Saving & History 5:42
SECTION: 20
Components & Instances 36:15
SECTION: 21
Variants 23:04
SECTION: 22
Making a form 34:05
SECTION: 23
Prototyping - Level 2 43:01
SECTION: 24
Teams & Projects 5:19
SECTION: 25
Libraries 11:03
SECTION: 26
Animation & Micro Interactions 1:05:40
SECTION: 27
Thumbnail update 4:10
SECTION: 28
Exporting 34:21
SECTION: 29
What next 15:53

Questions

1
2
2

Course info

114 lessons / 12 hours 29 quiz questions 22 projects Certificate of achievement

Overview

Hi there - my name is Dan Scott & welcome to Figma Essentials.

Together - you and me - are going to learn everything you need to get started working as a UX Designer using Figma.

You can try Figma for free by clicking here.

We’ll use this UI UX design tool to create beautiful User Interfaces and engaging prototypes. Most importantly... we'll cover the client expectations of you as a new UX designer. 

This course is aimed at people new to design, new to User Experience design. Even if you’re not totally sure what UX really means, don’t worry. We’ll start right at the beginning and work our way through step by step. 

First we’ll describe the brief & how to work with a UX persona.  

Then you’ll learn how to create simple wireframes.  

From there we’ll look at how to implement colours & images properly in your designs.

You’ll learn the do’s & don’ts around choosing fonts for web & mobile apps. 

You’ll learn how to create your own icons, buttons & other UI components. 

You’ll learn some pretty scary terms such as Components, Constraints & Multi Dimensional Variants. They are all really easy to understand once you know how. 

We’ll also make our lives easier by using free UI kits & plugins for Figma which will speed up our workflow dramatically!

We’ll build a simple Style Guide ready for client handoff. 

You’ll understand how to make both simple & advanced micro interactions, page transitions & animations 

Before the end of this course you will have made fully interactive prototypes 

You will take a project all the way through -  collaborating with other team members and exporting the right files ready to hand off to your developer or software engineer. 

We’ll be focusing on the software Figma but I’ll make sure to explain the techniques & terms used in the UX and how real world projects are run. You will develop a great understanding of the industry and will be able to manage your own UX projects.

I will be setting assignments through the course which will help develop your skills and enable you to create something special and unique for your own portfolio. 

Alright - it's time to upgrade yourself & go from Figma Zero to Figma Hero.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

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.

Downloads & Exercise files

Transcript

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.

Bring Your Own Laptop
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025