Figma Tutorial

Subject to Contract Issue: 1/0
BelTech Edu 2021

Figma tutorial
BeltechEDU2021@kainos.com
© Kainos 2020 COMMERCIAL - IN CONFIDENCE

Contents
1. Getting started ........................................................................................ 1

1.1 Sign up................................................................................................................... 1
1.2 New project .......................................................................................................... 2
1.3 Adding collaborators ........................................................................................... 4
2. Adding screens ....................................................................................... 5
3. Adding features ...................................................................................... 6
3.1 Existing templates ................................................................................................ 6
3.2 Modifying elements ............................................................................................. 9
3.3 Layering elements.............................................................................................. 11
4. Adding interactions .............................................................................. 12
5. Presentation mode ............................................................................... 15
6. Export options ....................................................................................... 16
© Kainos 2020 COMMERCIAL - IN CONFIDENCE

1. Getting started
Figma is an industry used ‘wireframing’ tool, it is used for building concepts of applications
before they are developed!
Importantly, it is free and easy to use.
1.1 Sign up
Head across to https://www.figma.com/ and click on ‘sign-up’ in the top right corner
Once signed-up, you should see a screen similar to this one
If you are working in a team, make sure everyone has their own account, as Figma allows
multiple people to work on the same thing at the same time.
© Kainos 2020 COMMERCIAL - IN CONFIDENCE 1 / 17

1.2 New project

On the left hand side of the screen above, click ‘Create new team’ and enter any team
name.
When you create your new team, you’ll have the chance to invite your teammates (if you
are working in a team) by entering their email.
Make sure this is the same email they have used (or will use) to sign up to Figma.
Then click on ‘Team project’ under your team name to view your project
Note: if you need to add anyone at a later date to your team, you can click the ‘Share’
button in the top right corner, just make sure to click the dropwdown for ‘can view’ to
‘can edit’ so that your invited team member can make changes!

Next, to get started, click ‘New File’ and from the ‘Blank presets’ tab, choose the ‘iPhone
11 Pro max’ template, as this will be pre-set to demo your app idea on a mobile screen.

If all has gone well, you should see a screen similar to the one below
As you can see, the rectangular frame is already pre-sized to fit an iPhone 11, the next
thing to do now is to fill your storyboard with your idea!
We will cover adding screens, features and dynamic interactions to your app idea
storyboard shortly.
1.3 Adding collaborators
Just to reiterate, if you need to add a teammate to your project you can do so by clicking
the ‘share’ button in the top right corner. Make sure to click the drop-down to ‘can-edit’
so they can contribute to the storyboard, as Figma allows multiple people to work on the
same storyboard at once.

2. Adding screens
A storyboard has multiple screens, and you can very easily add screens in Figma.
The new file you created in the last step was created with one screen already on it, so
adding more screens is as simple as copying and pasting that blank screen.
Just click the blank frame to select it
Press ctrl + c, to copy the frame, and press ctrl + v to paste a new frame.
You can give each frame a unique name by double clicking the title above each frame.
This will help you keep track about which frame is which and make it easier to present.
By copying + pasting the same blank frame, you will keep each screen the same size.

3. Adding features
There are a few ways to add features to each screen to showcase your app idea.
First of all, you can draw shapes right onto the canvas, either:
• Choose one of the shape tools from the top left toolbar
• Press the keyboard shortcut for one of these tools
• Paste in an image or other resource you wish to use
These are the most useful shape tools and should allow you to very quickly design a layout
for your application storyboard.
To add text, you can click the capital T icon or simply press the ‘T’ key to start adding text
to your storyboard.
3.1 Existing templates

There are a small number of existing mobile templates that you can take inspiration from,
these provide pre-made assets that can help you brainstorm different ideas.
One of my favourite templates is the mobile wireframe UI kit.
To get access to it, head back to the figma dashboard by clicking the top-left corner and
‘back to files’

Click ‘new file’
Select the ‘wireframing’ tab
Then select the ‘Mobile Wireframe UI kit’ and press ‘create file’

If everything has went to plan, you should be able to see a premade project with
template examples of different elements such as
• Buttons
• Keyboards
• Calendars
• Icons
• Navigation bars
And many more!
Make sure to check out the various pages on the top left to see the different styles and
asset types!
Feel free to copy these into your own project screens that you created earlier to try out
different ideas and give your storyboard a really professional look!
Note – to copy these assets easily into your mobile project, you will likely need to have 2
browser tabs open, one to copy from and one to paste to (Your own project)

3.2 Modifying elements

Draw a rectangle on your screen by pressing ‘R’ and clicking & dragging on the screen, if
you look on the right hand side you can see all the different properties you can modify of
the element.
I will go through the most important of these different properties

First of all, we have our spatial properties, we can change the position of the element with
the X and Y options
We can also change the Width and height with the W and H properties
Finally, we can change the angle of the element, and how rounded the corners are with
the final two spatial properties
We can change
the colour of any
element by
changing the ‘Fill’
property.
If you have
selected a colour
pallete, make sure
that your screens
follow it to give it a
nice, consistent
feel.
You can also add

other effects such
as outlines and
shading with the
‘stroke’ and
‘effects’ options

3.3 Layering elements

Make sure when adding elements, you get the ‘order of layers’ right.
Simply put, this decides what goes on top of what, meaning if you accidentally put text
behind a button instead of infront of it, the text wouldn’t be readable.
You can see layers on the left hand side of your screen, the further to the top it is, means
that layer will be drawn on-top of the layers below it, should any of your elements overlap
like text on a button.

4. Adding interactions
It’s possible to add interactions to your elements, so that when you are in ‘presentation
mode’ they will act and behave as if they were on a real application.
I’ll demo this with a really simple ‘Phone call blocking’ application I have storyboarded in
Figma
The app storyboard has 3 screens, one for an incoming call and then:
If the user presses Cancel
• Go to the call rejected page
Otherwise, if the user presses Accept
• Go to the call answered page
We can add interactions very simply.
Click on the element you want to do something when the user presses it
Here I’ve selected the “Cancel”

button”

Next, click on the ‘prototype’ tab on the far right

hand side, and click the plus beside ‘interactions’
Click the ‘Tap -> None’ to bring up the interaction details, and change the ‘None’ to
‘Navigate to’

Now you can choose which screen the user navigates to when that element is tapped.
Here I will choose the ‘Call rejected’ screen so that when the user presses the ‘reject call’
button, they will be shown the correct screen.
Now you just have to do the same thing for the ‘answer call’ button
You will be able to test out your interactions when you try out the ‘presentation mode’ in
the next section.

5. Presentation mode
Once you are happy with your initial design, give it a go and see how it looks in
presentation mode by clicking the play button in the top right corner
Here, you will see what your design looks like on

the end device.
This is really useful for getting an idea how your

app’s colour scheme, spacing and general
layout work.
If you have chosen to add ‘interactions’ from

before, you can try these out by clicking on the
buttons you set up.
If you want to return to the start page of your
presentation, just press ‘R’ and it will reset.

6. Export options
If you would rather present still images of your storyboard, rather than a screen recording
of Figma, you can easily export your finished storyboard from Figma by clicking the ‘files’
tab at the top left corner and choosing one of the export options
Export frames to PDF will download every frame in a single PDF document, whereas
‘Export’ will only export what you have selected



Figma Tutorial

Uploaded by

Copyright:

Available Formats

Figma Tutorial

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Figma Tutorial

Uploaded by

Copyright:

Available Formats

Subject to Contract Issue: 1/0

BelTech Edu 2021

© Kainos 2020 COMMERCIAL - IN CONFIDENCE

1. Getting started ........................................................................................ 1

© Kainos 2020 COMMERCIAL - IN CONFIDENCE

Importantly, it is free and easy to use.

© Kainos 2020 COMMERCIAL - IN CONFIDENCE 1 / 17

1.2 New project

© Kainos 2020 COMMERCIAL - IN CONFIDENCE 2 / 17

© Kainos 2020 COMMERCIAL - IN CONFIDENCE 3 / 17

1.3 Adding collaborators

© Kainos 2020 COMMERCIAL - IN CONFIDENCE 4 / 17

© Kainos 2020 COMMERCIAL - IN CONFIDENCE 5 / 17

3.1 Existing templates

© Kainos 2020 COMMERCIAL - IN CONFIDENCE 6 / 17

Click ‘new file’

Select the ‘wireframing’ tab

© Kainos 2020 COMMERCIAL - IN CONFIDENCE 7 / 17

© Kainos 2020 COMMERCIAL - IN CONFIDENCE 8 / 17

3.2 Modifying elements

I will go through the most important of these different properties

© Kainos 2020 COMMERCIAL - IN CONFIDENCE 9 / 17

You can also add

© Kainos 2020 COMMERCIAL - IN CONFIDENCE 10 / 17

3.3 Layering elements

© Kainos 2020 COMMERCIAL - IN CONFIDENCE 11 / 17

Here I’ve selected the “Cancel”

© Kainos 2020 COMMERCIAL - IN CONFIDENCE 12 / 17

Next, click on the ‘prototype’ tab on the far right

© Kainos 2020 COMMERCIAL - IN CONFIDENCE 13 / 17

© Kainos 2020 COMMERCIAL - IN CONFIDENCE 14 / 17

Here, you will see what your design looks like on

This is really useful for getting an idea how your

If you have chosen to add ‘interactions’ from

© Kainos 2020 COMMERCIAL - IN CONFIDENCE 15 / 17

© Kainos 2020 COMMERCIAL - IN CONFIDENCE 16 / 17

© Kainos 2020 COMMERCIAL - IN CONFIDENCE 17 / 17

© Kainos 2020 COMMERCIAL - IN CONFIDENCE 18 / 1

You might also like