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

Sharing & editing with other UX designers 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

All right, in this video we are going to take it another step along, we send our file off to be shared with our client, and that worked great, but let's say we're going to be sharing this with other colleagues, working in a UX design team, at a company, and there's more than one of you working on documents. 

So I need to share this with somebody that can actually start working on the project, kind of work together. To do that we need to introduce something called Teams and Team Projects. So we got so far with just the drafts, and using our sharing, so we look in here, kind of gave us an indication, right? 

If I want to share I can send it to say, Doug, and I want him to be an editor, but it says, "Hey, first, to be an editor you need to move it to a team project." I'm going to click 'Close', up here it says it as well, "Do you want to move this file?" A lot of things are indicating, needs to be in a team, so let's go and look at that the manual way. 

We can move it and it will automatically happen, but let's have a look the long way, just so you can understand it better. So back at my little Home house here, we've been working in drafts, you can have unlimited drafts, a bazillion drafts, eventually though, if you want to be sharing it with other people, and working on it, you need to move it into one of your projects. You also be named differently, depending on how you set up Figma, but this is called a team, think of a team as like a project, like Scott Headphones, as a freelance UX designer, you probably have about 20 teams or 30 teams, for different companies.

 Some companies only need one team with lots of projects inside of it, and the projects might be things like, hey, there's the mobile website, the desktop website, it might be some social media stuff we're working on, it might be some flyers that we've made, or the redesign of that web page, and then redesign again, lots of different projects. 

So you share the kind of company-wide team with the different people, so I can go to 'Members' and say, I want to invite you, you, you, and you to this team, and inside of this project we're going to have Desktop, Mobile, January Sale, all that sort of stuff. Anyway, those are what, that's the basic overview, of what teams and the projects are, so let's go back to this. 

So we've been given-- yours will be different, the name will be different, but you've been given, inside your team there's already a team project, it's this thing here, you can view it that way or this way, it's the same thing. We're going to delete it for the moment, create our own, they've given you like a pre-made team project with stuff in it, we can open it, have a look. 

 This is the default one for Figma at the moment, and there's just a bunch of styles, lots of things going on in here, different assets, it is, yeah, it's kind of useful. I find it's jumping in probably way too much for a newbie, so we're going to close it down, and you can keep it if you want, you don't have to-- back to 'Home', I'm going to, get rid of this project, right click it, delete it, sorry, team project. I'm going to create my own, '+', create my own project, and this one is going to be the eCommerce, it has to be lowercase "e" for some reason, 'eCommerce website', let's 'Create'. 

Now all we need to do is, this draft in here, the one we're working on, called, mine's called Scott eCom1, I can just drag it into this project, and that will unlock the editing, and you're like, why, what's the difference between drafts, and this kind of like team, with a team project, with a file inside that team project? This unlocks some of the features, so that I can actually collaborate with that person, I've still got that file open, nothing's really changed, except, can you see, it's not in drafts anymore, it's in that project, and now, when I go into 'Share', I can do more, I can allow people to edit, so I can say, "Doug, we don't really want to edit", but let's say, Victoria, um, Victoria, somebody I work with, another UX designer, I could send her email address in here, and she could start editing this thing. 

So why do I show you all of this? Because it pops up quite a bit, and it's one of those break points where you go from free to paid, because, let's have a look, let me show you. So back at 'Home', remember, drafts, you can have as many files in your drafts as you like, but if you want to share it with another collaborator, it has to be moved out to here, and I've got a team, that team can only have one team project, inside of that team project you can only have three files. 

So that's where they kind of, you know, that's where you move from going, "I need to pay for this", because it's great having one project, but I need two of them, eCommerce website and this other app, that I'm building for them, or this other kind of subsection that I want to break apart, rather than just jamming them in the same project. 

Now in terms of the files, yeah, you're going to need more than three pretty quickly. Now this changes, go to figma.com/pricing, and they will show you what you get. Actually I'll bring it up here, this is what it looks like at the moment, it will change, it says, Free, you're allowed unlimited drafts, but you're only allowed one team project, and you're only allowed three files within that project. 

There's a few other things as well, but this is where you might bump up to a paid, the paid product, there are ways around it, and a lot of people do, you're weirdly allowed, at the moment, unlimited teams. So I could have a zillion different teams, with one project and three files in it, and you can see how that works, and you can see how it might be a bit cumbersome as well, but it is pretty amazing what you get for free out of this Figma. Again, these rules will change, go and check figma.com/pricing, to see what is available and what's not. 

So to reiterate, I've got this, I can share it when it's in drafts, I can move it back to drafts, I can say, you, actually I'm finished with this project now, and I'm going to be sneaky and move it back to drafts, so they don't have to pay. The trouble with it though is, anybody that was an editor can't see it anymore, it comes out of their Figma and goes into drafts, and I have to kind of share it this way, there we go. Kind of like Doug, he can view it, he can comment on it, but he can't be a co-collaborator on it, so pros, and cons. 

There are a few other things that, you know, a paid version gives you that we'll throw in throughout the course, but that's one of the big ones. One team, one team project, and three files only. 

All right, that's it, I hope that helped, that really confused me at the beginning of, like this screen here, confused, kind of drafts, this thing, this thing, I can create more teams, what goes in here. I hope that helps, I'm going to leave mine back in drafts for the moment, so if you have dragged it out, put it back into drafts, you can just drag it, click, hold, drag it from one to the other, and we'll resume our regular scheduled, free version of Figma in the next video. All right, I'll see you there.

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