Skip to main content

Sharing & Editing With Other Ux Designers In Figma

Lesson 29 from: Figma UI UX Design Essentials

Daniel Walter Scott

Sharing & Editing With Other Ux Designers In Figma

Lesson 29 from: Figma UI UX Design Essentials

Daniel Walter Scott

new-class art & design

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

Lesson Info

29. Sharing & Editing With Other Ux Designers In Figma

<b>In this lesson we will cover how to share your Figma designs with other UX designers so you can both work off the same file.</b>

Lessons

Class Trailer
1

Introduction to Figma Essentials

02:53
2

Getting Started with Figma Training

03:06
3

What Is Figma For & Does It Do The Coding?

03:46
4

What's The Difference Between UI And UX In Figma

05:22
5

What We Are Making In This Figma Course

09:18
6

Class Project 01 - Create Your Own Brief

04:01
7

What is Lo Fi Wireframe vs High Fidelity in Figma?

02:34
8

Creating Our Design File & Introducing Frames In Figma

08:29
9

The Basics Of Type & Fonts In Figma

10:51
10

Rectangles, Circles, Buttons And Rounded Corners In Figma

06:50
11

How To Use Color In Figma

05:45
12

Strokes Plus Updating Color Defaults In Figma

09:28
13

Object Editing And How To Escape In Figma

01:47
14

Scale vs Selection Tool in Figma

02:39
15

Frames vs Groups in Figma

09:24
16

Class Project 02 - Wireframe

03:00
17

Where To Get Free Icons For Figma

09:10
18

Matching The Stroke Of Our Icons

05:16
19

How To Use Plugins In Figma For Icons

04:31
20

Class Project 03 - Icons

03:48
21

How to Use Pages in Figma

08:31
22

How to Prototype in Figma

10:46
23

Prototype Animation and Easing In Figma

10:53
24

Testing On Your Phone with Figma Mirror

05:40
25

Class Project 04 - Testing On Your Phone

03:51
26

What is Smart Animation & Delays in Figma?

08:44
27

Class Project 05 - My First Animation

02:01
28

Sharing & Commenting on a Figma File with Stakeholders

07:10
29

Sharing & Editing With Other Ux Designers In Figma

06:58
30

How I Get Inspiration For Ux Projects

06:39
31

How To Create A Mood Board In Figma

05:33
32

Class Project 06 - Moodboard

01:26
33

How to Work with Columns & Grids in Figma

13:54
34

Tips, Tricks, Preferences, and Weirdness in Figma

07:21
35

Color Inspiration & The Eyedropper In Figma

06:34
36

How To Create A Color Palette In Figma

09:02
37

How to Make Gradients in Figma

07:09
38

How to Create & Use Color Styles in Figma

08:01
39

Class Project 07 - Colors & Columns

04:00
40

Fonts on Desktop vs in Browser in Figma

01:30
41

What Fonts Can I Use? Plus Font Pairing In Figma

06:01
42

What Common Font Sizes Should I Choose In Web Design?

11:30
43

How to Make Character Styles in Figma

06:36
44

Lorem Ipsum & Placeholder Text In Figma

04:28
45

Useful Things To Know About Text In Figma

09:35
46

How To Fix Missing Fonts In Figma

02:42
47

Class Project 08 - Text

05:19
48

Drawing Tips And Tricks In Figma

09:38
49

Squircle Buttons with ios Rounded Courses In Figma

02:48
50

Boolean, Union, Subtract, Intersect and Exclude with Pathfinder in Figma

07:25
51

What Is The Difference? Union vs Flatten In Figma

03:36
52

Class Project 09 - Making Stuff

03:29
53

Smart Selection & Tidy Up in Figma

08:40
54

Do I Need To Know Illustrator With Figma?

04:15
55

Tips & Tricks For Using Images In Figma

06:11
56

Masking & Cropping Images In Figma

09:12
57

Free Images & Plugins For Figma

02:31
58

Do You Need Photoshop For Ux Design In Figma?

10:40
59

Class Project 10 - Images

01:17
60

What Is Autolayout & Expanding Buttons In Figma?

10:27
61

Class Project 11 - Buttons

01:15
62

Auto Layout For Spacing

05:47
63

How To Use Constraints In Figma

08:22
64

Combining Nested Frames Auto Layout & Constraints in Figma

11:54
65

Adding Text Box Autoheight to Autolayout in Figma

08:27
66

Class Project 12 - Responsive Design

02:19
67

Nice Drop Shadow & Inner Drop Shadow Effects In Figma

05:56
68

Blur Layer, Background Blur & Image Blur in Figma

05:57
69

How to Make Neumorphic UI buttons in Figma

07:37
70

Class Project 13 - Effects

01:53
71

How To Save Locally & Save History In Figma

05:42
72

What are Components in Figma?

06:19
73

Updating, Changing & Resetting Your Components

07:47
74

You Can’t Kill Main Components In Figma

07:22
75

Where Should You Keep Your Main Components In Figma

05:02
76

Intro To The Forward Slash / Naming Convention In Figma

08:55
77

Class Project 14 - Components

00:44
78

How To Make Component Variants In Figma

06:41
79

Another Way To Make Variables In Figma

06:14
80

How to Make a Multi Dimensional Variant in Figma

11:13
81

Class Project 15 - Variants

01:41
82

How To Make A Form Using Variants In Figma

12:52
83

Class Project 16 - Form

01:27
84

Putting It All Together In A Desktop Example

19:44
85

How To Add A Popup Overlay Modal In Figma

03:03
86

How To Make & Prototype A Tool Tip In Figma

07:26
87

What are Flows in Figma?

05:39
88

Slide In Mobile Nav Menu Overlay In Figma

03:55
89

Class Project 17 - Prototyping

01:10
90

How To Pin Navigation To The Top In Figma

10:17
91

How To Make A Horizontal Scrolling Swipe In Figma

06:36
92

Automatic Scroll Down The Page To Anchor Point In Figma

04:50
93

What are Teams vs Projects vs Files in Figma?

05:18
94

How Do You Use Team Libraries In Figma

11:03
95

The Difference Between Animation & Micro Interactions

02:55
96

Animation With Custom Easing In Figma

25:36
97

Class Project 18 - My Second Animation

01:54
98

How To Make Animated Transitions In Figma

12:34
99

Class Project 19 - Page Transition

01:31
100

Micro Interactions Using Interactive Components In Figma

05:54
101

Micro Interaction Toggle Switch In Figma

04:23
102

Micro Interaction Burger Menu Turned Into A Cross In Figma

04:23
103

Class Project 20 - Micro Interaction

01:35
104

How To Change The Thumbnail For Figma Files

04:10
105

How To Export Images Out Of Figma

07:40
106

How To Share Your Document With Clients & Stakeholders

07:09
107

Talking To Your Developer Early In The Figma Design Process

03:55
108

Sharing Figma With Developers & Engineers Handoff

06:07
109

What Are The Next Level Handoffs Aka Design Systems

03:18
110

Class Project 21 - Finish your design

04:57
111

What Next?

06:08

Lesson Info

Sharing & Editing With Other Ux Designers In Figma

All right. In this video, we are going to take it another step along. OK? We send our file off to be shared with our client and that worked great. OK? But let's say we're going to be sharing this with other colleagues. OK? Working in a UX design team, OK? At a company and there's more than one of you working on documents. OK? So I need to share this with somebody that can actually start working on the project and we 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, it 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 gonna click close up here. It says it as well. Do you want to move this file? OK. A lot of things that indicating needs to be in a team. So let's go and look at that, the manual way we can move it an...

d 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, ok. 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. Yours will be named differently depending on how you set up. Uh fig A OK? But this is called a team. OK. 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. OK? For different companies, some companies only need one team with lots of projects inside of it. OK? 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. OK? Or the redesign of that web page and then redesign again, lots of different projects. OK? So you share that kind of company wide team with the different people. OK. So I can go to members and say I want to invite you, you, you, you and you to this team. And inside of this projects, we're going to have desktop mobile January sale, all that sort of stuff. Anyway, those are, those are the basic overview of what teams and the projects are. So let's go back to this. OK? So we've been given yours will be different. OK? 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. OK? We're gonna delete it for the moment and create our own. They've given you like a premade uh team project with stuff in it. We can open it, have a look. OK? This is the default one for fig A at the moment. OK? And there's just a bunch of styles, OK? Lots of things going on in here. Different assets. OK? It is. Yeah, it's kind of useful. I find it's jumping in probably way too much for a newbie. So we're gonna 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 gonna create my own plus, create my own project. OK? And this one is going to be the E commerce. It has to be lowercase E for some reason, ecommerce website. OK. Let's create it. Now, all we need to do is there's a draft in here. The one we're working on called one's called Scott Econ one, I can just drag it into this project and that will unlock the editing. OK. 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. OK? So that I can actually collaborate with that person. I've still got that file open. Nothing's really changed except you can 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 uh OK, Doug, we don't really want to edit, but let's say Victoria. OK. 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? Uh because it pops up quite a bit and it's one of those break points where you go from, free to paid. OK? Because let's have a look, let me show you. So back at home. OK. 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. OK? 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. OK? I need to pay for this OK, 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 wanna break apart rather than just gyming them in the same project. Ok. Now, in terms of the files, yeah, you're gonna need more than three pretty quickly. Now, this changes go to fig a.com/pricing and they will show you what you get. Ok. Actually, I'll bring it up here. This is what it looks like at the moment it will change. Ok. It says free. You're allowed unlimited drafts, but you're only allowed one team project. Ok? 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, uh, unlimited teams. Ok. 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. Fig A, um, again, these rules will change, go and check fig a.com/pricing to see what is available and what's not so to reiterate. Ok, I've got this, I can share it when it's in drafts. Ok? I can move it back to drafts. I can say you actually, I'm finished with this project now and I'm gonna be sneaky, move it back to drafts. OK? So that I don't have to pay. OK. The trouble with it though is anybody that was an editor can't see it anymore? OK. Comes out of their sigma and goes into drafts and I have to kind of share it this way. Here we go. OK. 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, that, you know, a paid version gives you that will 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 the screen here. Uh confused the academy drafts, this thing, this thing I can create more teams what goes in here. So I hope that helps. I'm gonna 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 fig A in the next video. All right, I'll see you there.

Class Materials

Bonus Materials

BYOL_Figma_Cheatsheet.pdf
Exercise_Files_-_Figma_Essentials.zip

RELATED ARTICLES

RELATED ARTICLES