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

Testing on your phone with Figma Mirror

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

Hello, this is the other side of my office, you're normally looking from that way, across this way, this is, that way looks like, my junk and my sound boards, to try and make it sound nice, and it's night time, it's not kind of moody, it's just actually dark, it's about 11 o'clock at night, and we're making courses for us. 

In this video we are going to be looking at something called Figma Mirror. What is it? It's a way of testing our, you know, we're on the computer trying to design a phone website, a mobile first website, or an app. There's no point spending all your time on there, you need to be testing it on the device, that thing. 

So there is an app you can download from, either the Android or the Mac app store. You can tell I don't use it, but it's called Figma Mirror, they might be changing that name, check in the comments if they have updated it, but it's called Figma Mirror. You sign in with your Figma username and password, then somehow, magically, just starts happening, you don't have to be on the same network, it's magic. 

Basically what happens is, can I show you here, I'll show you, can you zoom in on that, you kind of can, basically, if I click on different things here on my desktop, you can't see what I'm doing over here, but if I click on my 'Details' page, where is it, Details page, there it is, click on my 'Checkout', so it's kind of live updating, and even better, it's actually live and interacting. So will this work? Maybe. 

So click on my 'Home' button, what can you see, Home button, Home button is too small, because I can barely click on it, and you can't see what I'm doing, Buy Now button, look at that, Purchases, what is it focusing on? Is it focusing on the right thing? Maybe. Fades, oh look, how good this is. So I can actually work on it, and the big thing I'm going to show you is, the Buy Now button, is too small, the text look fine on desktop, but it's teeny tiny in there. The Purchase button looks all good, when I go to Buy Now, how is this filming, the cam, this is probably terrible, but hey, that Purchase button feels good to me. 

I'm finding it very hard to click on the buttons along the Nav as well, they just need to be-- they don't need to be bigger, they need to be smaller, with a bigger area around them. So a frame to make them bigger. Logo is too small, text on the Purchase page is good, the Checkout page, and I do get stuck on the Learn More page, I don't have any sort of like prototyping of the, more deep Product Details page. I forgot to add it, you probably saw it in the last video, but it's when you get to this kind of stage, and you're like testing it on your own, you're like, ah, forgot that bit. 

Well, that's way too small, or that's a hideous color, green. Actually, that's probably pretty good, oh, one-- let's do a live update, because, that's pretty cool. I'll adjust the zoom so we can do it a little bit better, you wait there, I'm going to change the camera. 

All right, probably should have done this at the beginning, watch this, it live updates, I'm moving stuff around on my desktop, so you're looking at my laptop there, my phone over there, and yeah, you can just kind of work, so you-- when I'm working, especially at this initial stage, getting font sizes and stuff ready, I just kind of, like I don't have it propped up, I just have my phone lying down on the ground, so you can see it, this is really handy now, I can go through and say, actually, font size here, what do I want to do? 

It's a group, so I'm going to go into my group, and I'm going to use up and down, until I find something-- what I'm looking at, is, I'm keeping my eye out on my phone here, that's what I'm looking at, I'm like, "Is that an approachable for our size?" What you'll find is, pretty much always, 16 is good, you can't see it because it's on this side of my desktop, but I've gone to 16 points, that generally is a no-brainer good one, can't wreck it, 15, if you're trying to be cool and fancy, and trying to keep it small, but if you get down around the 12s and 13 points, it becomes quite a tricky thing to--

It's fine for some things but for a big old click now, Buy button, it feels a bit small, so I want to go through, and let's make this a bit bigger, move them across, center them together, over there. I'm going to have to do the same for the Learn More button, it's hard doing it one-handed, I need my hands over here, but I don't want my hairy knuckles in the video, but you get the idea. 

You can make changes really quickly, be seeing what it looks like on a phone, it's pretty much instantaneous, I'm, I don't know, I'm pretty amazed by how that works. So yes, if you're designing for tablet, have a tablet, if you're designing for desktop, it's a bit easier, because you can just do it on your desktop, a mobile phone, or an app, or a mobile first website, like we're doing. Desktop is part of our plan, but it's secondary, most of our audience is going to be coming from paid ads, because I talk to the client about it. 

Those are the kind of conversations you talk about as well, like lead generation, where is it all coming from? It's coming from Facebook ads, it's all going to come from mobile phones. If it's coming from YouTube how-to videos, like a lot of my courses do, then it's desktop first. So kind of questions you're going to get into as a UX designer, what do we design for first? 

All right, it is late, and surprisingly hot, with all these cameras and lights going, I am going to-- let's make another video before we go to bed. All right, that is Figma Mirror, and testing your prototype on your phone. See you in a bit.

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