Lo-Fi to Hi-Fi: Prototyping in Figma

Learn how to transform your concepts from lo-fi wireframes into hi-fi prototypes using the collaborative interface design tool, Figma.

Introduction

• Going from wireframes to prototypes in Figma
• What you need to know
• Defining a problem statement

1. Low Fidelity

• Digital vs. physical wireframing mediums
• Selecting color schemes and visual elements
• Sketching for wireframing
• Finalizing low-fidelity wireframes

2. Medium Fidelity

• Brush up on the basics
• Creating mid-fidelity mock-up
• Creating a prototype
• Usability testing
• Iterating with the help of key findings

3. High-Fidelity

• Preparing the layout for your high-fidelity mock-up
• Applying the key findings to your high-fidelity mock-up
• Designing your high-fidelity mock-up
• Developing functional prototypes
• Another round of usability testing

Conclusion

• Next steps and helpful resources