Hello and
welcome to an Envato Tuts+ course. I'm Adi Purdila and in this course
I'm going to introduce you to Figma, a super powerful and
free design tool based in the browser. Now Figma is very similar to other
design tools like Adobe XD and Sketch, but it also has a unique set of features
that we're gonna explore in this course. So here's how we'll break it down. First, we'll have a closer look at what
Figma is and what you can do with it. Then in the second chapter, we'll learn
the basics like working with projects, files, the UI, the different tools,
and also plugins. The third chapter is about
using Figma as a designer, and we'll get very practical
by designing a sign up form. During this process we'll use a bunch
of different tools like components, color and text styles,
auto layout, and more. Then in the final chapter, we'll learn
about using Figma as a developer and how we can use it to inspect
a design file and export assets. So if you're ready, we should get started
by answering the question, what is Figma? We'll do that in the next lesson,
so I'll see you there. Welcome back to the course. In this lesson we're going
to answer probably the most obvious question which is what is Figma? Well, to put it simply
Figma is a design tool. And with it, you can create
anything you want for the web, from user interfaces to
illustrations to icons. So, if you want to design a small
smartwatch app, you can do it in Figma. If you want to design a large e-commerce
website, you can do it in Figma. Illustrations, icons no
problem cuz Figma is also a vector editing application,
which is pretty cool. Now Figma is a browser-based design tool. And even though it does have
standalone desktop applications for Windows and Mac OS, most of the time,
you'll probably use it. And it's, let's call like natural
environment, which is the browser. So you can open it in any compatible
browser on any operating system. Mac OS, Windows and
Linux, which is awesome. Even more awesome is
the fact that it's free. So, how do you get Figma? Well, let's have a look. You would go to figma.com, and regardless
of where you use it in the browser or on the desktop,
you need to have an account. So if you have one, you would log in. If you don't, you would sign up. And we'll do that. But first I wanna quickly
talk about pricing. So I said in the intro of this course that
Figma is a free software and it is free. It does have this starter plan,
which is free. Of course in some regards you are limited. So you can only create three projects, you
have a version history of just 30 days. And you're missing out on some of the more
premium features that you can see here. However, these plans, professional and organization are only suitable for teams. So if you're an individual or
you're running a very small team, then the free plan is more than enough for
you. I've been using Figma
as an individual for, I think, two, maybe three years now, and I never needed to upgrade
to any of these plans. I'm still using the free version. So now, to get started, as I said, if
you have an account, go ahead and login. Personally, I'm gonna go ahead and sign
up, and I'm gonna to sign up with Google. And I just have a demo account setup here. And I'm just gonna select design here,
and Create Account. It's really that simple. And once my account is all set up, I am greeted by this prompt
here in Figma asking us to give our team a name to get started. So let's call this, Tuts+ Design. You can also do this later if you prefer. So, we're gonna hit next. And here I have the option to invite
my teammates or my collaborators. I'm gonna skip this step for now. And I'm gonna choose my starter plan
because I wanna start with the free plan. Here, it asks you if you want
the software to show you around. I'm gonna hit No, thanks, and I'm in. I'm now ready to use this amazing
design software directly in my browser. Now, don't worry if this
looks a little bit weird or different to what you're used to. I'm going to walk you through the why,
and how to create projects and files in the next couple
of lessons in the course. All right, so with that out of the way,
let's move on and get more familiar with Figma. We'll start in the next chapter by
learning how to work with projects, files and pages. So I'll see you in the next lesson. Welcome back to the course. In this lesson, you're going to
learn how to organize your design files by using projects and
pages, so let's begin. We are at the starting screen in Figma. And in the previous lesson,
we actually stopped at this screen here. Well, this is a file that's being opened. And to get to the previous
screen that I showed you, to get to see all your files, you can
simply go to this menu button here and click Back to Files, and
that's gonna take you to this screen. Now, there are a few ways
to organize your design work in Figma, and
the very first one is projects. So as you can see, under our Tuts+ Design
team, we have a First Project. And inside this project,
I can create files. So Untitled here is an example of a file, and I can double-click to open that file. I can click here to rename it,
slet's say, for example, File 1. And if I want to create a new file,
I can simply go Back to Files and create one there, or
I can go to File > New. Let's do this, let's select First Project, and right here, New File. Click, and now I have File 2. And as you can see, these are both
organized under First Project. Now if I want to create a new project, I can go to my Tuts+ Design team. And here, we can actually see all the
projects inside or that belong to my team. And at the very top,
I can select New Project. I can give it a name,
here I can set my permissions. So all the members at
Tuts+ Design can either edit, view, or I can choose individual
access for my members. So I'm gonna select Create Project,
and now inside my Second Project, I can create new files. And I can call this File 1, and
then File 2, and it just goes on and on. So now all my files are neatly
organized into First Project and Second Project, pretty cool. Now inside a file,
you can create multiple pages. So let's say that File
2 is a website design, and my pages could be
named something like this, Wireframe, Design, and maybe Playground for exploring new ideas. And then in each of these pages,
I can have different content. Or something else I could do,
let's actually open File 1. I could have maybe an app design here. And the first page would be Screen 1,
and then I can have a page for Screen 2, Screen 3, and
so on and so forth. So there are a lot of ways you
can organize your design files. And how you name these pages,
these projects, and these files is really up to you. Now, you can also create
multiple teams inside Figma. So my team name is Tuts+ Design,
but I can create a new one. And I can call it Mobile App Design, or just Mobile App or Mobile Apps. And I can create that team, and
then I can add my collaborators. And here,
I'm gonna choose Starter for my team. So now as you can see, I have the team
Tuts+ Design, and Mobile Apps. And I can also go in here and
rename my team, let's call this Websites, right? So I can have a team for creating
websites, and I can have a team for creating mobile apps. So with Figma,
it's really easy to separate your various projects based on
who's working on them. Just keep in mind that when you need
a high number of collaborators or teammates having access to these projects, the free plan will not work for
you anymore. You will have to upgrade to
either the professional or the organization plans
I showed you earlier. All right, so now that you know how
to organize your project files, let's move on and learn about
the Figma UI or user interface. And that's coming up in the next lesson. Welcome back to the course. In this lesson, we're gonna have a closer
look at Figma's UI or user interface, and we're gonna learn exactly what
each button and panel is doing. So let's begin. We start here in the home screen. This is where you usually land
the first time you open up Figma. And the purpose of the screen is to
give you access to all of your teams, all of your projects, and
also some options like searching for files and seeing your recent files. Get access to plugins and
also see your drafts. And drafts are basically files
that don't belong to any project. Now, when you click on a team. For example, that's gonna show you all
the projects that belong to that team. Like, for example, here in websites. And then, when you click on a project,
you'll find a list of all the files that belong to that project, and
it can view files as a grid or as a list. On the right side,
you have a small sidebar with information regarding your project,
team, and so on. Now, let's open up a file and this is where you'll spend
the majority of your time in Figma. So, let's pay a little bit
more attention to this part. Let's start with the top. Here, we have the main,
let's call it navbar. And at the very center, we can find the
file name and the project it belongs to. And if you click on this little
arrow next to the file name, you have some options like
showing the version history, exploring, duplicate,
rename, delete, and so on. And you can also move files
to different projects. On the right side, we can see the people
that are currently viewing this file. This is how we can share a specific file,
either by inviting someone to view it or generating a link and
sending that link to other people. Here, you can open up the presentation for
the prototype, and this is where we can
find some zoom controls. You can zoom in, zoom out,
and also turn on and off zoom features for the ccanvas. Now on the left side of the nav-bar, we have the Main Menu button which
by default opens up in, in search. So it's really easy if
you wanna search for a specific operation like for
example, show grids. You can search for grid and it's gonna give you all the options
that contain that keyword. But also it gives you access to
a more traditional menu that you would find in a desktop app. Here you can select between the various
tools, so this is for Move or Scale tool. This is where you can create frames,
or create slices. This gives you access to the basic
tools like rectangle, line, ellipse, polygon, and so on. This is the pen tool or pencil tool. We'll talk more about
these in a future lesson. This is the text tool. This is the hand tool that you can click
and drag to move your canvas around. And this is the comments'
functionality that you can use to give feedback on a specific file. We'll also talk more about
this in a future lesson. Now on the left side,
we have a sidebar that by default, will show you the layers and
if you start drawing shapes or adding any kind of elements on the canvas, the layers panel will be
populated automatically. And you can select various
elements either by clicking on the corresponding layer here or
selecting it in the canvas and that entry will also be
selected in the Layers panel. From here you have the option
to lock a specific layer, so we can no longer select it. And you can also choose to hide or
show that layer. Double-clicking a layer here, will enter
edit mode and you can rename that layer. And if you right-click,
you get all the fun options for working with the various elements. You'll see we'll be using some of these
options as we go through this course. Now, the next page is for assets and this is where you will find
all your components and all your libraries,
more about these in my dedicated lesson. This is the page switcher basically, you can create new pages you can
double-click to rename them. And you can also right-click to delete, rename, or duplicate a specific page. Now, on the right side,
we can find the inspector panel. This is where you'll be altering most
of the properties for selected objects. So right now,
I don't have anything selected. So it's giving me options for my canvas, from here I can change
the canvas background. I can change its opacity or
I can hide it altogether. However, if I select, for example,
this rectangle, this part will change. It's gonna give me controls for
changing the properties of this element. It's gonna give me alignment controls,
positioning controls x,y. I can change the width and
height from here as well, rotation and also border radius. Here, I have some properties for
the layer, like the blend mode,
And also the capacity. And I can choose to toggle
the visibility from here as well, and then I have options for
the fill color. And I can add multiple fills. And when it comes to fill colors,
I can choose between solid, linear, radial, and so on. We'll talk more about
these in the next lesson. Then, we also have options for
Stroke, Effects, and Export. So that's it for the UI. Now, just before we wrap this lesson, I wanna show you how to see
the keyboard shortcuts. Because Figma has a lot of keyboard
shortcuts that are super helpful, and it's gonna save you a lot of
time when designing in here. So to see all the keyboard shortcuts,
of course, you can browse through
the various menus and you can see that most of these actions
have an associated keyboard shortcut. But to see them all,
you can go right here, Help and Resources, keyboard shortcuts or
press Ctrl+Shift+?. And that's gonna give you a list of all
the keyboard shortcuts inside Figma. You can see the action here and
the associated keyboard shortcut. You will see that some of
these are highlighted in blue, that means you have use them before. So for example, if I'm gonna use
the frame tool or F, I'm gonna press F. You can see that now that
keyboard shortcut is highlighted, so that means I have used it. So have a look at these, they're really
gonna help you a lot, all right? So now, that you know how
to get around the Figma UI, it's time to learn about
the most basic tools. And we'll start with
that in the next lesson, where you'll learn about working
with frames, shapes, and text. So I'll see you there. Welcome back to the course. In this lesson, we're gonna start
using the most basic tools in Figma. These are frames, shapes, and text. So let's begin. Let's start with frames. And what are frames? Well, first of all,
let me give you a comparison with another software that you might be familiar with,
Adobe XD or Sketch. Both of these use
something called artboards. And an artboard is like
a big container for your design, right? You would create an artboard for
an app screen, or a website, or a web page, or an icon. Well, frames are exactly the same. So I can grab the Frame tool or
press F on the keyboard, and I can simply click to
create a default frame, which is 100 by 100. However, I can click and drag and create a frame of custom size, or I can choose from a variety of presets. So there are presets for phones, tablets, desktops, smartwatch apps, paper, social media, and so on. So let's say I'm designing an app for
a smartphone and I wanna preview it on an iPhone 8,
for example, I can click iPhone 8,
which is pretty handy. Now, with the frame selected,
I can press Ctrl or Cmd+R, to rename it, or
I can double click in here. And if we look on the right side,
we can swap the orientation from portrait to landscape,
just like that. And we can also do something very cool,
which is resize to fit. So for example,
if I were to have a rectangle in here and I do this, the frame will resize to the exact dimensions of the content. In my case, I just had a simple rectangle,
so it resized to that. But if I have more,
you'll see that it resizes differently. Pretty cool. With the frame selected, I can also change
its size by clicking this drop-down. So let's say now I want
an iPhone 11 Pro Max. So I can change that on the fly,
which is pretty cool. From here I can change the x,
y, these don't really matter. Width, height, you can click and
change these values manually. Or you can click on the W or
the H and just drag left and right to get to the desired size. You basically have the same
controls like any other shape here. Next, we can add an auto layout or layout
grid, these are for a future lesson. And the rest of the controls are exactly
the same as the controls for any old shape. Now, frames can be nested. So I can grab the Frame tool and
I can draw a frame inside of a frame. And as you can see here
in the Layers panel, a frame is represented by this symbol. And I can nest frames indefinitely. If I drag a frame outside
its parent frame, it's gonna be a top level frame. And I can go ahead and give it a fill,
give it a border if I want to. It really depends on
what we wanna do with it. So that's it for frames, basically. Now, let's move on to shapes. And in Figma, you can create
the basic shapes really easily. You can go right here where
it says Shape Tools, and you can choose between rectangle,
or R on the keyboard. You can click and
drag to create a rectangle, or you can hold down Shift while doing that,
and it's gonna create a square. Next, you can create lines with L,
or the Line tool. Same deal, click, drag. And if you want this to be perfectly
horizontal, hold down Shift. And while holding down Shift, you can actually rotate it
in increments of 45 degrees. The line by default has a stroke,
it has a stroke width of one. And there are some additional options for
stroke, like adding a cap, setting, how the joins are made,
adding dashes, gaps, and so on. So that's the Line tool. Next, we have the Arrow tool, which is basically a line
with an arrow at the end. And as you can see,
let's actually make this a different color so we can see it better. The only thing different here is
the fact that cap is now set to Mixed. And I can say Line Arrow or Triangle Arrow, very handy. Next, we have the Ellipse tool, or O. Same deal, click and
drag to create an ellipse, or hold down Shift to
create a perfect circle. Next is the Polygon tool,
which can be used to draw polygons, like triangles, rhombus,
pentagon, hexagon, and so on. You can basically go and
change the corner count here. So three is for a triangle, four is for a rhombus, five, six. And you can even go really crazy and create something like
this with 20 corners. I don't even know what this is called,
but it probably has a pretty cool name. So that's how you can
use the Polygon tool. We also have a Star tool that
we can use to draw stars. And here you can change the count,
so how many tips do you want. So this is a three point star,
four point star, five, six, ten, and so on. And you can also change the depth or the angle between each star branch. And that's it for shapes,
really simple to use. You can find all of them here. Of course, you can create custom shapes
with the Pen tool or the Pencil tool. But we'll talk more about
that in the next lesson. For now, let's talk about the Text tool. So T on the keyboard and click anywhere
on your canvas to create a text. For Text,
you have access to the usual controls, like alignment, positioning, size, blend mode, capacity, fill, stroke. But also you have access
to typography controls, like font family, font weight,
size, line height, letter spacing, paragraph spacing,
you can create text boxes. So this is now currently
set to auto width, but I can set it to a fixed size and
I can make it bigger. And you'll see that any
text that I type in in here will just move
on to the next line. And now I just set auto height so
that it's setting its height automatically depending
on the size of the text. And here, let's actually
change this fill to white so you can see it a little bit better. And you also have some
advanced typography controls. If you click this little button here,
you'll find options for alignment, decoration, if you want it to
be underline or strikethrough. You can indent each
paragraph individually, and you can also set the letter case. And you get some more
advanced controls here, like, for example,
how the numbers look like, whether or not you can use ligatures, and so on. So it's really simple. If you just want
a standalone piece of text, then just press T, click,
and type your text. If you want a text box,
you can press T, click and drag, and then type your text in there. And then you can always go in here and change the properties as you see fit. All right, and that's how we can
work with frames, shapes, and text. Now, Figma is an interface
design tool at its core, but it's also a vector graphics editor, which means it can be used to create and
edit vector graphics. And to do that,
it uses something called vector networks. So let's learn more about
those in the next lesson. See you there. Welcome back to the course. In this lesson, you're gonna learn
how to work with the pen tool, and also with vector networks. And a vector network is probably one
of the most unique features in Figma. So let's have a closer look at it. Now traditionally, most design tools work with the pen tool in the following way. You would click and
create multiple points. And then eventually you would
come back to your starting point, and you would close that path. It doesn't work in any other way. But with Figma and with vector networks,
you can do stuff like this. You can create a line here, and then you can create a line like so, and then you can create a line like so. And you just created an arrow. So notice these open-ended paths. Well, you can't really do that very
easily in traditional design software. But with Figma and with vector networks,
it's really simple. You can even create more complex shapes. So using the pen tool or P,
you can draw something like this And then maybe something like this, you can hold down Shift to snap
this to 45 degree increments. Let's draw a nice little cube here. Cool, and when you're done,
just hit Done here or press Enter, and now you have a cube. To enter the vector edit mode,
you can select the vector, hit Enter or
this little button that says Edit Object. So now what you can do with these vector
networks is that you can select any line, Or any point, And just move them around, delete them, add new ones, it's really, really simple. Now, Figma does this very simply for us. Notice that when I hover on a line,
it gives me the option to create a new point right in
the middle of that line, see? And if I click that, I just created a new point, very simple. Now, I can also press B or select the paint bucket
tool to add colors, To my different shapes. So notice that if I hover on
a shape that's already painted, I get a little minus inside
the the little drop, so that means it's gonna remove the fill. But if I hover on a shape
that doesn't have a fill, I get a plus sign, and I can add
a fill to that, which is pretty cool. Now, I can also click the bend tool or
press Ctrl or Cmd. And when I click on a point,
it's gonna transform that point,
it's gonna add Bezier handles so that I can create curves, really simple. I can also do that, by the way,
When creating the vector. So I can click, and I can click and
hold and then move. And that's gonna create,
This type of shape. Now, that's the pen tool. The pencil tool, Is more of a freehand version of creating vectors,
right? So this is just another vector that I can,
of course, enter edit mode and
I can grab any of the points. And I can delete that point,
I can move it around, I can change its curve
using the Bezier handles, I can do a lot of things with it. But probably, most of the time,
you'll be using the pen tool. Now, since we're on the topic
of vector networks, you should know that any shape that
you create within Figma is a vector. For example, let's take the rectangle. Right, if we select this and
we enter Edit Object, it gives us the exact same
controls that we had previous. We can select any of these points,
we can move it around. You can hold down Shift while
pressing Delete or Backspace, and that's gonna automatically delete and
heal, so it's gonna connect Those
remaining two points. So if you were gonna do that with just a
simple Delete, it's gonna look like this. But Shift + Delete,
it's gonna connect the remaining points. Now at any point, you can select
this,and you can add a stroke, you can change the position of the stroke, of course, the stroke color. And you can also define
how the joints are, you can create some nice
rounded corners here. You can add dashes to this if you prefer. And overall, it's really, really simple to work with
these vector networks. So what can you use this for? Well, a lot of things, from creating
simple icons like the arrow I showed you previously,
to creating illustrations, or creating some complex shapes like this. But vector networks are basically used for
any basic shape that you create. I showed you the rectangle previously, here's how a star will look like
when you enter vector edit mode. It's exactly the same thing. Same goes for an ellipse or
a circle, here's a circle. And if we press Enter, we can see
that it's made up of four points that produced these curves that
are basically identical. All right, and that's how you can
create and edit vectors in Figma. Now, as I was saying earlier,
Figma is an interface design tool, and usually, interfaces use grids. It's really easy to work with
grids in Figma because there is built-in functionality for that. So let's have a look at it and see how it works in the next lesson,
I'll see you there. Welcome back to the course. In this lesson, you'll learn how
to work with grids in Figma. Now, grids are very useful for
interface design, but you can also use them for creating icons. So let's begin. Now, in Figma,
a grid can only be applied to a frame. So I'm gonna go ahead and create a frame, let's say I wanna create one for
a desktop size. And now with the frame selected, I can go ahead and click on Layout Grid. I can either click directly here or
click on the plus sign. It does exactly the same thing. Now, there are three
types of grids in Figma. There is your default grid, which will
give you horizontal and vertical lines. And you can determine
the size of each cell. Let's say I wanna make 16 pixels, it's gonna create a 16 pixel cell over and
over again. You can change the color, And the opacity of the lines. This is very useful for icon design. Now, the second type of grid is columns,
and this is what you'll probably
be using most often. Basically you define how
many columns you want. Let's say 12, because this is a typical
number in the most popular grid systems. And then you define the type. So stretch will basically
set the width of each column automatically based on
the width of your frame. The only thing you can
change here is the gutter, which is the distance between each column. So let's say 40. And now you'll see that I have a much
bigger gap between each column. And I can also change the margin. And that will add the number you type here
to the right and to the left of the grid. So that's type stretch. You can also set it to left, and
that's gonna align the grid to the left of the frame, or right, which is gonna
align it to the right, or center. Now, in any of these types, the width of each column is set manually. So you can set it to, like, for example,
72 and then you can define the gutter. So that's the main difference. Stretch will automatically
calculate the column width for you. Any of these other types needs your
manual input for a column width. And finally,
rows is exactly the same as columns. It has the exact same properties, except it's horizontal
instead of vertical. And obviously,
the types here are a little bit different. Instead of having center, left, and right, you now have center, top, and bottom. And of course,
you can also add stretch here, and the height of each column will be
automatically calculated for you. Now, once you add your grid of choice, you can use it to align elements to it. And as you can see, the grid is visible, it stays on top of everything else. So it's really easy to move elements, to resize elements to that specific grid. Now, if you want to toggle the gird on or
off, here's how you do it. You select the frame and you click this
little sign here, and that's toggled off. To bring it back on,
you just click this button again. There's also a shortcut, and
you can find that by either searching for the Layout Grids option and
the get the keyboard shortcut here. In my case, it's Ctrl+Shift+4,
and I'm on a Windows system. On a Mac, you will get
a different keyboard shortcut. Or you can go down here under Help
& Resources > Keyboard Shortcuts. And you would go to View,
and under Layout Grids, you'll find your keyboard shortcut,
so Ctrl+Shift+4. if I press it here,
regardless of what I have selected, it's gonna hide or show the layout grids. And it's gonna do that on all the frames. So for example,
if I have another frame here, which has, let's say,
one of the default grids, if I press Cmd, or sorry, Ctrl+Shift+4, it's gonna show or
hide the grids on all of the elements. All right, and
that's how you can create grids in Figma. Now, in the final lesson of this chapter,
I wanna show you how you can add extra functionality
to Figma by using plugins. So I'll see you in the next lesson. Welcome back to the course. In this lesson, you'll learn
how to add extra functionality, to your figma experience by using plugins. So let's begin. I'm sure you're familiar with
plugins from other applications. And a plugin is basically an add on, that adds functionality that's not
native to a certain application. And figma has the ability
to install plugins. To get access to plugins,
you would need to open up the menu, and you would go to plugins. Manage plugins or
you can go back to the files, back to the home screen and click plugins. Here you can see the plugins that you have
installed, currently we don't have any. You can see a list of the most
popular plugins right here. And right here on the left,
you can see a list of featured plugins. Now, you can choose any of these,
or you can browse or plugins and you can search for
a specific one. In my case, just to demo this I'm gonna
search, for a plugin called unsplash. Which is actually the first
one that we can see here, but I'm just gonna do a quick demo. So on splash, you can click on it. You can find more information about it. Basically this is a plugin that
grabs images, from the very popular unsplash platform, and
downloads them into your figma project. You can see how many people install this. So let's go ahead and do that as well. Here is telling me that hey, plugins
are made by third party developers. And by using them,
you accept the potential risks. Install plugin, and
that's it, plugin installed. So now let's open up one of the projects, and let me show you how
you can use that plugin. So I'm gonna create a rectangle and then I'm gonna go to menu,
plugins unsplash. This is gonna open up this pop up
window here, which I can move around. And of course this will look
different from plugin to plugin. And basically with this particular plugin, I can insert a picture into my page. I can choose from preset,
I can choose a random picture, or I can search for a specific term. Let's say, for example, furniture. So I'm gonna hit search,
that's gonna give me a list of images, that match my search query. So let's bring in this one. We're gonna click. That's gonna download it,
and it's gonna automatically apply it as a background
to my a selected shape. How cool is that? Really, really simple. And if you're looking for
a specific plugin, but you don't know what it's called. Well, you have the full list here. And you can just scroll down, and find one that suits your needs. It's really that simple. All right, and that's how you
can work with plugins in figma. So now you have all of
the basics taken care of. In this chapter, you learned how
to work with the basic tools. How to work with grids and
how to work with plugins. Now, it's time to do something
practical with this knowledge. And we'll do that in the next lesson. Where we'll create,
we'll design a signup form. And while we're doing that,
we're also going to learn how to work with some of the more advanced features,
and tools in figma. Like, for example, auto layout,
components, color styles, and more. So I'll see you in the next lesson, where
I will design a very simple signup form. Welcome back to the course. In this lesson we're gonna
do something practical. We'll be designing a sign up form,
a very simple one using, of course, the knowledge that
we got from the lessons so far. But we'll also learn some new tricks. And how to work with some new
tools that we haven't covered yet, like components or the layout,
color, and text styles, and more. So let's begin. For this lesson, I switched to
the Figma desktop app for Windows. And as you can see there's no
difference than the browser-based one. Well, the only difference is that,
to get to the home screen, you now have a dedicated button
right here, a Dedicated tab. And any file that you open will be
opened in tabs in this top bar here. And you also have some
additional options and this drop down here like
the Interface Scale and Color Space. But we are don't have to
worry about those right now. So what I'm gonna do is create a,
new project under Mobile Apps because we're gonna be designing a sign
up form for a mobile app. So let's create a new project. I`m gonna call this Demo App. And I'm gonna create a New File. And this new file is gonna
be called Sign-up Form. Now I'm gonna have two pages in here, just
to help me with the organization a bit. The first page will be for Assets. The second page will be for
the actual Screens. So let's start by defining some assets. And the very first one is the logo for
the app. And I got this logo from Envato elements. You'll find links to all
the assets that we're gonna be using in this lesson, in the lesson notes. And I just downloaded the source files,
copied and pasted a vector version
of the logo in Figma. So I'm gonna to call this Logo. And the next thing I'm gonna
do is create a component. To do that, I'm gonna click
this little button here, or I can choose to use CTRL+ALT+K
as a keyboard shortcut. So now, I just transformed that
standalone element into a component. So components are elements
that can be reused and they function on a master
child system which means the one that you see
right here is a master. And if I'm gonna make a copy of this,
I'm now going to have an instance, I said child earlier,
the correct term is actually instance. So what that means is that, if I'm gonna
go to my master element and make a change. Let's say for example,
I want to change this fill color, all the instances will be
updated automatically, that's the main purpose of components. Also components are very
useful when working in teams. Because you can have a centralized
file with all of the components and then your team members can use
instances of those components. And if at any point you want to
change the master component, it's gonna change all of the Instances
automatically which is fantastic. And also, any instance of a component can
have different styles than the master. So it's really easy to create, for
example, a button component and then each instance will have
a slightly different style, and I'll show you that in just a little bit. But for now, we have our first component,
which is the logo. Next, I wanna grab some icons,
and for that, I'm gonna use an app
that's called Icon Set. And let me just bring this over,
so you can see it better. Icon Set is a desktop app that's free. You can use it on both macOS and Windows. And with it,
you can basically add your own icon sets from your files, on your computer. And then you can browse them,
so you can even search for a specific icon, for example, Facebook. And then you can grab this icon,
you can paste it, you can export it,
you can use it in other software. Right now I'm using Font Awesome,
the free version available for desktop and you'll find a link to that as well. So what I'm gonna do is
copy this Facebook square, copy, and let's go back to Figma, paste. And actually,
I think this doesn't work directly, but we can just click and drag it in. So now I have this Facebook icon. So let's resize it, I'm gonna click this
button that says Constrain Proportions. And that's gonna resize the width and
the height at the same time. And I'm gonna resize this to 24 pixels,
just like that. I can actually right click on the group
that's gonna get rid of the parent frame. And I'm just left with this vector, which I'm gonna call iconfacebook. And what I'm gonna do is I'm gonna
create a component out of it. So click this button, and now I have
a component called Icon Facebook. I'm gonna grab yet another icon. I'm gonna choose, I'm gonna search for
envelope, and I'm gonna choose this one. Again, click drag, and I'm gonna resize this to 24 pixels. Right click, Ungroup and I'm gonna call this icon-envelope or icon-email would be a better name for it, create component. Finally, the last icon I'm gonna add,
is an arrow left and I'm gonna choose this long version here. So click drag, resize 24 pixels. Ungroup, rename this
to icon-arrow-left and create component. Great, so now I have all of my icons. Next, I'm gonna need a button. And for the button, I'm gonna do the
following, I'm gonna start with the text. So T for text tool,
I'm gonna say sign up with Facebook. I wanna make this uppercase,
so I'm gonna do that. I'm gonna set its font
family to Futura PT and font style is gonna be book. That's okay. We're actually let's go a little
bit heavier, maybe medium, and font size I'm gonna select 15 pixels. And I'm gonna select a 2% letter spacing. Under line height,
I'm gonna choose 24 pixels. Now with this, I'm gonna select it and I'm going to press shift A. Now Shift A will add an auto layout. An auto layout is one of the most
unique and powerful features in Figma. With auto layout,
you basically create a Frame, which can have horizontal
padding vertical padding and a certain space between items. So it's really easy for
me to create a button with this. For example,
I can set the horizontal padding to 24 and I can set the vertical padding to 16. And I can do a fill color. Let's keep that at white for now. Let's also add four pixel border radius. So now we have a rounded button. Now the cool thing is,
in a frame with auto layout, it's really easy to rearrange and
add new elements. So for example,
I can copy this Facebook icon and I can paste it in my button. All I got to do is select one
element within that frame, paste that element and
now I can rearrange this. I can align it to the top,
to the center, to the bottom. And I can move it left or right. Also, I can choose
the distance between items. So, the distance in my case
between text and icon. Let's set that to 16. And you'll see that with the system, you can basically have
any text in here and the button will resize automatically. How cool is that? One other thing that I'm gonna to
do is resize this to 18 pixels. I just want to make it
a little bit smaller. And now see that this doesn't
align with the text very well. Well, I can align it to
the center from here. So the button is almost complete. The only thing that's
missing is proper colors. Right now it's kind of black and white. So let's go ahead and define some colors. And to do that, I'm gonna start by drawing a simple circle, something like this and setting its fill color to 1f252f. This will be my black or my dark color. Now Figma has another cool feature
that's called color styles. And with color styles, you can select
an element with a specific color. And you can click this +
button to create a new style. I'm gonna call this black, and now, as you can see,
I have Local Styles, Black. And whenever I create a new element,
and I wanna use that specific color, instead of searching for
the color code manually, I can just click this icon and
I can choose black. And if at any point I want
to change this black color, I can click anywhere on the canvas
until I see Local Styles. Then I hover on the color I wanna change. I click this icon and I can change
this color to whatever I want. And you'll see that when I
do that all the elements that use that color style
will change automatically. So now let's go back to
our original black color. Now, let's do the same for
the other colors. I'm gonna define three more colors. So I'm gonna hit Ctrl D on Windows or Command D on Mac,
to duplicate my selection. And for this to detach from a Color Style,
you would simply click this button, Detach Style, and
then I'm ready to add my new color. And that will be F51858. And I'm gonna create the color style for
it. And I'm gonna call it accent. Let's do that again, 5d800. This is actually the color from my logo. And I'm gonna to call this, Brand. And finally,
let's do it one more time, 3a5998. This will be the color for Facebook, okay? So now I have my Local Styles defined. What I can do to make them
look a little bit prettier, I can select them all and
I can do Shift A to add an auto layout. I'm gonna call this Colors. And I'm gonna set maybe like
32 pixels in-between them. So now that we have all
the colors taken care of, I can select my button frame and under Fill, I can use my Facebook color. And then the text and the icon can use just pure white. And since we're here, I just wanna quickly
show you a very neat feature in Figma. When you select an element,
a single element, you have the option to
change its color under Fill. When you select multiple elements, you get
a new panel here called Selection Colors, which show you all the colors from
all the currently selected items. So if I'm gonna select my frame, you'll see that I have two
colors Facebook, and white. If I'm gonna select all of these elements,
I have Facebook. I have the brand color. I have black and I have white. And it's really easy to
change colors like this on multiple elements at the same time. So now our button is complete. Let's call this Button and
let's create a component from it. So now I'm gonna select all of these,
shift A to create an auto layout. I'm gonna select 32
pixels between elements. And I'm gonna name this components. So now we have Components
colors the defined. It's time to start working
on the actual screen design. For that I'm gonna switch
the to the screens page, F for frame and I'm gonna be using a preset for
iPhone 11 Pro Max. And I'm gonna press control
R to rename Screen 1. So, how are we designing this screen? Well, we need a logo, we need a title
that's specific to the actual app. And then we need some signup options
with Facebook and with email. And further down,
we need the link that says, hey, do you already have an account,
here's a link to log in directly. For Screen 2 we'll just
have a sign up form. So Screen 1, let's start with the logo. I'm gonna to press Shift
0 to zoom to a 100%, and then I'm going to switch to
my Assets page, Local components. See how they're all
the find handy in here, we can simply click and
drag elements onto our page. Then with it selected, I can hit Align
Horizontal Centers to align it to my page. Next, let's add some tiles. The first one is gonna say
Rent A Home In Just A Few Clicks. And for the text I'm gonna use for
Futura PT. Font weight, I'm going to choose Bold, font size is going to be 35 and let me get rid of that uppercase. We don't need a 2% letter spacing here. Line height will be 48 and
I'm gonna text align this to the center. And for color, I'm gonna choose the black
color that we defined previously, okay? So now just resize this
to something like that. And since we learned about grids,
let's add one here because grids are perfectly viable
in a mobile app like this. So I'm gonna to select my screen. I'm gonna choose Layout Grid, Columns. I'm going to choose a single column,
Type Stretch, but I'm gonna set a margin of 48 pixels. So that means I have 48 to the left,
48 to the right. And here's another thing that I can do. I can click this little button and
I can create a Grid Style. So let's call this Mobile grid. And just like with color styles with text
styles, I can reuse this on other pages. So now with the grid there,
I can just reposition and resize this piece of text so
that it fits arrow grid. And now I'm gonna position
this 64 pixels from this logo. For that I'm gonna hold down
Alt until I see a number there. And I can use the up and down arrow
keys to nudge this one pixel at a time. If I want to measure ten pixels at a time,
I can hold down Shift as well. So shift, Alt, up and
down to reposition this, okay? Next, let's add a small separator. For that, grab the rectangle tool and
draw a rectangle and make it 80 pixels in width,
8 pixels in height. Let's give it some rounded corners,
maybe 8 pixels. I'm just zooming here. And for the fill,
I'm gonna use the accent color. I'm gonna align it to the center and I'm gonna position it 32
pixels from the text above. Now speaking of the text above,
let's select it. And let's go to text. Click this Style button and
Create a new text style. Let's call it Title 1. And this will come in handy in the next
screen when we'll duplicate it. Next, let's add another
piece of text that says Browse over 10,000 listings in your area. Now we need to tweak the properties for
this a little bit. Let's detach it from Title 1 because
we'll create a separate style for it. So it's gonna be Futura PT. We're gonna to use book as the weight,
font size is 22, line height is 32 text align
is going to be center as well. I don't need that letter spacing there. And actually I think I forgot to remove
it from this text style as well. So click anywhere on the canvas,
go to Title 1 and remove the letter spacing, cool. So now this is complete. Let's create another style for it. Let's call it Title 2 and let's move it up 32 pixels
from this separator. All right, now,
since we have the same distance, 32 pixels between the separator and
these two elements, we can create a frame with auto layout. So select everything, shift A. And now, if I wanna change
the distance between these, I can just select it and
changes from here. However, I'm going to keep it at 32. So let's hide the grid for
now and let's add some buttons. For that I'm simply gonna grab the button from our components list here. And actually want to resize this button so that it matches my grid. But currently I don't have
any option of doing that. Because it has an auto
layout applied to it, that's set to horizontal by default. And on horizontal, I can have
an auto height or a fixed height. If I want a fixed width, I would need
the auto layout to be set to vertical. So we need to make a quick
change to the parent, to the master component. So that change goes like this. I'm gonna select the elements
inside my frame and I'm going to do Shift A to create
an auto layout which is horizontal. And then, I'm gonna select my main frame. And I'm gonna switch the auto
layout from horizontal to vertical. And I'm gonna select fixed with. So now, I can go back to my screen and
because this is an instance of the original button,
I cannot resize it to my liking. And also we're seeing that The content is still aligned to the left,
so let's go and fix that. I'm gonna select my content here, and
make sure it's aligned to the center. Okay, we're good to go. Now let's hide the grid. Let's duplicate this button, Ctrl V,
or Cmd D if you're on a Mac. And this will be a button that allows
us to sign up with an email address, but there are a couple of changes. First, we need to change the text,
we need to change the icon, and we need to change the background color. That's really easy to do,
simply hold down Ctrl or Cmd, and click on a specific item. And that's gonna expand the element
here in the Layers panel, and you can select each individual
element and work with it. So, I can double click this text,
and I can say, sign up with email. I can select the whole button, and instead of Facebook here,
I can select Brand. And finally,
I can select this icon Facebook, I can right click it, and I can say,
swap instance with icon email. And of course,
I'm gonna change that color to white. And here actually, we can see that
the icon doesn't look as it should, it looks disproportionate. That's because it fits within 18 pixels,
just like the old icon that I had. But if we go into assets,
you'll see that our icon is actually 6 pixels
wider than it is high. So how do we fix this? Well, it's a little bit tricky
when working with components. So just to keep things simple,
let's actually replace this icon to one that's a square format,
so 24 by 24. So let's go back to icon set, and
I'm gonna search for another envelope. And let's see if this one is a square. It is not, this one is a square. So, we're gonna use this one, click Drag, And let's resize it to 24,
let's un-group it, let's delete the original icon email. And let's call this one, icon email,
And let's create a component. So now, we can go back to our screens. And we can swap this,
we can reset it first, and then we can swap instance with icon,
email. Change that to white. And we're good to go. We've now created two buttons that look
different by using the same component. Now, we can simply select both of these, Shift A, and
choose 32 pixels between the two. And now I can select this, this, and this, Shift A again to add another auto-layout,
and select 64 pixels between them. Finally, the last step in this
screen is to add a little link right here at the bottom that says, hey,
do you already have an account? Let's go ahead and login. So let's center this. For fill, I'm gonna use black. It's gonna be Futura PT book, font size is gonna be 18 pixels, 24 for line height. Let's remove that uppercase, and also let's remove the letter spacing, align text to the center. And then this thing here is
actually gonna be the link, so we need to use a separate color for it. Now, when you add a color style,
it cannot have different colors within that that element. So what we're gonna do, is detach this. The fill color is still here. Now, I'm simply gonna select this fill, use the eye dropper tool,
and select the brand color. So now with this, I can put it in frame 3. It's already positioned at 64
pixels because of the auto layout aligned to the center,
and we're all done. Now select everything, align once again to
the center, vertically, and horizontally. And with that, screen one is complete. Now let's quickly go ahead and
design screen two. So for that, use the frame tool,
select this preset, Ctrl R for renaming screen two, Shift 2, Shift 0, excuse me, to zoom to 100%. And we'll start by defining
the same layout grid as before, and let's start by adding one
of the components, the arrow. That's gonna be used to navigate
to the previous screen. So let's align this with the grid,
and let's position this at, I don't know,
maybe 64 pixels from the top. And for color, let's choose black. But let's also set an opacity on the actual layer of about maybe 50%. Yeah, that looks pretty good. Now, let's add a new text that says,
sign up with email, and we're gonna be using
the title one style. So click on this button, select Title 1. Now select both of these,
Shift A to add auto layout, and select 32 pixels between them. Next, let's create our form. So for that,
I'm gonna grab the rectangle tool, let's bring the grid back so
that I can make these full width. These will be 56 pixels in height, let's add a border radius of 4 pixels. And for the background color, I'm gonna choose black, but I'm gonna set a 1, excuse me, a 10% opacity. So that's our input. Let's add a label to this,
for that T for text tool. I'm gonna say your name. And I'm actually gonna go into the button, select the text, right click, More, CopyPaste, Copy Properties. Then I'm gonna select my new text,
right click. Copy/Paste> Paste Properties. And now I'm simply going to change
its text black, its color to black, align this with the input, And position it at 8 pixels from the input,
Shift to select this as well, Shift+A to add an auto layout,
so now, Ctrl+D to duplicate. And once more, this will be for, Email address and
this will be for password. So now select all three, Shift+A, and 32 pixels between them. Now let's select this group and position it at 64 pixels
from the the text above. And now we have to add a new button for
sign up. So let's grab our button from components. And we're actually gonna paste
it inside our form group here. Let's align it to the left, resize it. And we'll do some changes here. For fill,
we're gonna use the brand color, Like so. We're gonna change the text to just,
Sign up, and we're gonna select the little icon and
we're gonna hide it. And that's it. Finally, let's add the last
bit of text there. So I'm gonna copy that, paste it in. And I'm gonna say this bit, let's resize it to 318, and that's it. We've now created two screens for
a signup form. Of course, you can tweak this a little bit
and make it a little bit more refined, but time is of the essence with this course. So I kind of sped through it and
worked as fast as I could while still trying to explain
things as I was doing it. All right, so hopefully this demo
gave you an idea of how easy it is to work in Figma and how powerful this is. Now, Figma can also do prototypes,
can also create prototypes. And I'm gonna demonstrate that using
the two screens that I've just created, that's coming up in the next lesson. So, I'll see you there. Welcome back to the course,
in this lesson you'll learn how to create prototypes in Figma,
this is super easy to do. So let me show you how to do that
by using the two screens that we've designed in the previous lesson,
let's begin. All right, so
we have our two screens here and just to make a quick,
simple demonstration. I want to set up a prototype so that when I click the green
sign up with email button. It's gonna take me to this second
screen and when I click the arrow, that's gonna take me
back to the first screen. So the way to do that is, you first switch
from design mode to prototype mode. Here, you can select which device
you wanna preview your prototype on. In my case, it automatically selected a device based on the size of my frames. I can choose a model, depending on
the device, you can see a preview here. You can set a custom background and
you can also select a starting frame. But first,
let's start by creating the prototype. For that you select the element
that you wanna interact with, in my case,
it's the sign up with email button. And you see this little
circle with the blue border, well you just click and
drag to the frame that you want to go to. And now this created an interaction, you can select the trigger. So On Tap, On Drag, Mouse Enter,
Mouse Leave, you can do a lot with this. I'm gonna keep it simple and I'm gonna select On Tap,
Navigate To, Screen 2. I can choose how the animation is gonna
be, Instant or one of these other options. Let's select Slide In, and I want this
to slide in from the right like so, you can choose an easing,
you can choose the animation duration. So once that's done, you can click this
play button where it says present. And now that's gonna open
up the actual prototype and you'll see our design is being
mocked up in this device. And when we click on the button that's
gonna take us to the second screen. And now if I wanna go back,
I can select my arrow, click and drag the arrow back to Screen 1. Same thing here On Tap,
Navigate To Screen 1, but this time I want slide in from
the other direction like so. So now I can go back here and
you'll see that when I tap It takes me back to the first screen and
that's it. That's how easy it is to
create a prototype in Figma. Of course, you have a lot of different
options here, from different animations. To different triggers,
to different actions, you can really do a lot with this. But for this course, I just wanted to give you the basic
principle of creating a prototype. Now these prototypes are usually
shared with other people, either clients or
members of your own team. So, in the next lesson, I'm gonna show
you how to share these prototypes and also get feedback on them. So I'll see you there. Welcome back to the course. In this lesson, we'll take a look at
the collaboration features in Figma. And you'll learn how to share
your work with other people and also get feedback on it. So, let's begin. Now at any point during
the design process, you can click the Share button, and you can invite people by
email to see your project. And you can also choose whether or not those people can edit or
just view your project or he can copy a link by
clicking on this button and it can then choose who
gets access to this file. Only the people you invited or
anyone who has that link. Now once you invite other
people to a project or you yourself, get invited to to a project, you can leave feedback by
using the comments system. So click on this button or press C and you get this little cursor and
at any point in any page, you can just go in click,
and you can add a comment. And you can say stuff like for example, this color doesn't work and you post it. And then other team members can see this,
they can reply and they can make the necessary adjustments. Once this is all sorted,
you can just click on the Resolve button. This is also great for our clients,
because they can come in, leave comments, evaluate your work, and you can
communicate via the comments system. However, you do need to have
a Figma count to make this work. So that's why this feature will probably
be used by teams the majority of time. Now you can also share a prototype, right? So the prototype that we created
in the previous lesson, right? Over here you have a link
called Share Prototype. It's exactly the same
as sharing your work. You can select who has access to this,
you can invite people. You can copy links to the prototype. And when you send this
link to other people, they arrive at a screen that
looks something like this. And they'll be able to walk through and
use the prototype just like you would. Now to leave feedback on the prototype,
you would still use the comment system. But again, you would need to be logged
in to Figma in order to do that. Now since we're on
the topic of sharing work, I'm just going to quickly mention
this before we wrap up this lesson. Figma is meant to be used as
a collaboration tool, right? Primarily between you and your team. So you should always take advantage
of the features that enable that. And one of those features
is called a library. So if you go to Assets, and you click this
little button here that says Team Library, from the current file,
which is called Sign-up Form, you can decide to publish all
the components and all the styles. And once you do that, your team
will have access to this library, to all of these components, all of these
styles right here, and they can use them. You can decide at a later date. Hey, I want to update some
components in here, you can do that. And your team members that
will use this feature will be able to get the updated versions
in an instant, which is fantastic. Now before we wrap up this lesson,
I just want to show you one more thing that's related to sharing your work
with other people using Figma. And for this,
I switched to my Mac computer where I'm running the Figma desktop app. And I'm logged in with my main account. Now I did that because
with my main account, I have access to a brand
new feature in Figma or brand new at the time of this recording
and that is called Figma Community. Now, the Community is a central
place where you can as it says here, explore, install, use and
remix thousands of files and plugins. So it's basically a place where
community members can upload their plugins and their files and
share them with other people. And then other people like you and me can access this Community and
download any of the files. So here is, for example,
a mobile UI kit made by Tony. Again, simply click on this,
it gives you a nice preview of the file. You can also open it full screen. You can zoom in, zoom out,
you can see a description. Also a selection of
information about this and then you can go ahead and
duplicate this and that's going to duplicate it in your own Figma account and
you now have access to it. You can work with this just like with
any other Figma file which is fantastic. Here you can see all the components,
you can select, you can copy,
you can do whatever you want with this. Now these files are structured in
the following way Design Systems, Wireframes, Illustrations,
Icons, Typography elements, Mobile Design, Web Design and UI kits. And while exploring this, you can click on any of these
categories to see the associated items. You can even click on a certain tag, and you'll find items that use that tag. And when you find the file that you want,
simply click on it, to get more information about it. You can duplicate it,
you can even like it, like so, although to do that you will
need a Figma Community profile. I'll get to that in just a little bit. And you can also click on
the Publisher to see what other assets he uploaded
to the Figma Community. Now in the community,
you're not gonna find just files. You can also search for plugins. So as you can see here right now,
we're seeing all assets, but you can switch between files and plugins and
this is actually the new home for plugins. You'll see that if you watch
the other videos in this course, plugins were accessed
a little bit differently. But here it's exactly the same story,
you would find a plugin you want and you would just click Install. Now, if you're part of
the Community like I am now, you can actually create your own profile. So I'm gonna go to my account and
where it says Public Profile, I'm gonna click Set Profile Handle. I'm going to set the handle
that I want in my case Adi Padilla is available and
hit Create profile. So now I'm officially part
of the Figma Community and people can now find me at
figma.com/@adipurdilla. So now if I open this link in a browser,
you'll get to my profile page where you can only see my profile picture,
my handle. And of course I don't have
anything published just yet. You can also see which files I liked. So now if I jump back to Figma,
I'm gonna hit Done. And now this section has been
updated with my handle, and I can click this link to change my handle
or I can delete my profile altogether. So now I can go back to the Community and let's say I find an asset
that I really like. For example, this UI Kit,
and I'm gonna hit Like here. Now if I'm gonna switch
back to the browser to my profile you'll see that under
likes I have this UI Kit. Now to publish a file
to the Figma Community, here's how you do it. You open up the file, and
here we just have the Figma file we created with these two screens,
and what you do is you go to share,
then publish the Community, hit Publish, and
this will open up the Publish dialog. You would give it a name, a description. You can add up to 12 tags
that will describe your file. You can set how this asset
should be previewed as, so a file or a prototype,
you would select the author. And here you can also find some
information about the license. And then you just hit Publish. It's really that simple. So Figma Community opens up a new way of sharing your work with other people. At the time of this recording,
it's still in beta because it's brand new. But already, we have so many people contributing and
it's fantastic. So if you don't have access to
beta just yet, don't worry, this is gonna be released to
the public very, very soon. And you'll be able to access it as well. All right, and that's how you can
collaborate with other people in Figma. Now, so far, you've seen how to
use Figma as a designer, but what if you're a developer? Well, we'll answer that
question in the next lesson. See you there. Welcome back to the course,
in this lesson you'll learn how to inspect a Figma file and
the benefits this has for a developer. So let's begin. So let's say you were a developer and you've been given view-only
access to this file. And it's your job to convert this
from a design to working app. So, how do you do that? Well, when you are in view-only mode, obviously you cannot delete or
change the layout of any design. What you can do instead is you
can select an element, and you can immediately see its dimensions and also how its positioned in
relation to other elements. So for example, with this title selected,
if I hover on my main frame, I can see the distance between
this text and the edges. If I hover over this bit,I can see
the distance between this and this. And it just goes on and on and on and I can do the same with any other element. What's more, when I select an element
I get immediately CSS code for it. So if I select this input,
we can see the CSS for it here, the width, height, left, top,
the background, opacity, border radius. So all the properties that I
would need as a developer to transform this into a working
component in a web page. What's also nice is that if
you notice in the comment, it tells me the name of the shared, or
excuse me the color style that I'm using. And speaking of color styles,
if I don't have anything selected, I get access to all the local styles. So this is the button text,
titles, paragraphs, basically anything that
the designer created in terms of styles, I have access to it here. And I can always click on
this little button and be taken to this page where
I can see a preview and also Get access to the CSS. And I can switch between code and
table style. Also, I can switch between CSS and
iOS this is I believe swift code. And also if I'm developing for
Android, I also get code for that. And this works for any element. Here in the inspector. If I select this for example, I can
switch between CSS, IOS, and Android. That is very, very cool. Now, I also get access
to the color styles. And I can see all the colours here. And I also get access to any other
styles created by the designers. As I was saying previously here, you can also see the mobile grid
that I've created previously. And by the way, if you're noticing
slight differences in this design, it's because it's an older version of the two
screens that we designed in this course. But I decided to show you this one because
it just had a few more elements here. Now apart from seeing all of this you can also right click Any
element in the page and it can copy that element as text, CSS, SVG, or it can copy its properties. So, by having access to these features, it's really easy to go
from design to code. All right, so hopefully this
answered some of your questions regarding using Figma as a developer. As I saw, it's really simple to just
get accurate measurements on elements. Get code that you can use CSS code or
code for iOS or Android that you can use right away. And this will just make
your your job a lot easier. Now, another part of the whole
development process is exporting assets. So as a developer you'll at some point
be exporting certain assets as images, icons for example or large images, logos. And in the next lesson, I'm gonna show
you how you can do that in Figma. So I'll see you there. Welcome back to the course. In this lesson, you're gonna learn
how to export assets in Figma. It's really easy to do, so let's begin. Now what I'm about to show you
works in both view only mode, and also in edit mode. So to export an asset,
let's say this logo, you can select it. And then in the inspector, you can click
this little Export link, or the + button. And that's gonna give you an option to
select the format you wanna export it to. Currently you can export PNG, JPG,
SVG and PDF, we're gonna choose SVG. And here you have some Export Settings for
SVG. This is Contents Only,
or Include id Attribute. And then you can also see a Preview. And then you click Export logo, and you would save it wherever
you need on your hard drive. Apart from that,
you can add multiple Export options. So do you want a PNG version as well? Cool, check that. You can add a suffix to it and
it can also export at half size, three quarter size, full size,
all the way up to 4x. And you also have some
additional options here. And you can also do JPG, that's like 2x. So when you export that,
it will give you a zip file. So let's Save that. And let's open it. And you'll see that after we export everything, we get the logo SVG. We get the JPG at twice the size, and we also get the PNG at four times
the size with of course, transparency. Now, you can also export entire frames,
not just individual elements. So you can select the frame, hit Export. Select your desired format,
and hit Export. All right, and
that's how you can export assets in Figma. Now, we have a pretty complete
picture of what Figma is, what it can do, and
how you can work with it. And because this is a cross
platform software and it's free, it's always available there for
you to try out and play around with it. So, I highly recommend you do that,
because it's an amazing piece of software. With that said, thank you very much for
watching this course, I'm Adi Purdila and until next time, take care.
