SlideShare a Scribd company logo

Prototyping in Figma

•
•
namnso ukpanah
namnso ukpanah

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 of 10
Download to read offline
Protyping in FigmaProtyping in Figma HACKS AND TIPS (THE BASICS) Florence Dairo @floxdairo Lagos
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
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
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
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.
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
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.
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.
Createcontentoverlays. AnimateGIFseasily(orcreate&exportGIFswith Figmotion) (...)Youcanalsodefinedetailslikedeviceframes Mobile Tablet Web AnimatesimilarobjectstodetailedtransistionswithSmart FlorenceDairo @floxdairo Lagos ReasonswhyIloveprototypinginFigma
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

More Related Content

Prototyping in Figma

  • 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.
  • 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