1

Copyright © design__ix
Contents
INTRODUCTION....................................................................................................................................................3
GETTING STARTED WITH FIGMA.......................................................................................................................4
What’s FIGMA ..................................................................................................................................................4
Signing up .........................................................................................................................................................5
The basics ..........................................................................................................................................................7
Creating new file .............................................................................................................................................9
Importing from sketch ................................................................................................................................... 13
EXPLORING FIGMA........................................................................................................................................... 14
The main Toolbar .......................................................................................................................................... 14
The Properties Panel ..................................................................................................................................... 18
The Layers Panel ........................................................................................................................................... 20
FIGMA TOOLS IN ACTION .............................................................................................................................. 22
Frames ............................................................................................................................................................ 22
Grid and Guides ........................................................................................................................................... 26
Creating Shapes............................................................................................................................................ 29
Pen & Pencil tools .......................................................................................................................................... 35
Boolean operations ....................................................................................................................................... 36
Alignment Tools.............................................................................................................................................. 41
PROTOTYPING, TEAMS & SHARING .............................................................................................................. 44
Creating prototypes ..................................................................................................................................... 44
Sharing Our Files........................................................................................................................................... 46
Working with Teams ..................................................................................................................................... 47
Exporting file from Figma ............................................................................................................................ 49

2
Copyright © design__ix
 INTRODUCTION

I've broken down this course into multiple sections.

1. Introduction
2. Getting started with Figma
3. Exploring Figma
4. Prototyping
5. Sharing & Teams
6. Exporting from Figma

We'll first get started with Figma. Learn what it is and how we can access it.
And once we do that then we'll start experimenting with it using some of the tools that
we have access to, like frames and creating shapes.

And once we do that, then we'll move on to our first mobile mockup project where we'll
design a full mobile application with seven pages.

And while we're designing that mobile application, we'll learn a lot about the tools that
we have access to in Figma, such as components, constraints, and plugins to help us
design the seven pages which will include a login page and the pages that the user
needs for setting up their account and then our main pages from where the user can
place a laundry service order, browse their laundry service history and once we
designed that full mockup we'll go ahead and use prototyping tools create a
prototype that we can show our client or our customers and we'll test out this prototype
in both the presentation mode of Figma as well as on our actual mobile device as well.

Then we'll wrap the first project up by learning about sharing our project with teams,
with clients, and how to export our files out of Figma. Once we do that we'll jump into
a second project and this one will be a full web mockup application from which
laundry stores can browse their revenues and stats and earnings as well as view the list
of orders coming in for their laundry store.

If you're ready, let's jump into the first section and start learning about
Figma.

3
Copyright © design__ix
 GETTING STARTED WITH FIGMA

What’s FIGMA

 A Web-Based Design Software

 It’s free
 Great for Teams & Collaborations
 Very Easy to Prototype with
 Cloud-based and Easy Access

So what's Figma? Figma is web-based design software that's super easy to use.

It's completely free to use and it's great for teams and collaborations. Everything from
being able to work together in the same environment, kind of like Google Sheets and
Google Docs, all the way up to being able to leave comments for your colleagues or
even jump in and see what they're working on.

So once you have a finished design project, it's super easy to see it live in action, either
on your mobile device, or your web device and it's super easy to share with clients all
have them jump in and try it out as well.

And again it's cloud-based, so you don't have to worry about saving your project
constantly or installing another software because you have easy access to it on the web,
from your favorite web browser.

So to get started with Figma, you just head on over to figma.com

4
Copyright © design__ix
Signing up

If you already have an account you can log in

or if you don’t have you can go ahead and sign up.

Go ahead and fill in your account information and then click Create Account.

That's going to ask you. What's your name? and what kind of work do you do?

So we're going to choose the design and then Crean ate Account.
So it might take some time to get to this page. So just give it some time.

5
Copyright © design__ix
But once you're here, this is essentially just a welcome page.
If you want to start a project with a team. This is where you can give your team a
name.
If not you can go ahead and click “do this later” which is what we're gonna do.

Cool. It will give you a quick tutorial of the whole Figma app, but we're going to go
over this tour ourselves next lesson.
So, for now, I’m just gonna close it but feel free to go through this as well if you'd like.
So now we're signed up for Figma and we're ready to learn the basics.

6
Copyright © design__ix
The basics

So once we sign up for Figma, it will already put us in a started file here. But let's go back to the main
page of Figma, so we can go over the basics, and then we'll go ahead and create a new project as
well.
So let's go up here.

This is where you see your menu option. Go ahead and press it and then go ahead and click the first
option “Back to Files”.

Cool. So this will take us to the main page of Figma. I see here, it's given me a tutorial that if you
already have a Sketch file, you can import it from here. This is one of the super cool features that we'll
cover in a future lesson. For now, I'm gonna go ahead and just close the window here but feel free to
go through that little tutorial on the main page as well. We will go over the same things here as well.

7
Copyright © design__ix
So first things first, on the right side here you'll see your name up, and your account information. You
can change your account info if you'd like. Plugins are something super cool that we'll go over in a
future lesson as well, essentially it helps make your design process easier.

There's a search bar over here where you can search for files, teams, or people.

On the left side, you'll see your recent files over here, where you can browse all the files that you've
started. There are drafts which are essentially where you can start a new project from here and
below it is your team.

So if you're working with a team, or multiple teams, or multiple clients, you can start teams and you'll
see all your listed teams, as well as the projects that you have for them right here. Initially, you might
notice that Figma's created a team for you with a first project which is where we started. You can start
new teams from here and we'll be doing this in future sections as well.

8
Copyright © design__ix
Just go over how you can work with teams in Figma. On the right side over here, you have the import
button, which helps you, again, bring over files such as PNG, JPEG, or even Sketch files that you've
worked with before into Figma, and convert them into a Figma file.

From here you can create a new Figma file, which is where you can start designing your projects.

If you ever find yourself stuck on something, you always have a help option down here as well as
resources that you can refer to. So that includes you know whether their help center, community
forums, tutorials, and even if you want to go through the tutorial in the beginning you can always do
that by clicking Reset Onboarding.

Creating new file

There are a couple of ways to start a new file. You can either go ahead and press the plus icon here in
your draft or click on the New design file.

You can also do that here, but for this lesson, we're gonna just create a new project in our Drafts
folder, which is essentially where you're gonna be creating most of your files from. So let's go ahead
and click the plus icon here.

9
Copyright © design__ix
And as you can see we're in a new file here and I can see that this file named “Untitled” belongs to the
Drafts folder as well. From here, on the left.

We'll see our main toolbar at the top and we'll see the properties panel on the right here. In the
coming section. We'll go over each option that you have in your toolbar as well as your layer and
property panels.
But for now, let's go ahead and name our file.
Simply go over here where it says “Untitled” and click on it and we're just gonna name this our “First
File” press enter and there you have it.

You also have access to Version History from here. As we make changes to our file. Figma will keep
multiple versions for us, in case we made a mistake or in case we just need to go back and see what
we've done before. We'll go over this in detail in the coming sections.

Keep in mind that as you make changes, Figma will autosave your work. And so there is no
need to press Save.
And if you try to do so it will just mention that Figma autosaves your work.

10
Copyright © design__ix
So this is really cool and useful.

ctrl + s ⌘+s
windows mac

I do want to go over some of the menu options you have here. So if you click on this icon over
here you have access to your menu options.

We already know what this “Back to Files” does. It will just take us back to the main screen.
You can search for things here and you can also create new files here. Place images.
You can also save your Figma file somewhere in your folders on your local machine. You can
manually save everything up until now in a version history, which again we'll go over. You can
export from here.

In the Edit panel, you have access to some of the common options such as undo, redo, copy,
and paste. We'll also be using a lot of these tools in our future lessons.

11
Copyright © design__ix
From View, you have access to pixel and layout grids, which we'll use in our future projects.
You have access to some of your zoom options.
You can choose what to show and hide in terms of the panels on the left and right.
We will go over the other options as we start designing.

One thing I do want to mention is that if you're more comfortable having Figma as a desktop app, you
also have the option here with “Get Desktop App”.

12
Copyright © design__ix
Since I already have it installed on my machine. I'm not going to go ahead and save it but feel
free to do so if you do wish to continue in the desktop app, which is what I'm going to be
doing. Keep in mind that almost everything is going to be the same between the Web and the
Desktop app. So if you do wish to continue in the web app, by all means, you can do so.

Importing from sketch

So in the last lesson, I mentioned that you can also import files from Sketch. This is super useful.
In case you've already started a project with Sketch that you want to move over to Figma.
The easiest way to do so is to go ahead and drag your Sketch file, right onto the Figma app.
1. Click in the toolbar
2. Select File > New from Sketch file:

And this might take some time.

Once it's done you'll see it says file imported successfully.
Click “Done” and I can go ahead and double click to open it.
So for your project, you might need to go ahead and reassign some of the fonts or download
them on your machine and we'll go over how to download fonts and make them work with the
Figma web app in the future lessons as well.

13
Copyright © design__ix
If you've used Sketch before, you'll notice that a lot of the elements have been converted to
Figma elements, which is great.
Keep in mind that it's always best to go over your Artboards or your Frames to ensure that
everything has been imported successfully.

EXPLORING FIGMA

The Main Toolbar

So in this section, we're going to explore the tools that we have access to in Figma.
If you haven't already done so from the last section. Go ahead and create a new file by
going to Drafts and pressing this + sign here.
If you're continuing, go ahead and just open your “First File” that we just created in the last
section. In this lesson, we're going to go through everything that we have access to here at the
top of the Main Toolbar of Figma.
First things first is a menu option that you have access to from here.
Moving to the right, you have your Move Tool as well as if you click, you have access to a
Scale Tool.

The Move Tool's the tool that you're going to be mostly in as it lets you move objects around
and quickly resize them.
The Scale Tool, as the name might suggest, is great for resizing your objects.

Next, we have access to Frames.

Frames are essentially what helps us organize our design and we'll go over them in future
lessons.

Right next to it we have Shapes.

14
Copyright © design__ix
So from here, we can create shapes such as rectangles, lines, arrows, ellipses, polygons, and
stars, and we can even place images from here.

Right next to it, We have the Pen Tool, which helps us create more customized shapes.
From here, you also have access to the Pencil Tool.

Then we have Text, to simply add text to your project.

We have a Hand Tool, which helps us move around in our project without accidentally editing
something.

15
Copyright © design__ix
We have a Comment Tool.
So we're working with multiple people, This is a great way to communicate and leave
comments for them, within your designs.
Wherever you are in your project, you can always go back to the main Move Tool here by
either pressing escape on your keyboard or V.

In the middle here, we have more access to our file options.

Now, these Avatar icons represent people inside my project.

This will be more useful when you're working with teams.

You have the Share option here as well, which helps you share your file with other people and
give them certain permissions.

16
Copyright © design__ix
The last thing here, we have Present.
So this is great when we're working with clients or we want to show our team what we've built.

And last option here, we have access to Zoom Tool which helps us zoom in and out on our files.

The middle here is where our canvas is. So all of your designs will go in here.

In the next lesson, we're going to go over our Properties Panel.

17
Copyright © design__ix
The Properties Panel

On the right side, you’ll notice that there’s a Properties Panel. So right now, because we have
nothing selected in canva we can only change the background color

You also have access to export options, which we’ll go through in the later sections.
Let’s go ahead and just draw a rectangle. As you can see, my options on the right side here
have now changed. I have access to the position of my rectangle within the canvas here.
So that’s the X and the Y. I can also see the Width and Height of my rectangle here and I can
change it from here as well. By just clicking on it and dragging right to increase it or left to
decrease it. And if you want to specify a specific number, you can always jump in here and
put in a number.
And you also have access to the border-radius, which changes how round your rectangle’s

Down here, I can edit the fill of this rectangle, so I can change the color I want.
I can add a stroke to it and I can increase the size of the stroke.

18
Copyright © design__ix
I can choose whether it should be in the center, the inside of the rectangle, or the outside.
Down here, you have access to some effects such as Drop Shadow. So as you can see here, it’s
added a little shadow under our rectangle, which’ll go over how to edit later.
So in the Effects options, you have access to more effects that we’ll discover later.

And lastly, you can export the rectangle here by going here and clicking Export.
The default format is PNG, but you can go ahead and change it to JPEG, SVG, and PDF here
as well. We'll go over Export in more detail later as well.

Now let's go ahead and select Text and go ahead and just click on your canvas here and let's
just type something random. Let's click away and now I have a text here as you see. You might
notice that now my options here have changed.
Now, I still have access to my position and size. But now as you can see down I have a text
option from which I can set the font of my text, I can change the weight of the font.
Make it bold or make it thin. I can change the font size from here. As well as some more
detailed text options there, which we'll go through in future lessons.

19
Copyright © design__ix
The Layers Panel

So now, we're going to explore the layers panel on the left. You're going to be using this
panel a lot because it stores all of your elements in your project.
So as you can see, I can access this text here from here, in my layers. I have access to this
rectangle here.

Now hold alt then left-click on Rectangle 1 and drag above NEW TEXT, by doing this you will
get a copy of Rectangle 2

One thing to note here is that when your object in the layers panel is higher than another
object, it will be presented on top of that object. So this creates a View Hierarchy.
So just to show you an example, I'm going to go to the Rectangle 2. Change the Fill to blue.

20
Copyright © design__ix
When we move Rectangle 2 below Rectangle 1, then instead of the blue square we will see
rectangle 1 (red)
If I do the same thing with my text here, bring it up here. You'll notice that right now it's on top
of the red rectangle because it's at the very top of the layers.

You also have access to Assets from here, which we'll go through in future lessons and you
have access to create multiple pages for your file here as well, which we'll cover in more
detail as well.

21
Copyright © design__ix
 FIGMA TOOLS IN ACTION

Frames

So what's a Frame in Figma. Frames are essentially a way to help us organize our objects
within our project.
So if you have multiple screens for let's say a mobile application that we're working on, each
will represent each page within that application. So if I want to put these objects in the frame,
I can do so by going up, where it says frame, or another option is to press the F key on your
keyboard.
And now, if I go ahead and drag a frame around these objects it will create a frame which
we can see has this white background now.

And now these objects have been automatically added to my Frame.

So for the first frame here, I created a frame with random size. But if you want to get some
options for some sizes for your frames, when you go ahead and create a new frame or press
F you'll see on the right panel, I have options for phone sizes here, such as the iPhone Pro Max,
Google Pixel. I have some tablet options here.
Desktop if you're working on a web or desktop application. Watch, Paper, and Social Media,
which is super useful. So why don't we go ahead.

22
Copyright © design__ix
Go to the phone tab here and create a frame for the iPhone 11 Pro here.

And as you can see, Figma automatically inserts a frame in your project with that specific
device size.
You can duplicate Frames by having one selected and pressing Command + D if you're on a
Mac or Control + D if you're on windows. Alternatively, you can hold Alt and select one
frame and just drag it over to a new position in your canvas.
So now I have three frames here.

23
Copyright © design__ix
I'm going to use Command + Scroll to just go ahead and zoom in and out. One really neat
thing is that you can use Alignment Tools to align your frames.

So let's say your frames are misaligned and you want to get them evenly spaced. Go ahead
and select all of them by just dragging. And then if you go, at the bottom right corner, there's
a little option, and if you press that. It will go ahead and give us even spacing between all the
frames here.

Now if you want all the frames to also be vertically aligned as well, you can go up here and
then go ahead and find align vertical centers.

24
Copyright © design__ix
And now as you can see, they've all been nicely organized vertically as well.

One neat thing about frames is that you can go ahead and copy and paste elements inside of
them within the same position.
So as an example, let's create a text on frame let's click away. Now if you hold Alt you can
see where your object is within your frame.
Select Name, hold Alt and move mouse on frame.

25
Copyright © design__ix
So I can see it's 76 pixels from the top, 58 from the left, 275 from the right, and 718 from the
bottom. If you want all your frames to have this text, go ahead and copy it by pressing
Command + C or going to Edit > Copy, go to your new frame and simply paste it by
pressing Command + V, and automatically it will paste it within that same position.

Grid and Guides

Now, if you've worked with other design tools before, you've probably used Grids. If you
haven't, it's totally fine. Grids essentially help us keep all the objects within our frame
organized and distributed properly.
To create a grid inside your frame, go ahead and select it, and then in the Properties Panel
here, you'll see an option Layout Grid.
Go ahead and add one by pressing the plus sign here

26
Copyright © design__ix
and now as you can see I have a grid inside my frame.
There are a couple of options in terms of your Layout Grid. We can change those options by
clicking this little grid icon.

Right now I'm using a regular grid but you can also create Column Grids, which are pretty
common in web applications.

27
Copyright © design__ix
So I can do a count and now I'll have a grid of 12 columns evenly spaced. You can change the
color of your grid or the opacity.
So for example, we can set it to 5 percent here, and now it's a little bit lighter so makes it
easier to see your objects within your frame.

You can change the Type to a Center grid if you want to add spacing on the right and left.
Or you can do something like a Left align or Right align for your grid.
The stretch option typically aligns your grid evenly throughout your frame. You can add a
margin here as well, such as and that's another way to add spacing on the left and right and
do let's say a larger margin and use that as a kind of guide for our project.
You can also edit the Gutter option, so you can have a bigger gutter here or a smaller one.

So feel free to play around with this and find an optimal grid for your project.
If you're working vertically you can also use a Row Grid and that will help you distribute your
items along the vertical axis. For the main grid option, you can also choose the size.
You can have multiple grids by just pressing the plus icon and assigning a new grid such as
let's say a column grid. So now I have both a Column grid and a Pixel grid.
You can hide and un-hide them or go ahead and just simply remove them from your frame
from here as well. Another option is to organize your objects inside your frame.
Is to use what's called a Ruler here. You can use Shift + R to show it and hide it or you can
also toggle it from View > Show Rulers.
One cool thing about the ruler is that you can use it to add guides to your frame by going
over it and just clicking and dragging away and creating guides within your frames.
While you're hovering over a guide you can also use Alt to see exactly how much space
you're working with here. The same thing goes for a horizontal guide here.
To remove guides from your frame. Go ahead and just click and drag it back into your ruler
and that will get rid of them. And that's how you use grids and guides within your frames.

28
Copyright © design__ix
Creating Shapes

So in this lesson, we're going to explore shapes a little bit more.

I've gone ahead and deleted all the frames in my file. Just to keep it simple. To create
a shape, again, we can head on over here where we have our shape tools. And we
have a variety of shapes from a rectangle to line, to arrows, to ellipses, polygons, and
stars and we can even place images. This is super useful and we'll go over it in future
lessons.

But for now, let's go over some of the common shapes that you'll be drawing in Figma.
First and foremost the Rectangle Tool. You're going to be using this a lot to create
rectangles in your files.
Now one thing I want to note is that if you want to create a square, so you want to
create a rectangle with equal sides.
You can hold down Shift while you're drawing your shape and that will constrain the
proportions of width and height. So it's the same. Right.
Let's click away and let's create a circle as well, by going over to the Ellipse Tool.
If you don't get the exact size that you want, again, you can always go to the
properties panel and give it the exact size you want. So if I make 299 pixels, you see
automatically it will also set the height and that's because this little constraint
proportion icon is on.

If you turn that off and change the width and height, it will change independently and
it won't change the other.

29
Copyright © design__ix
To add some styles to your shape, simply go over to the shape that you want to give
the style to. Now from here, you can do things such as change the fill of your shape
and add a stroke.
So let's first change the fill of this square, by going to this little color icon over here,
clicking on it

And that's how we get our nice little color picker here. From here you can go ahead
and change the color that you like. I'm going to make a nice blue over here.
If you want to add a gradient, instead of just a solid color, you can do that by clicking
on solid and changing to either a Linear, Radial, an Angular, or Diamond gradient.
But the most commonly used is a Linear gradient. If you notice the first color we picked
is on the left now, which is at the top of the gradient here, and the bottom color is
currently set at a zero opacity, which means it's not showing on the screen.

30
Copyright © design__ix
Feel free to play around with it until you get the gradient you like.
Now one cool thing about Figma is that you can go ahead and add rounded corners
easily.
To do so, go ahead and select the rectangle. Go over to this little circle in the corner.

Doesn't matter which corner just go ahead and pull it in while you're clicking on it and
that will create nice rounded corners for your shape.
If you want to take one step back, press Command + Z.
If you want to add a border-radius to just one side, you can do so by holding down Alt
or the option key on your keyboard and then dragging it in that corner.
So now you see, you only have a rounded corner on one of the corners and the other
corners are at the zero corner radius.

31
Copyright © design__ix
You can change all of this by selecting the shape here and going to the right over here
where you see, now I have a mixed corner radius.

You can also disable these independent corners to go back to having just one corner
radius that you can also set from here.

Let's add a stroke here as well for our shape. So you can go ahead and just bump this
number up, so I'm going to From here, you can go ahead and change the color
1. Open stroke menu
2. Change stroke color
3. Change stroke size
Now one really neat thing about Figma is that you can copy styles between shapes
very easily and to do so.

Go ahead and select the shape that you want to copy the style over from and then go
to Edit, go down to Copy Properties.
Alternatively, on mac, you can hold down Option + Command + C. Go to the shape
that you want to apply it to, and then Option + Command + V.
For windows Ctrl + Alt + C for copy, and then Ctrl + Alt + V for applying on another
shape.

32
Copyright © design__ix
So if you want to take your shape and manipulate it in any way you can do so by
double-clicking on it.

And once you see this little pattern over here,

that means that you're inside the shape and you can do things such as, extend the edge
and you can do this to any edge that you want.
And if you want to round one of your edges, you can do so by holding Command or
Control on Windows and then dragging away. You can tweak your curvature using
these tools here as well.
So go ahead and experiment a little bit if you want.
If you want to separate two components from each other, so you can tweak the shape
without tweaking the stroke or tweaking the stroke different way. There's a really neat
tool that Figma has and we're going to explore that. First, let's click Done. So we're
done manipulating with the shape.

33
Copyright © design__ix
While you have your shapes selected, go over to Object. Find Outline Stroke. Once
you do select Outline Stroke.

In my layers panel, I can see that now I have two different Rectangle shapes. One is
for the stroke and one is for the actual shape.

And, just pulling away the shape and now you'll see that they're completely separate.
If you want to go back just press Ctrl + Z on windows, mac Command + Z.

34
Copyright © design__ix
Pen & Pencil tools

In the last lesson, we explored shapes and we started creating some shapes and
manipulating them as well.
So now we're gonna learn about the Pen Tool, which is up here. You can select it by just
going up here or pressing “P” on your keyboard.

The Pen Tool gives you a little bit more freedom in terms of creating your shapes. Once
you have it selected, you can go ahead and click anywhere on the screen. And that will
create a point and give you another point that you can place on the screen as well.
While you have your Pen Tool, you can hold “Shift” so that your next point snaps to,
you know, a 90-degree, 45-degree, or a zero-degree angle. So that makes it a little
bit easier.
At any point, you can press the escape key to get out of that Pen Tool.
If you finished editing your shape and you want to go back and add more points in
there, simply go ahead and double click on it. And to add more points to it, you can
just go back to the pen tool, while you're inside the shape.
Before going out of my shape, while I'm inside here, I want to show you the Paint
Bucket Tool.

You can select the paint bucket tool from up here and it will essentially let us fill only
parts of our object if you want. Go ahead to the fill color and change it to maybe a
nice blue-ish color
So again, the paint bucket tool allows us to add color to only a certain portion of the
shape. Couple of cool things you can do.
So feel free to experiment with that here. When you're all done,
Click “Done” or the Escape key.
If you want to change the thickness of the lines or have your corners rounded

35
Copyright © design__ix
So feel free to play around with that to get the roundedness that you want.
That's what it's about Pen & Pencil.

Boolean operations

In this lesson, I want to show you something really neat called Boolean Operations. I
know it sounds a little bit advanced, but it's simple and it can be really useful when
you're creating shapes.
So when you have multiple objects selected. So for example, I'm going to go ahead
and select these two shapes here.
You can do so by clicking one shape and then while holding “Shift” clicking on another
shape. So now I have both selected.

Now you'll notice a little icon will pop up over here called Boolean Groups.

36
Copyright © design__ix
If I click on it, you have four options. You have Union, Subtract, Intersect, and Exclude.
We're going to go through each one of these.
But before we do that, let's go ahead and bring it closer.

That looks good. So now we have two separate shapes here, that we just overlaid on
top of each other.
So again I'm going to select both, this time I'm just going to drag across both of them.
So now I can see both are selected here. Go to Boolean Groups and then Union
Selection.

Now I have one single shape.

37
Copyright © design__ix
So what Union Selection does essentially takes my two shapes and combines them into
one.
If you double-click on it, you'll see that you still have access to both shapes here.

So I can go ahead and actually move them around and then go ahead and press
Escape and these two essentially now conjoined shapes.

So I'm going back. Just gonna Command + Z or Ctrl + Z a bunch of times until we're
back to having two shapes and then now we're going to try Subtract Selection.

Subtract Selection allows you to remove that part of the shape from the other shape
that you had selected.

38
Copyright © design__ix
So as you can see, this part of the ellipse is now removed from this shape that we've
created before.

And again I can jump in here. Double click. And if I move my ellipse around.

You can see that. I can manipulate my new shapes.

So now again I'm going to press Command + Z or Ctrl + Z a bunch of times until I
bring it back to here, where I have two shapes selected.

The Intersect Selection will go ahead and just keep whatever is in the middle.

39
Copyright © design__ix
So any part of the shape that's overlapping between these two shapes, which happens
to be this portion right here will be kept and everything else will be removed. And if I
go back.
Lastly, we have Exclude Selection. Essentially that will do the opposite and remove
that part where these shapes are overlapping and keep everything else.

Lastly, we have Flat Selection.

As I mentioned, if you go ahead and double click. You still have access to each of your
shapes and you can go ahead and move them around as you like, but whenever you're
done editing and you're sure that you want to keep the shape as it is.
You can use Flaten Selection to make it combined.

So that's your Boolean Groups.

40
Copyright © design__ix
Alignment Tools

So in this lesson, we're going to go over some of the alignment tools that you have
access to here.

So I've created a frame with a bunch of rectangles in them.

First I'm going to explore Align Left.

This will take all of the objects that I have here and align them to the most left object I
have.

So now you see, they're all aligned on the left side.

Now, if I undo that and Align to the center. It will try to find the center of all those
shapes, which happens to be here.

41
Copyright © design__ix
And then Align Right will do the same thing as Align Left except everything will go to
the right.

You have Align Top which will take everything and align them to the top.

Align Center will do the same thing but within the center of those shapes.

Similarly, we have Align Bottom.

Now, remember, all these alignment changes are happening within this outside
bounding box, which is enclosing all the objects that I'm aligning.

42
Copyright © design__ix
And now from here, you can see I have access to things such as Tidy Up, Distribute
Vertical Spacing and Distribute Horizontal Spacing which is super cool.

Let's start with Tidy up.

It will try to create even spacing between all the shapes here.
So now you can see, they're all evenly spaced. I can control that by going over here to
the middle where there's a little pink line and then go ahead and drag left if I want
less spacing between them, or right if I want more spacing between them.

I'm just going to move some of my items around now, and now if I select them here by
using the Distributed Vertical Spacing.
When you select that option it will try to take all the objects you have within this
bounding box and try to distribute them vertically.

43
Copyright © design__ix
 PROTOTYPING, TEAMS & SHARING

Creating prototypes

All right, so as I mentioned in the intro of this course, one of the real power tools in the
figure is it's prototyping.
So prototyping allows us to bring our designs to life so that we can see all the pages
here in action. So right now, if you go to this button and present, which allows us to see
what our designs would look like on a device.

And while this is cool, as you can see right now, there's no order. And You can use the
left and right keyboard keys to toggle between pages.
But if you want to go ahead and create a prototype for this design with a prototyping
tool, we can take this project to the next level and create a prototype out of it.
So let's go ahead and open up the prototype panel here.

As you'd see, it gives us a little preview here.

We have the device, the iPhone 11 pro because our screen sizes or frame sizes are
matching with the iPhone 11pro. And then we can even change the background color
of our presentation mode.

And so now that we're in the prototyping mode, make sure that you select the
prototyping mode.

44
Copyright © design__ix
You can go ahead and create connections between pages. And here's what I mean.
If we selected to let's see this frame over here. And so now these two frames are
connected.

And if I tap anywhere on this frame and my preview mode, it will go to this page and I
can demonstrate that. But again, going to preview mode.
If I go back, you'll see I get a bunch of different options as well.

So you can choose the animation to be instead dissolved. Smart animators move in,
move out.
So depending on how you want your animation to happen, you can go ahead and
tweak and play around with those here.

45
Copyright © design__ix
I won't get too much into the details of the different animations, but feel free to play
around with it and see what feels right.
And then you can go ahead and change how you want to trigger that page change
over there.

When you want to link a specific element, just click on it and drag it to the specific one
you want to show. Don't forget that you need to be on the prototype card.
You can use a delete key to get rid of prototype connections here and then.

Sharing Our Files

So sharing your Figma files is super simple. If you go up here right beside where your
avatar is you can actually go ahead and click the share button and from here you can
invite someone directly in here.

So if you type their email and send an invite it will send a link to them.

And then from here based on who you've invited you can go ahead and choose what
sort of permission they have whether they can just view or they can also edit the
designs as well.

46
Copyright © design__ix
So if you're just sending it to a client maybe you just want them to view it but if you're
sending it to another designer working on this project you can go ahead and choose
edit for their permission.
Keep in mind that this setting belongs to sharing the link so you can get a link to your
project that you can give to anyone by just going in copying the link from here.

And so once you do that the link has been copied to your clipboard.
So just as an example, open up a Firefox page and hit enter. Once it does load I'll be
able to see the project and browse it from here.
this will be great if you're sending it to a client to just share that link with them and then
choose the view option.
So that will work just as expected so again you can share your projects and you can
even select an individual frame.
Select it and then go to share and then choose a link to the selected frame.

But if you want to share the whole project as we did before. You can use the share
button and that will share your FIGMA file with anyone that you'd like. You're always
more than welcome to share your projects with me.
Now in the next lesson, we're going to explore how you can work with teams in FIGMA
as well.

Working with Teams

So as we mentioned before FIGMA is really powerful in terms of working with a team.

So if you want to work with a team on this project or any other project again you can
go to the share option and then type that person's email in and they'll get a link where
they can work with you on this project.
But before we do that let's say you're working with a team on multiple projects and
you want to set that team up for multiple projects in your FIGMA.
So to do that first you have to go to the FIGMA home page again on the web. You just
have to go to the menu option and choose back to files.
And then from the lower-left corner, I'll see there's an option to create a new team.

47
Copyright © design__ix
It will ask you to give your team a name.

After you input the name of the team, click Create Team then a new card will open,
ahead then add your collaborators from here by simply putting their email in.

So I'm gonna go ahead and invite one of my colleagues to join me on this project. Go
ahead and continue.
And now it will ask you to choose your team plans if you're working with multiple
people.

48
Copyright © design__ix
You might want to go with a professional or organization plan but the free plan gives
you access to up to two editors and three projects.
So let's go ahead and choose the starter for now and then we have a team here where
we can assign a logo. We can change the name and description and everything.
And you can even add more people to your team from the right side. Once you're on
your team you can go ahead and create a new project in the upper right corner.
So, make a project and name it according to your wishes, and then choose the permits
that the people in your team will have.
Once you have determined the permits for the people on the team
Go ahead and create a new file or just drag files from the outside into here.

So if you have multiple people working with you this way you can see exactly who's
doing and who's working on what right now observe them as well. And then you can
even go ahead and leave comments for them as well.

And again with the comments tool, you can go to any part of the page and leave a
comment for that part of the page so that the other designers know exactly what
you're talking about.
If you also tap this comment option here from the site you can also see all the comments
and browse them and leave replies and quickly jump to the comments that you want to
maybe reply to or to see the replies that your team has made.

So again very powerful and you can use the escape key to get out of that coming to
court.
So that's teams for you and figure it out again it's super powerful and it helps you
become more productive with your designs and within your team's.

Exporting file from Figma

49
Copyright © design__ix
I can go ahead and just select one frame and then we’ll hold shift slight. My very last
frame. And so that will select all the frames in between. Make sure you selected all
fame and nothing that you don’t want to export.
And then from here you can find the next four tabs and go ahead and click plus

you'll see we're exporting nine layers here with the resolution of 1 x.
So if you want to increase the resolution to x you can do that you can go ahead and
choose what format you want your export to be in.
You can select PNG there are JPG, SVG, and PDF.

So with those frames selected, you can export nine layers, and once you do that it will
ask you will get ready to export that and we'll ask you where you want your export to
be made.
If you want to export one frame or any element, just click on these and click export.
And so that’s how we export projects, frames, or elements from FIGMA.

50
Copyright © design__ix