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

Tips, Tricks, Preferences, and Weirdness in Figma

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:00:51
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

Okay, it's time for a little interlude of exciting tips and tricks, and preferences and weirdness. It's kind of the name of this video. We're going to do, we're just going to go to our LoFi, because we've got more stuff to do tips and tricks with. So I feel you're at a point now, where actually some workflow stuff will actually, will actually not freak you out, but actually help you out, so let's go through a few of them. 

In terms of all the shortcuts, you can kind of find them by hovering above some of them, lots of them are hidden though. See this little question mark down here? I hope it's still here. If you click on this, like 'Help and Resources', we've all been conditioned by early software, that built-in help and resources is like useless. It should be avoided, but Figma's really good, let's click in here, and I'm going to go to the shortcuts one. 

They've got great stuff, but the shortcut one is really useful, nicely laid out. So the essentials, there we go, I'm not going to run through them all, I just want to show you, just have a little look through and go, okay, there's that one, there's that one, View, all these ones, how to access the Layers panel, jumping from Assets, Design, Prototype. We've been doing that a bit, going between here and here, you might go, okay, that's me, that's Alt or Option 9. So just work through, there's some really good ones, I'll cover the main ones throughout this course, but there are some nice ones in there. So let's go 'Option 9' on mine, and 'Option 8', Design, Prototype, Design, Prototype. It's a little helpful thing down there, I'm going to go back to the Design. 

Another really useful shortcut is, the shortcut that rules them all, hold down 'Command' on a Mac, 'Ctrl' on a PC, and hit your forward slash, look at two slashes, one of them goes forward, one of them goes backwards. So the forward slash brings up this, you're like, "What is that?" Basically, it's going to look through everything Figma can do, if you can type it and spell it okay, remember, before I was changing the color, well, I wanted to select all the same Fill, so if I select it there, I kind of did that flippantly, when we were doing commenting, right? Be like, where is that again? 

What you do is, I don't go and find, I know where most of them are, but this is, I'm doing this for your benefit, because this is a really awkward way of doing it. It's all about the shortcuts, at least for me, anyway. So I can click on this and go, 'Command /', and I can say, 'Select', I've just typed in s-e-l-e, I don't even just spell very well, I can select all the same Fill, then go and change the color, I find that super useful, instead of having to figure out where is it, is it is under Edit, is it under Edit?, whether it's Select, is it View, so just type it out. If I want this all to be uppercase, I'm just going to go 'Command /', and I'm going to go upper, there you go, uppercase, boom. I don't have to do anything, I have to go find it, it's in there, it's over here somewhere as well, but I use that 'Command /' all of the time. 

Another handy thing which we haven't really covered, is right clicking, so if you go into here, right clicking will actually show you stuff, relative to what you've got selected. You can see, this will change depending on what you've got selected, and there's just helpful bits and pieces, that relate to what you're doing, bring forward instead of all the way front, you can see the shortcut, you just click it here, you can move it to another page. 

So right clicking stuff will give you lots of interesting things, related to the object you've clicked. Right clicking, you know, right clicking heads on my list here. Preferences, there's only a couple that I would change, up to you. So I'm going to go to, I have no idea what preferences are, so we're going to use our 'Command /', and type in "preferences", because it's not the one in there, oh geez. Where are we, preferences, I bet you they're under Edit, no, they're under File, please hold, there they are, down the bottom here. there's not many in this program. 

So the one that I change is, 'Keep tool selected after use', I turn that on, it's off by default. It just means that whenever I grab my Rectangle tool before, and I dragged it, it went back to the Selection tool, then I had to go back to my Rectangle tool, to pick a tool, and it stay around, up to you. The only other thing I go and mess with in here is under 'Preferences', and the 'Nudge Amount', so small nudge just means, a nudge is this, when I grab that rectangle, let's say I'm working on this, I'm going to use my sweet shortcut, 'Shift 2'. Shift 2 is, we did Shift 1, everything that is on this entire frame, or page, sorry, and if I've got something selected, Shift 2 zooms right into it, and then back out a little bit, because it's a bit too intimate, anyway. 

While we're here, nudging, so I've got these two in a group, nudging just means it's going to go one pixel at a time, and that's probably fine, unless I'm dealing with my 8, remember, we did our app design, and we're dealing with 8, our 8 point grid, you remember it, that's 8 grid, and we did 8 points. We're doing app design, so it could be really nice, and go into here and say, 'Preferences', 'Nudge Amount'. Actually, the big nudge is not 10, it's 8, that's useful, because it means that I can get it to here, and be nudging in points of 8, only useful when you're developing apps. 

All right, a little bit, not super exciting, that one, but let's have a look at-- we've got these groups, I know that that is inside of there, again, I know I can double click them to get inside. A nice shortcut is to be holding down, the 'Command' key on a Mac, 'Ctrl' key on PC, and just click on it once, you see, it just dive straight in, rather than having to go click, double click, and when you've got lots of things kind of grouped, let's say that you decide to group this using normal group, then I'm going to group it with that. You're groups, with groups, with groups, you have to double click, double click, you can just hold down the Command key, so they have it trying to figure out all of this, I can grab this line by just holding down 'Command', and clicking once, I've gone straight in there. It's 'Ctrl' on a PC, let's undo all that, I totally wrecked it. 

Those are my shortcuts that I use, there's a few more I'll introduce in the class, but really, that 'Command /', and then just typing things in, looks even, got the ones that I've used last, which is nice, and this little 'Help' thing down here, and checking on the shortcuts, is kind of, I'm teaching you how to fish, that's what I'm trying to do, that's what I'm trying to say instead of teaching each individual one. 

Let's also cover a few weird things in Figma, just so-- they might be catching you out already, or maybe in the future. Let's say, if you do have a frame, is this weird? No, this is just a regular, this is a group, you can go up here and say, "Actually, I want all the extra stuff for a frame." If you have got groups everywhere, and you want to move to using frame features, you can just switch it over here. Things that are weird, is, if your name appears above a frame, it's called Frame 1, if I end up putting it up here, where am I going to put it? I'm going to put it just outside everything, can I get it there? Let's get it above everything, there you go. 

So if you end up with names everywhere, it's because this frame, even though it looks like it's in Home page, it's not, it's hanging out by himself, you got to make sure he goes in there. All right, so that is it for my tips and tricks, preferences, and a little bit of weirdness there at the end. All right, I'll see you in the next video.

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