Figma For Beginners: Explore ideas (1/4)

>> 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.