Lets start with an introduction

Beginner‘s guide to
Hello there!

First of all, thanks for getting my course.

Figma It’s exciting for me to have you here.

My name is Miguel Queirós.

I am a designer and creative from

Portugal.

by Miguel Queirós In the past few years I’ve been developing

creative work on the fields of Design,
Digital art and illustration.

In the last year, I found myself in the world

of product and UI/UX Design.

Learn the basics of UI/UX design

and start your figma journey. Since then, just like you, I decided to learn
one of the greatest tools in the market
today: Figma

Button If you are a creative, Designer, content creator or

entrepreneur, Figma is an amazing tool to create
UI/UX Insert text stunning visuals and beautiful digital products and
Text here... interfaces.

In this beginner’s course, you will learn the basics

and fundamentals of Figma and start your UI/UX
journey
Auto-layout

Aa
Poppins
Poppins
Poppins
1455FF
‘’One of the best tools for Lets begin!
designers and creators’’
Introduction

What is Figma? What can you create with Figma?

Figma is a tool that helps designers create and

collaborate on digital designs, like websites and
apps and other digital products

It works online, so multiple people can work on the Websites and Landing Pages
same design at the same time, making teamwork
easier.
Mobile Apps
In short, Figma is a handy tool for making digital
ideas come to life, especially when working with a Digital Products
team!
Social media Designs
It’s incredible
Content

Icons and Illustrations

Who can use Figma?
Presentations
UI/UX Designers And much more
Graphic Designers

Marketing Professionals

Students

Developers

Artists

Creatives
Create an account Figma Dashboard

Now that you have your account, is time to learn and explore the figma interface, tools and
features.

Lets jump right into it.

1 Go to Figma.com
On the main dashboard in the top right corner you have 3 options: Design file, FigJam board
and Import
2 Click on Sign up button Click on the ‘’Design file’’ button and then Drafts to create a new project.

Click on the drafts to create

3 Create account or use email a new document

4 Enter your details

Great! Now that you created a new canvas. Let’s have a look at the Top bar in our interface.

Lets start with the tools bar:

5 Verify your account All of the tools you need

are in the Tool bar

6 Congrats! elcome to Figma

W
These are the main tools in Figma: Move, Frame, Rectangle, Pen, Text, Resources, Hand and
Comment.

If you click and open the tools you will see the remaining options.

Lets dive deeper

Canvas and Frames Click on Desktop to open the options and then click on Desktop 1440x1024

In Figma we work with Frames. You can have or create as many

A Frame is the Canvas where you will create your Designs frames as you want.

Lets create your first Frame:

Click on the Frame icon in the top ba To create a Frame you can also click on the Frame tool (F) and drag in the screen to create a
Or Press the (F) on your Keyboard to open the frames panel. Frame with your desired height and weight.
Click on Frame(F) and drag with you mouse to create a new Frame.
When you open the frames tool, the options panel will appear on the right side of your
screen: Good! Now that we have a new frame to work on, let’s start by exploring the ‘’Layers’’ panel.
When you create a new frame, that frame will appear on the left menu below the ‘’Layers’’

The layers panel is below the Nav

Figma has a lot frame sizes for bar on the left side of your

your projects: phones, tablets and interface

websites

To rename your frame, click 2 times on the name to change it.

Nice You can name your frames as you

Here, you can pick and choose which frame you want to use on your project want or according to the needs

As you can see you have a lot of options: Phone, Tablet, Desktop, Presentation etc.. of your project.

Lets create a desktop Frame:

You can also click 2 times on the frame itself and change it there.
Canvas and Frames
Now that you have your Canvas(Frame) ready, let’s create some shapes and items. On this panel, we can see the alignment tools
To align the rectangle in the
frame, select the shape and
Select the Rectangle tool (R Align lef use the align panel.
Click and drag to create a shape in your Canvas Align horizontal center
Align righ

Align to
To create a perfect Square 1:1, press Align vertical center
shift while you drag your shape. Align bottom
In this frame, our rectangle is aligned
at the center, both vertically and
horizontally.

When you create a shape, the right panel with different options will appear

For now, let’s focus on the most basic properties In this frame, our rectangle is aligned
Size/dimension at the center vertically and aligned
colo left horizontally.
Strok
Effects

In this frame, our rectangle is aligned

at the center horizontally and aligned
Here you have your shape dimensions and alignment tools bottom vertically.

W- Change weight

H- Change Height

X Position

Y Position

Angle

Corner Radius
Layers and objects You can add as many frames, layers and

objects as you like.

Now let’s give a look at the left panel where we can see and

manage our layers and our objects.

You can see that we added a new object to our

frame called ellipse 1

You can rename it as you want.

Easy right?

Here we can see our main frame called ‘’Desktop’’

To rename it, double click it and change the name. Our shapes are inside the frames

Inside our frame we have our rectangle object.

If you add a new frame, it

will appear in the layers

panel on the right.

Let’s double click it and call it object 1

Nice! you are doing a great job

Now, let’s add a different objec

Select the ellipse tool (O)

Just like the rectangle, you can press

the shift key while dragging to create a Right now, our new frame ( desktop - 2 ) is empty

perfect circle.
because it has no objects inside it.

The process is always the same

Create a frame, rename it as you want, add objects

and other elements and organize them inside the

frame as you please.

Text
When you write new text, this right
panel with the text properties appears.
Typography ( text ),is one of the most important elements in

UI/UX design or design in general.

Where you have the option to choose
Let’s dive in:
your font, text size, color, text alignment
and other advanced settings.
Select the text tool (T) on the tools panel.
Let’s look at fonts, size and colors.

After that, click anywhere on the canvas to

create a new text object.

When you do that a new text box

Fonts
is created and you can type your
text.

A new layer is added to your frame.

It represents our text element.

Select the text

Go the the font panel and

choose a different fonts Figma has a wide variety of fonts
that you can use.

Now that we added some text, lets look at our

text properties on the right panel.
Text
Alignment
After you pick your font, you can choose
Lets look at the alignment options: left,
which variable you want: Medium, regular,
center and right
bold, semibold etc...

Left:

This is the text aligned at

left,This is the text aligned at left

Center:

Text size This is the text aligned at

left,This is the text aligned at left
Let’s play with text size

Right:
On the same right panel you have
the text size option This is the text aligned at
left,This is the text aligned at left

Color
At last, we can also change the color of
our text.

Click on the ‘’fill panel and

change your color.
Images Option 3

Instead of using a shape like a square, you can do the same with a frame
Images and other graphics is are a valuable tool when
working in UI/UX design.

Select the frame tool

It can help you communicate an idea and a specific product

with the user.

Let’s see how we can use them:

Create a new frame

Option 1
After creating a new frame,
On the tools panel, select the rectangle too the process is the same,
On the bottom select place image/video option go to the fill panel and add
image.

After clicking, you can

upload an image from your
computer

After choosing your image, you can click on the canvas to upload i
Option 4
Or, you can drag and drop it to adjust the size. Lets use a plugin called ‘’Unsplash’
You can click ‘’Shift’’ to create a perfect square. Click on the ‘’Resources’’ tool

Option 2

Create a shape, rectangle, circle or any other. Select plugins

Click on the fill panel and choose ‘’image’’ After open Unsplash, you
can search for any kind of
image and upload it to your
Click on ‘’Choose image’’ to project.

upload it from your computer.

You just need to click on
the image and voilà.

Search for unsplash

Auto-layout After creating our ‘’Button’’ text, lets add our Auto-layout

You are doing great!

Click on the text and press Shift+A
Now that you know the basics, lets learn one of the most powerful

features on Figma: Auto-layout

Auto-layout is a feature that helps designers maintain

consistency and flexible designs

Horizontal and vertical layout

Dynamic resizing
Nested auto-layou After doing that, you can see some minor changes
Spacing and paddin On the layers panel our icon changed from text to auto layou
Constraints Let’s call it ‘’button’’

Lets start by creating our first auto layout:

Create a text line by selecting the text tool (T

Let's call it ‘’button’’ for now

Now we can play and customise our element

After adding an auto-layout our button became a

Select the size and font frame with the text layer inside it.
that you like
e picked, Inter, semibold,
Iv

52 pixels so you can see

my screen well.
Auto-layout This contrast is not very
good....
When you create an auto-layout, a new panel appears:
What can we do to improve
it?

Exactly! let’s change the

text color.

Double click on the button to select the text

In this panel, you can change direction, alignment, add padding

and other options that we will check in the future.

Let’s change the color
to white #FFFFFF
Let’s start by giving our button some life

Click on the button fram

add a fill color
Looks way better now.

Let’s make some other

changes

Let’s change the color so we can see it better

On the auto-layout panel, let’s add some horizontal
For this one i’ve picked the
hex color #1638EB. and vertical padding.

You can pick a different

color if you want.
Auto-layout Let’s add some padding

What is padding? you might ask.

In design, padding refers to the space between the Let’s add 40 for horizontal and 12 for vertical
content of an element and its border.

Button
It is basically the space inside a container that
separates the content from the container's edges.

Right now, our button has 10 pixels of horizontal and

vertical padding
Our button is starting to gain some life now.

Let’s see other options.

Select the butto

on the frames panel on top, let’s round the
corners a bit

Button The padding is the space

between the content and
the border. Let’s add 20 pixels of corner radius.

10 pixels

Button
Looks more like a button
now im I right?
Auto-layout You can align content in the left, right and center.

Alignment Let's align our content on the top right.

Let’s look at our alignment options.

Button
Now let’s see what happens when we stretch and resize our content

Right now our button is aligned at the center

If you stretch it the content will remain centered.

Button
Button
Our text remains aligned what top right corner.
Let’s align it on the left
This is really useful when designing for multiple sizes and devices.

If you stretch it now, the

content remains on the left.
Now, let’s see other functions:

Button
Auto-layout
Strokes Shadows
Let’s add a shadow to our button.
Let’s add a stroke to our button

Below the fill panel, you have

the stroke option.

Click on the plus icon and

new effect appears.
Click on the plus option to
add a new stroke.

Button
You can choose 4 options

Button
Drop shado
Inner shado
After adding a new stroke, a panel
Layer blu
opens up with different options.
background blur

Let’s see how we can change

You can choose the stroke colo our shadow:
The stroke widt
Inside, outside or cente
Opacity Here you can change the
shadow direction, blur,
spread, opacity and color.

If you click on drop shadow,

the options panel opens up.
Auto-layout
Inner shadow
More about auto-layout.
Let’s explore other auto-layout possibilities.

Button
The process is the same, this time the shadow remains inside your button Let’s duplicate this button
select your button and click command + D

Button You can change the color and

opacity of your inner shadows also.

Button Duplicate it to create

2 buttons

Layer Blur
Button
Here you can change
Now, let’s add a auto-layout to these 2 buttons.
the blur intensity.
Select both buttons and press shift+A

In the layer blur, your element washes down into a blur effect.

Button
Button
Nice!, now we have a new
frame ( auto-layout ) with our
buttons inside.
Auto-layout
Right now this auto-layout doesn’t
looks very good right?
With this new auto-layout, we can manage it and
change all of the little elements. Let’s add some vertical and horizontal
padding.

Button Button
Button Button

We can add a fill color

Let’s add 24 pixels vertically and
horizontally.

Button You can add a fill

color to this new
auto-layout. Button
Button
Button
We can change the gap
between buttons.

Button Let’s add 16 pixels to Let’s round the corner

the gap.
16px

Button Button

Button
Auto-layout D irection
Let’s change the color of one of the buttons We can create vertical, horizontal and wrap auto-layouts

This is a vertical auto-layout.

Button
Select of the buttons and
Button change to a different color.

That way we can differentiate

Button our elements better.

Button

Button
Auto-layout is useful in so many ways.

For example: if you want to add a third button to

our auto-layout, the process is really easy.
To add horizontal auto layout press the
horizontal arrow on the panel
Select one of the buttons and press Command+ D

Button This is a horizontal

auto-layout.
When you do that, a new button
appears on our auto-layout
Button
Because we have a structured
auto-layout, the spacing
Button between the elements remains
balanced and equal.
Button Button Button
Auto-layout Now let’s add a description for how product image

Great progress! Click on the text tool (T) and write ‘’Product description’’.

You are doing great and improving your UI

skills and learning Figma! Product description This is our text

You can see that we can use Auto-layout for

everything and organise our elements in the project. The next step is to add a button.

You already know how to do it now :)

Lets see other ways to use auto-layout.

Select the text tool (T)

Write the word ‘’button’’

Creating a UI card
Let’s create a rectangle where we would place our image
Button Add auto-layout by pressing shift+A

Create a new rectangle.

Button Add a fill color

Width: 216

Height: 148 Button Double click on the text and

change the color to white.

Add 40 pixels of horizontal

Let’s round the corners Button padding and 12 vertical padding.

Button Add 16 pixels to corner radius

This is our image.

Buy Double click on the text and
change it to ‘’Buy’’
Auto-layout
Now we have our image, our product Dope! now you have created
description and our buy button. your first UI card.

Let’s customize it a little bit.

Product description

Buy
Product description
First add a new fill color

Buy Let’s go with a darker color.

Now let’s create an auto-layout

Select the 3 elements and press Shift+A

Product description
Product description
Shift+A to create an new auto- Buy
layout with our elements.
Buy
Let’s change the padding.

Add some corner radius.

Auto-layout Auto-layout is one of the most
important features in Figma.
Add some gap between elements.
It helps you organize and maintain a
good structure with your project.

There are some advanced features

with auto-layout that we will explore
in future courses.

Meanwhile, I you are enjoying and

experimenting yourself :)
Add 16 pixels of gap.
Product description

Buy Some UI cards examples:

Amazing! we quickly created a UI card

UI cards are used in websites, apps and product display
The possibilities are endless.
Product description Product description Product description
Product description Product description Product description
Product description Product description Product description

Buy Buy Buy

Product image

Product description Product name

Product description Product description
Product description
Buy Button/CTA Product description Buy

Buy
Components When you create a new component, you can see some
changes in our element

In Figma, components are reusable design elements that can be used to

create consistency and efficiency in your designs.

They are like building blocks that can be reused across different frames
and projects.
A new purple group of lines appears around our button.
Components are particularly useful for maintaining a consistent design
system, In the layers panel your auto-layout changes

As changes made to a component are automatically reflected wherever

that component is used.

Creates this purple diamond shape to represent our button.

Let’s see how we can create components
That means that we have created a new component.
and to use them.

Let’s grab our button Button

Button Let’s name our component ‘’button’’

To create a component, select our button and click on the

create component element on the top of figma dashboard.

now that we have created a new component, we can use it

You can also press and re-use it as many times as you want.
option+command+K
To do that go the layers panels and on the right side you
can see the ‘’assets’’ panel
Components Why is this important?

Creating components can be a powerful feature and

After that, you can open the ‘’components’’ panel.
tool help you design better and more efficiently.
You can see our button there
Let me show you:

Let’s say that you designed some screens with buttons in each
one of them and now you want to change the color or the text.

Button Button Button

Instead of changing each one individually, you can select your

main component and change the color there.
Drag and drop it to our canvas or frame.
When you do that, all of the instances will follow the main
component and change also.

This is called an
Button ‘’instance’’ If you change the properties on
Button the main component, the
instances ( copies ) will do the
Main component same
This copy is called an ‘’instance’’

An instance is a copy of the main component

In the layers panel you can see that our symbol has changed. Button Button Button
Instances

You can try it for yourself

Now has a single diamond shape with an outline Very useful right?

Main component Instance

Final thoughts I’m working on some advanced stuff to
help you improve as a designer and grow
There is a lot more stuff to cover inside Figma. your brand, business and career.

The journey to UI/UX and product design is

Can’t wait to show you
amazing, fun and exciting.
what i’m working on.
It's a never ending journey so it’s impossible for me
to cover everything in this crash course.
Thanks so much for joining me!

My goal with this is to introduce you to the basics

and tools of the Figma app in a way that you can Your feedback would be really
start to experiment and build your own designs: helpful
buttons, text, layouts, cards and more advanced
stuff like landing pages and apps.
Connect with me on
After finishing this beginners course, feel free to socials:
connect with me on socials and send me a DM.
https://twitter.com/DopeOblivion

I would love to connect and hear from you and see

what you are building.

Next steps
This was your first step into UX design.

Now is time to keep learning and improving

your skills.

This was my first product and I hope that

you enjoyed and it was helpful to you.