The Figma prototyping hacks will be covering best practices and tips needed to get the best out of prototyping. Some of these can be simple prototyping hacks that when combined with other hacks will create a complex transition or interaction. The hacks can be random and do not have to be sequentially related.

1. Protyping in FigmaProtyping in Figma
HACKS AND TIPS (THE BASICS)
Florence Dairo
@floxdairo Lagos

2. Content
What is prototyping?
Why is prototyping important in a design workflow?
Reasons why I love prototyping in Figma
Things to note when prototyping
How I prototype in Figma (Hands-on)
Q/A
Florence Dairo
@floxdairo Lagos

3. What is Prototyping?
This is a design process where designers implement ideas into a prototype.
A prototype is a draft version of a product that allows a team expore ideas before investing time and
money into development.
Teams build prototypes of various degrees of fidelity (low, mid and high) to capture design concepts
and test with users. With prototypes, you can refine and validate your designs to know how well it
matches what your users want through the feedback they give.
Florence Dairo
@floxdairo Lagos

4. Why is prototyping important in a design
workflow?
It gives your user an idea of how the product looks and behaves.
It shows a clear picture of potential benefits, risks and costs of a product to stakeholders.
It helps identify and minimize unnecessary elements before product release by getting early
feedback from your target audience.
It is much cheaper to share and iterate ideas at this stage than after development
It allows you explore alternative solutions as fast as possible
Florence Dairo
@floxdairo Lagos

5. Florence Dairo
@floxdairo Lagos
Reasons why I love prototyping in Figma
In Figma, you can bring your ideas to life in animated prototypes while designing and test concepts
earlier and often.
Figma is so intuitive :
You can simply connect your UI
elements then choose your
interactions and animations easily.

6. Florence Dairo
@floxdairo Lagos
Reasons why I love prototyping in Figma
You can also define subtle interactions like:
On click
While pressing a button Activate
While hovering
On drag

7. Florence Dairo
@floxdairo Lagos
Reasons why I love prototyping in Figma
Embed links
Figma“OMG. is so cool”
With momentum scrolling, you can make your prototype
feel like the real experience.

8. Florence Dairo
@floxdairo Lagos
Reasons why I love prototyping in Figma
Create content overlays.
Animate GIFs easily (or create & export GIFs with
Figmotion)
(...)You can also define details like device frames
Mobile Tablet Web
Animate similar objects to detailed transistions with Smart
Animate.

9. Createcontentoverlays.
AnimateGIFseasily(orcreate&exportGIFswith
Figmotion)
(...)Youcanalsodefinedetailslikedeviceframes
Mobile Tablet Web
AnimatesimilarobjectstodetailedtransistionswithSmart
FlorenceDairo
@floxdairo Lagos
ReasonswhyIloveprototypinginFigma

10. Things to note when prototyping
Interactions
Animation type: Instant and Dissolve
Timing: Ease In, Ease Out vs. Ease In & Out
Duration (duration in animation is in miliseconds)
The End
Florence Dairo
@floxdairo Lagos