How to Create Visual Mockups in Figma (Instructional Design & eLearning)

Craft high fidelity visual mockups even quicker for your eLearning or instructional design projects with the free Figma Keyboard Shortcuts job aid. 👉 Download it here: https://www.devlinpeck.com/forms/figm...

When done right, eLearning projects take time to develop.

But the last thing you want is to get hours into building a learning experience just to realize the layout isn’t quite aligning with your graphics the way you expected.

It happens to the best of us. But here's a game-changing solution: Visual mockups.

A high-fidelity mockup gives you a clear picture of your project aesthetics, saving you hours of valuable time later on.

No more back-tracking or scrambling to find new assets in the final hour. Instead, using a tool like Figma simplifies creating visual mockups to help you and your stakeholders stay on track.

In this video, Sabrina Gonzales continues her Figma tutorial series and walks us through how to create our own Hi-fi mockups - shedding light on the strategic benefits of foresight.

Sign up for a free Figma account: https://www.figma.com/

Check out the full Figma tutorial playlist here:    • Figma Tutorials for Instructional Des...  

Using the affiliate links below will help support me and the content on this channel:

**Best AI Tools for Instructional Designers**
Synthesia: https://www.synthesia.io/?via=devlin
WellSaid Labs: https://www.wellsaidlabs.com/?via=devlin
Descript: https://www.descript.com/?lmref=jJTSTA
Jasper: https://jasper.ai/?fpr=devlin44

**Best Laptops for Instructional Designers**
Dell XPS 13: https://amz.run/6l1w
16-inch MacBook Pro: https://amz.run/6l1y
Gigabyte Aero 17: https://amz.run/6l26

**Best Books for Instructional Designers**
The Non-Designer’s Design Book: https://amzn.to/3kP0reO
Map It: https://amzn.to/3f137mR
eLearning and the Science of Instruction: https://amzn.to/3kNuBiF
Design For How People Learn: https://amzn.to/3CLtrNM
Michael Allen’s Guide to eLearning: https://amzn.to/31ZUbJB

0:00 Intro
1:37 Lo-fi vs Hi-fi Mockups
3:32 The ID Process
4:17 Sourcing Graphics and Assets
8:27 Building the Hi-Fi Mockup
17:23 Adding Text to the Mockup
26:40 Time to Iterate!
31:37 Sharing for Feedback and Next Steps