Recommended
More Related Content
What's hot
What's hot (20)
Similar to Figma Prototype A to Z.pdf
Similar to Figma Prototype A to Z.pdf (20)
Recently uploaded
Recently uploaded (20)
Figma Prototype A to Z.pdf
- 1. FigmaPrototypeA toZ Free Live Session Presented by Atiqur Rahaman
- 2. Topics we will cover What is prototyp Importance of Prototypin Types of Prototyp How Prototype Work Introductio Trigger Transition Destinatio Use Prototype Interactive Components Prototype with section Some Tips Before Ending About this Session
- 3. Whatis prototype A prototype is “A simulation or sample version of a final product, which UX teams use for testing before launch.”
- 4. Importance of Prototyping Better understanding of the design inten Early Feedback Early changes save time and cos Validation before developmen User research and user testing
- 5. “If a picture is worth 1000 words, a prototype is worth 1000 meetings — saying at @ideo.
- 6. Ah! There are 3 types of prototype 1. Low Fidelity 2. Medium Fidelity 3. High Fidelity Types of Prototype
- 7. 1.Low Fidelity Lo-fi are the paper prototypes that are perfect at the early stages and are refined throughout the process
- 8. 2.Medium Fidelity The medium fi prototype is the one with the product created with practical functionalities, albeit limited, based upon the storyboard and user scenarios. Best for the intermediate stages of your product development when you are moving from lo-fi to hi- fi
- 9. 3.High Fidelity Hi-fi is highly mistaken for the final product as they are the closest prototypes to what the actual finished product would be
- 10. It’s all divided into 3 parts 1. Trigger A point to initiate the interaction 2. Transition Intermidiary state of the interaction 3. Destination Final place where the prototype will be pointed towards How Prototype Works
- 12. How Prototype Works Dhaka Khulna
- 13. How Prototype Works Dhaka Khulna
- 14. How Prototype Works Dhaka Khulna Trigger Transition Destination
- 16. Umm.... Appearance + Trigger Transition Destination Animation Animation Type Animation Velocity Animation Time
- 17. Lets deep dive
- 18. Appearance Nomral State After Clicking Any Element
- 19. Trigger
- 20. SomeTips forSmart Animate Always start with final stat Divide whole interaction into some stage Trial & Error is Fine
- 21. Transitions Animation Animation Type Animation Time Velocity What will be the interaction How the elements will appear Time of the animation Motion of the interaction
- 22. Animation
- 23. AnimationType
- 24. Velocity
- 25. Animation Time
- 26. You need explanation for destination?
- 27. Use cases Useful for micro component Ah! Less wirin You can make loop animation easily Use Prototype Interactive Compone nts
- 28. Use cases Useful for complex scenerio Again! Less wiring Prototype with sections
- 29. SomeTips& Caution Never use different type of animation for same interactio Try to limit delay/animation time in between 300-500m Don’t use too much complex interaction
- 30. Thankyou! Any questions? Atiqur Rahaman | hello@atiq.info | @uxtalkswithatiq