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
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!
Class Project 04 - Testing on your phone
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
Student class projects
Course info
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.
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
Founder of Bring Your Own Laptop & Chief Instructor
instructorI 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.
Downloads & Exercise files
Transcript
All right, it is class project time. I want you to download the Figma Mirror app, from Google Play or the App Store, I both named those wrong in the last, the last video, so go in there and look for Figma Mirror. If that's not working for you for any reason, you can actually, on your mobile phone, not on the desktop, go to figma.com/mirror, it works mostly the same way. So log in with your account, your Figma account, and test your phone.
What I want you to do is just have a bit of a big critique of your own work, are the fonts large enough and legible enough, are the colors easily contrasting? So I can actually see some of the text, that is like over the top of these, I know it's wireframes, there's not much going on, but are these fonts for the description big enough, they don't all have to be 16 and massive, but you know, some parts, that do need to be bigger, like this one here, this like smaller part down here, does it have to be bigger? I don't know.
I'm going to test it on my phone, also make sure that your buttons are all wired up, you go to 'Prototype', and just make sure they're all connected, when you're testing, and also, are they easily clickable, are the buttons big enough, and the last one, going to go back to Design mode. I have problems with these, they just didn't feel clickable, they're not-- they weren't very nice, just a bit awkward to click.
So what I don't want to do is, can you kind of see them there, I can see that, like this one here just needs to be bigger, like not the actual icon, I kind of like it, that size, it's the frame around the outside. Unlike a group, remember, a group, we can't deal with the frame independently, but because we're doing with these sweet cool frames, with the little hash symbol, it means that, let's have a look, that this thing inside, and this outside kind of wrapper, which is the frame, can be different sizes.
We're going to get a teeny tiny bit advanced here, but hey, let's do it. So I don't want to just grab the edge, because what I want to do is, I want to go inside of that group, hello, group, or any of these things, go inside of them all, and I want to say, actually, I don't want you to scale, it's trying to match the size of the frame, which is cool, but actually, I don't want that, I want to say, actually, just stay in the center, don't scale, means, when I grab my frame, which is this one on the outside, can I grab it, look, hey, I can make it bigger, it stays in the middle, which is cool, but I can start making my buttons a whole lot more clickable, without actually distorting the image, or trying to make the icon bigger.
Same with this one here, I can go inside of it, there's two vectors, I'm going to, Shift-click both of them, don't scale, please, just stay in the center, awesome. Go back to the frame around the outside, I'm going to say, actually, just be a bit bigger, nice.
So there, I haven't changed the size, I just made the clickable area easier to get to, and that's the only one I've actually rigged up, isn't it? You get the idea. So that is it, go and test your wireframe, and check in your, where's it? Class projects, I just want you to take it, can you take a photo of your phone, not everyone can, if you've got another person's phone, take a photo of it. I just want to see it on the screen, kind of proof that you did it, and a nice little, I don't know, cool graphic of your, first wireframe up on the screen, how do you feel now, like I remember, when I first did my ever, first wireframe, I still get that buzz of like, oh, the thing I made, it's on a device, it's on my computer, and it's exciting, it's interacting, I'm clicking buttons, I feel like a professional, I don't know, is that YouTube?
Anyway, take a photo, if it doesn't work, and you can't-- you've got nobody else around to take a photo, of your sweet new wireframe app, just take a screenshot from your phone, and upload it to the Assignments part of this website. All right, that is it, I will see you in the next video.
- Powered by Marvin
- Terms of use
- Privacy policy
-
- © Bring your Own Laptop Ltd 2024