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

Rectangles, Circles, Buttons and Rounded corners 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:38
SECTION: 27
Thumbnail update 4:10
SECTION: 28
Exporting 35:21
SECTION: 29
What next 14:53

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

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

Download Exercise Files

Transcript

Hey everyone, this video we're going to draw some rectangles, and some circles, and some rounded corners, very exciting, let's jump in. 

All right, let's first of all put in our kind of product shot, we're going to put in a placeholder image for that, I'm going to use my Selection tool, just click and drag over a bunch of them, and then I can drag it down, so I've got a bit of space. Let's grab the 'Rectangle' tool, it's one of those ones that you'll probably learn the shortcut for, and they're all hiding in here, see, rectangle, lines, all the kind of basic shapes. 

So as for the Rectangle tool, which makes sense, so I'm going to click, hold, and drag it out, and you get the big gray box, and you'll notice our text disappeared. So this brings us to layering, so over here, if you can't see it you might be on Assets, go to 'Layers', you'll see, there's my Homepage frame, and inside of that is all these different things, all the different texts we've added. 

Now we've got a rectangle, but it's on top, so we can do a couple of things, right click, say, 'Send to Back' please, and it's just that shortcut. You'll learn that one quite a bit as well. Learn the different shortcuts at your level, you might be ready for shortcuts, you might be not, you might be freaking out, so just right click and say, actually, 'Send to Back', or I want you to practice-- I've undone that, can you see here, I can drag this, kind of like, more like Photoshop, I'm holding it, holding it, dragging it. 

Now it's at the bottom of all those guys, and I can see it, easy, I'm going to undo it, and show you just one more painful way, mainly because there is a ton of ways of doing everything in Figma, and I'm going to show you the way that I think makes most sense for your level, and what's really common and useful, but if you find a different way, and you're like, "Hey, why didn't he show us that way, that's heaps better," if you find it, and you like it, you can do it, but let's say this one here, this little Figma menu here, if you're on a Mac you've got this top bit along the top here, which is exactly the same as Edit, where is it, 'Arrange", you can see how, no, I don't want to arrange, 'Object', there it is there, you can see how much I use this menu, not very often.

So you can, on a Mac you'll see these along the top, and they will correspond, see, File, there's File, Edit, there's Edit. So often I use these ones along the top here, but I know, if I'm using the browser version, these aren't there, on a PC, these aren't there, these are exactly the same. So I'll try to remember through this course, that I'm going to go to 'Object', 'Send to Back', but you might find in this course that, Dan's going up to arrange up the top here, and you're like, "Hey, I don't have that," there it is there, look. 

So I'm going to go 'Object', 'Send to Back', yeah, loads of ways of doing the same thing. Let's kind of get that in the middle there, you'll notice that a Figma is just, really naturally wanting to go to the center of things, center of boxes, center of artboards, you just drag it around, you don't have to do a lot, there are the full-on ranges along the top here, kind of, Arrange Center, Arrange to the Left, but often just dragging it around, does perfectly well. 

All right, let's do our buttons down the bottom here, so I'm going to zoom in, 'Command +', or 'Ctrl +' on a PC, and I'll hold my spacebar key down and click and drag. 'R' for the Rectangle tool, or just go up there, drag it around. We know that it is on top, you can drag it over here, what's the shortcut? It's a test, what's the shortcut to go all the way to the back? It's that square bracket, next to P on your keyboard, there it is, down, up, the other one, down, up, down. 

So I've got that button, I'm going to hold down my 'Option' key, and drag out another one. You might have to resize this, I want to move on to rounded corners, because when I say, "Do not, whatever you do, don't design this thing, it's hard because, you're like, "I want rounded corners", you're not bossing me, Dan." I'm going to make some little design choices, so with the Rectangle selected, you you might notice, these little dots, if you don't see these little dots, if I zoom right out, minus, ' - ', you see, they go away. 

So those little dots in the corners help with rounded corners, if you can't see them just keep zooming in, look, still can't see them, oh, are they there? Yeah, they're there. Zoom out, there's a level, look at that, they're not there, zoom one more in. I can grab them and drag them, and you're like, "Oh", there you go, nice round of corners. 

You can do it-- I'm going to go zoom all the way out to 100%. The shortcut is, where is that? So this is the long way, 100%, see this, Shift, that little arrow key is Shift, I was like, "What is that one?" Especially on a Mac, I'm like, "What the hang is that guy?" I have to look at my keyboard, luckily it's written on it, you think I'd know. So 'Shift 0' along the top there, goes to 100%, because that's probably a better place, to be designing around the corners, because you're like, "That's the way it's going to look." 

So if I'm doing it here, I can actually just do it here, in my kind of Property Inspector here, this right panel, I can say, actually, let's try it using my arrow keys, remember, the sweet shortcut, up one, oh, how does it look up another one, smashing it up, down. So I'm going to just put in somewhere across 5. It's handy because you can get consistency. Select this other one, go '5', click on this one, they're all going to have five rounded corners, look at that, because we are doing rounded corners, it's not appropriate right now, but if I click on this, zoom in enough, so I can see this radius. 

You can actually hold down the 'Option' key on a Mac, 'Alt' key on PC, and actually just click one of them and go like that, undo it, because we don't need it right now, but you probably had that question, like, can I do one by itself? You can, just hold down the 'Option' key on a Mac, 'Alt' key on a PC, and click it, and drag it, there you go. 

Now before we go let's add a little circle down the bottom here, so the Circle tool, it, the Ellipse is the 'O', I'm going to drag it out. Another thing that I haven't quite covered yet, if you want it to be completely circular or square, you hold down the 'Shift' key while you're dragging. So watch this, I'm going to go back to my Circle tool, and before I start dragging, hold down the 'Shift' key, drag it out, and you see, perfect circle, if I let go of it, ellipse or oval, back to holding 'Shift', I'm going to get about that. 

For the moment I'm going to put it down here, I'm going to grab my 'Type' tool and click once, I'm going to hit my '+', and I'm going to pick an appropriate font size. Now with Type, I want to move it, it's just going to kind of select it, so click off in the background, and then kind of just drag it to where you want. Font size, in here, I'm using my up arrow, to get it to a kind of a size that I want. Bold's kind of weird for that, there we go. 

All right, that is going to be good enough for this video, circles, exciting, rectangles, oh, one little bonus thing for circles, I was going to do this later, but look at this, see the circle, what's that thing do? You probably already dragged it, you ready? Absolutely useless, never used it. I can see, I'm like, yeah, that does a Bar graph, I have not mocked up a Bar graph before, so, sorry, Pie chart is what I want, so you can, that's what that thing does. Anyway, let's get on to the next video.

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