Figma Tutorials

Figma is an online platform allowing designers to create digital prototypes for apps and websites.
Hereby a short introduction to the workspace and links to relevant tutorials. If you have more good tutorials to contribute to this page and help other students, please share it with us!

TIP#1! Have a clear sketch of your design = know what you want to happen.
TIP#2! Figma doesn't work well on Safari, please use Chrome or Firefox.

Introduction to the Workspace

Creating a Frame. choose your own phone size for the prototype.
Each frame wil be one visualisation state of your app. For another state, you will design another frame.
You will be able to check your prototype on your phone with the Figma mobile app.

Selection's Options. Each time you select an element in Figma, you will have its editing options on the right side of the screen.

Add Interactivity. First, switch from "design" to "prototype" on the top right.

Then, select the action that will trigger the change (swipe/ hover/ click etc.).


Select the desired interaction (navigate to, open overlay etc.) and its way op appearing (delay, fade-in etc.).

Tutorials for Basic Functions

• Adding and creating Text
• Add Images and Videos
• Create a Photo Gallery
• image carousel preset from Figma Community
• https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-components-in-Figma - create a consistent design

Tutorials for Advanced Functions

• Create an image gallery with sliders
• Automatic Horizontal scrolling
• building a drop-down menu