FIGMA
TUTORIAL
Interface Design Tool
Free for
students
figma.com/education/
Getting started...
Profile
Where to get
plugins,
mockups, etc. Import
file
Create
new
Team project
Recent
project
Project
within team
Create
new
team
Creating a new design file
Hand (H) to
Move (v) Frame (f) Pen tool (p) adjust view
Shapes, Text (t) Comment Where the
e.g.: (C) file is saved
Rectangle
(R)
Creating a frame (a/f)
(1) Choose
(2) A new from
layer will different
appear models
Defining a grid and color of frame
(1) Select
layer
(2) Create a
grid, rows or
columns
(3) Fill frame
Insert text (T)
(1) Define
text type,
weight,
height,
spacing,
alignment,
etc.
(2) Change
text color
Insert an image
It is possible
to edit an
image in
Figma
Renaming layers (ctrl+R)
Right click
on the layer
Group elements (Ctrl+G)
Right click
on the layers
or on
elements
Creating components
(1) Starting (3) Having the two layers
fresh, I've selected, we will create a
created a Component
new frame
called
Components
and blocked
the frame
we were (2) On the
working on new frame,
so none of created a
the work is rectangle
misplaced using the
shapes tool
and the text
tool
Creating components
Master
component
Any alteration we do
to the component will
change its instances
Creating instance of component
Instance of the
component,
just copy the
main
component and Main
past it
Instance
(identical)
Creating instances
(2) Moving the ellipse inside the layer
Component 1, meaning moving the ellipse to be
inside the main component, the behavior will be
mimic in the instance of the component
(1) I've created
an ellipse inside
the frame, but Main
outside of the
components
Instance
(identical)
Creating instances
Main
Instance
(identical)
Note: This is useful in
navigation bars, for
example.
Color picker tool
I've created four squares to
define our color palette
Color picker tool
Using color picker to choose color from image
Distributing elements
Evenly space
elements between
the first and the
last selected
Distributing elements
Evenly space
elements between
the first and the
last selected
Creating color styles
(1) Find project's color
(2) Add new color style styles
We don't have any
Creating color styles
(2) Add new color style
(1) Choose one of the
colors
Creating color styles
We now have the
colors saved ready to
use
Note: The same works for
typography, etc.
Prototyping
Creating interations between screens
(1) Choose the prototype option
(2) Create a new
interaction
(3) Define its
caracteristcs,
e.g., when I click
image1, I will
navigate to basics
- second screen,
with an animation
Creating interations between screens (5) See full project interaction
(1) Choose the prototype option
(4) See interaction, a
new tab will appear
(2) Create a new
interaction
(3) Define its
caracteristcs,
e.g., when I click
image1, I will
navigate to basics
- second screen,
with an animation
Creating scroll
Really long
text that does
not fit inside
the frame
Creating scroll
(1) Create a
(3) Move the new frame
text Body where user can
inside the new scroll
frame
(2) Define area
Creating scroll
(2) Go to Prototype
(3) Define type of
scrolling
(1) Select frame
Creating a pop-up
(1) Created a
new button
(2) Created a new frame
which will be the pop-up
when we click the button
Creating a pop-up (4) Check interactions
(2) Create new
interaction
when button is
clicked
(1) Select the
button
(3) Define were
the overlay
should appear.
If Manual is
chosen, it will
be possible to
move the
overlay and
position it
wherever
Sharing the prototype
Share prototype
Through an invite
E.g., share prototype
on webpage
Good luck
The best way to learn
a new technology is to
try it.
Further resources:
https://www.figma.com/resources/learn-
design/
https://uxplanet.org/figma-all-you-need-to-
know-156b52b88e54
https://www.youtube.com/watch?
v=3q3FV65ZrUs&ab_channel=DesignCourse
So many many more, just explore...
