Lo-Fi to Hi-Fi: Prototyping in Figma

1h 46mIntermediate2022-11-22

Authors

Tanvi Janani

Senior Experience Designer at CVS Health

Course details

Are you ready to turn your wireframes into prototypes, but not sure where to begin? In this course, instructor Tanvi Janani shows how you can shape your design concepts from lo-fi wireframes into concrete high-fidelity prototypes and transform your sketched ideas using the process of design thinking.

Get an overview of the most common methodologies you’ll need to know when wireframing and prototyping in Figma. From setup and brainstorming to moodboards, early-stage mock-ups, and beyond, learn more about why designers love Figma, especially for prototyping and collaborative projects. By the end of this course, you’ll be prepared to start running usability tests, fine-tuning details, and gathering feedback from your team members and stakeholders.

Skills covered

User Interface PrototypingFigmaInteraction DesignUser ExperienceProject

Concepts

0. Introduction

01 - Going from wireframes to prototypes in Figma
02 - What you need to know
03 - Defining a problem statement

1. Low Fidelity

04 - Digital vs. physical wireframing mediums
05 - Selecting color schemes and visual elements
06 - Sketching for wireframing
07 - Finalizing low-fidelity wireframes

2. Medium Fidelity

08 - Brush up on the basics
09 - Creating mid-fidelity mock-up
10 - Creating a prototype
11 - Usability testing
12 - Iterating with the help of key findings

3. High-Fidelity

13 - Preparing the layout for your high-fidelity mock-up
14 - Applying the key findings to your high-fidelity mock-up
15 - Designing your high-fidelity mock-up
16 - Developing functional prototypes
17 - Another round of usability testing

Conclusion

18 - Next steps and helpful resources