>> Figma is a vector design tool that runs in the browser.
Use Figma to brainstorm ideas, iterate on designs, create prototypes,
and get feedback at any stage of the creative process.
In this beginner's course, we're going to take you through the key stages of designing an app
in Figma, from the initial wireframes to an interactive prototype.
We'll cover the basics, and introduce more powerful features
like auto layout, components, and prototyping.
There's something for everyone, whether you're new to design or new to Figma.
We won't cover all these features in depth, but we'll provide you with resources
to continue your Figma education.
Sign up for a free Figma account at figma.com.
With the Figma account, you can create teams, shared workspaces, or you can collaborate
on files and organize them in projects.
Choose from a free starter team or a paid professional team.
If you are a student or educator, you can get access to all
of Figma's professional features for free.
Visit figma.com/education/apply to verify your education account.
Once you've created your team, you can invite members to collaborate.
This will give them access to all the projects and files in your team.
You can choose what level of access each team member has.
Learn more about creating teams and inviting members
by searching Teams in the Figma Help Center.
We're pretty sure we've got the next million-dollar idea:
a social media app for pets.
We want some feedback on the general layout before we start exploring specific elements
of our design.
Wireframes are simplified designs that are devoid
of any style, like color, type, or imagery.
They allow us to map out user flows and explore different ways we structure our app
without having to design any elements or add any content.
We start our journey in the Figma editor.
The canvas is the backdrop for all of your designs.
It's where you'll add all the frames, shape, text, and images.
There are no bounds to your creativity, but you should know
that the canvas extends approximately 65,000 points in each direction.
With the great expanse that is the canvas, we need something to put our designs in.
Enter frames.
Frames are the containers we place our shape, text, and image layers in.
You can think of each frame in the canvas as a single screen of your design.
The toolbar contains the tools we need for creating layers.
Select the Frame tool in the toolbar.
Frame presets in the sidebar on the right let us create frames with specific dimensions.
We know that we're making a mobile app, so we'll select Google Pixel 2XL from the presets.
Two exciting things just happened.
Figma added a frame to our canvas and the sidebar on the left is no longer empty.
Everything that we add to the canvas will also be added to the Layers panel.
Let's right click on this frame and name it to Home.
To explore more of the canvas, we can use two fingers on a trackpad or the scroll
on the mouse wheel to pan around.
We can also press and hold the space bar and click and drag to pan.
Let's zoom out so we can see the entire frame.
If you're using the trackpad, you can also use the pinch gestures to zoom in and out.
You can also use shortcuts like Command Plus and Command Minus to zoom in or out.
For granular control, adjust the zoom level in your view settings up here.
Now, we're ready to add some layers to our frame.
As this is a wireframe, we're going to keep it basic and use shapes like rectangles
and ellipses to represent more complex aspects of our designs.
We'll select the rectangle tool to create an image for a post on our app's home page.
Just like frames, every layer in the canvas has dimensions.
We can adjust a layer's position and dimensions at the top of the right side bar.
We want our rectangle to take up most of the horizontal space in our frame,
so let's make the width of our rectangle 380, and a height of 300.
If we look in the layers panel again, we can see that our rectangle is within our home frame.
Some layers, like frames, can contain other layers.
If we move our rectangle outside of the frame, the layers panel updates, too.
We're going to place our rectangle back inside of our frame.
Figma will help us snap the position of the rectangle
to align it to the center of the frame.
Cool. Now we're going to create a shape that represents a user's profile picture or avatar.
Select the Ellipse tool on the menu and click to start drawing the ellipse.
If you hold down Shift as we drag, we can create a perfect circle.
We'll release to create the avatar with dimensions of around 30 by 30.
Holding Shift can strain the proportions of our ellipse.
If we update one value in the right-side bar, the other will update, too.
We can click into the width field and use the arrow keys
to nudge the ellipse's dimensions to 30.
Some fields in Figma accept equations.
We can use equations to resize layers by adding, subtracting,
multiplying, or dividing the existing value.
Let's add plus 10 to the field to set the dimensions of our circle to 40.
Basic shapes support both fill and stroke properties.
We can see these in the right sidebar when we select both of our layers.
By default, our layers have a fill of grey, but you can choose another color.
Enter a hex code in the field or click the Swatch to open the color picker.
We can select colors from the Palette, or apply other fills
like gradients, images, and even animated gifs.
We can also remove the fill entirely by clicking the minus button.
We want our wireframes to appear like outlines instead of solid shapes.
We can do this by adding a stroke.
Strokes are outlines or borders around layers.
We've learned to align layers to their frames, but we can also align objects to each other.
Let's use the alignment tools to align the layers to the left.
As our avatar layer is smaller, Figma will align it to the larger image layer.
Now, we need a username to go with our avatar.
Select the Text tool, click a spot on the canvas next to our avatar, and type in name.
We'll cover adjusting text properties later in the series.
We want our text layer to align to the center of our avatar.
Drag over multiple layers to select them all at once and click Align Vertical Center.
If we want to make small adjustments to a layer's position,
we can use our arrow keys to nudge objects on the canvas.
Looks good to me.
Users will want to engage with each other by commenting, liking, and saving posts.
Let's press R to select the Rectangle tool and create some icons for these actions.
We'll use Shift again to constrain the proportions and create a perfect square.
Let's aim for dimensions of 32 by 32.
Instead of drawing three separate squares, we can copy the original layer.
There are a few ways to copy layers.
Hold down Alt or Option and click and drag on our layers to duplicate it
or press Command D. Figma will maintain the same distance between objects.
If we want to change the uniform spacing between them, we can select our layers
and update the horizontal spacing in the right sidebar.
We'll need some text below our image.
Let's add that.
All these layers make up a single post.
We want to be sure these objects stay together.
There are two ways we can group layers.
We can use the keyboard shortcut, Command G, to create a group out of these layers.
Groups allow us to move a collection of layers
around without having to select each individual layer.
We can use Groups or Frames to organize our Layers panel.
While Frames and Groups look similarly in the Layers panel, they are fundamentally different.
Groups are the sum of their parts and have no properties of their own.
We can use Groups to organize our layers or apply properties to layers in bulk.
Frames, on the other hand, can have their own dimensions and properties,
some of which can affect the layers within them.
We'll learn more about frames and their properties later in this series.
From the right sidebar, we can convert our group into a frame.
Then we'll copy this frame using the keyboard shortcut to create a second post for our feed.
We'll move the other post below the other post in the frame.
The feed is starting to take shape,
but we're missing some crucial elements to make it look like an app.
We need a status bar and a navigation menu to move between pages in our app.
We could make these elements using shapes, or we could rely on components
and libraries to speed up the process.
Components are the building blocks of our designs.
They can be basic UI elements like buttons or icons,
or more elaborate compositions like toolbars and menus.
Libraries are collections of components and styles.
You can use libraries in Figma to create, share, and use components across your files.
You might have heard of a design system.
Design systems combine component libraries with standards
and guidelines for implementing them in code.
They're a single source of truth for designers and developers
and help to create consistency at scale.
Let's look for a component library in the Figma community.
The Figma community is a space where creators can share resources
in the form of design files and plugins.
We're going to use this wireframe UI kit,
so we'll duplicate the file and add it to our drafts.
We could copy components from this file and paste them into our wireframes.
We're going to publish these components to a library instead
to make them available to our team.
We'll open the file in the editor and click the arrow next
to the file name and select Move to Project.
As components can only be published in a team, we'll move this to a project in our team.
Now, we can go to the same menu and select Publish Components and Styles.
We can enter a description of our library and press Publish to share it to our team.
Back in our original file, we can now access that library
in the Assets panel of the left sidebar.
Click the book icon to open the library's modal.
Toggle the switch to enable the wireframe in our file.
Let's resize the left sidebar.
Hover over the edge until the cursor appears, then click and drag to resize.
Okay, we need components to represent the status bar at the top of the screen,
and a floating action button, or FAB, at the bottom.
This generic status bar is perfect.
To add this component to our file, we can click on the component
in the assets panel and drag it onto the canvas.
We'll position the status bar near the top of the frame and release to place.
We'll align to the top and left.
Let's repeat this process for the FAB and place it in the bottom and the right of the frame.
Now, we have copies of these components known as instances.
Instances are connected to the main component they originated from.
If you make a change to the main component,
Figma will also apply those changes to any instances.
This saves you from having to manually update every instance when you want
to change properties of your component.
Our eventual application will need to adapt to different screen sizes.
If we want to resize our frame now, our components don't change.
We can make sure they respond to different frame sizes using constraints.
At the moment, our constraints are set to the top and left by default.
We want the status bar to take up the full width of the frame,
so we'll keep the vertical constraints at top
and set our horizontal constraints to left and right.
We'll set the constraints for the fab at the bottom and right.
Now, when we resize our frame, the components will respond according to their constraints.
Our app is starting to come together.
Let's create a frame for our menu.
Select the frame in the toolbar or press the F key.
We'll add another Google Pixel 2XL preset to the canvas.
Let's add some text layers for each page in our app.
Press T to select the text tool and click to create a new text layer.
We'll type in menu item for now.
We want all our text layers to be the same width, so we'll set the width to 200.
We'll also increase the font size to 20.
Let's duplicate this layer to create four more menu items, one for each page in our app.
Hold down Alt slash Option, then click and drag to duplicate.
Then, use the duplicate shortcut.
Let's copy the status bar in Fab from our home page to complete our menu page.
We'll Click to select the status bar, hold down Shift, then Click to select the Fab.
We'll then use the shortcut Command C to copy them to our clipboard.
Select our menu frame and press Command V to paste.
Figma pastes them in the same position as this frame.
Nice. I think there are some other ways we could lay out this menu page,
so let's explore some different approaches.
Okay, we have a few designs here, but I'm not quite sure which approach to take.
We could set up a design critique and schedule some time on the calendar,
but I wonder if anyone on the team is around to help me choose.
We'll click the Share button in the toolbar.
As we've already invited everyone on our team, we don't have to invite them to every file.
We'll click Copy Link and drop the link in our team channel.
Our team has some existing sticky note components which we love to use for feedback.
I'll enable that library in this file while I'm waiting for our team to arrive.
Our team members avatars are showing up in the toolbar.
To jump to their location on the canvas, we can click on their avatar to enter observation mode.
It sounds like our team loved the simplicity of our first design,
but thought that a back button would be better than our fab.
Someone suggested the menu could be underneath the rest of our content.
I like that idea.
Another person pointed out that the center text makes it hard for users to scan quickly.
That's a great point.
It looks like fellow design intern Daniel is creating a new version of the menu,
which incorporates some elements of each of our designs.
This looks awesome and everyone's on the same page.
I'm glad we got some feedback on our wireframes before we invested
in some higher fidelity designs.
Now, we know which direction to go in.
We'll see you in our next video where we explore color, typography and imagery.