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: 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: www.figma.com/
Check out the full Figma tutorial playlist here: • Figma Tutorials for In...
Using the affiliate links below will help support me and the content on this channel:
**Best AI Tools for Instructional Designers**
Synthesia: www.synthesia.io/?via=devlin
WellSaid Labs: www.wellsaidlabs.com/?via=devlin
Descript: www.descript.com/?lmref=jJTSTA
Jasper: jasper.ai/?fpr=devlin44
**Best Laptops for Instructional Designers**
Dell XPS 13: amz.run/6l1w
16-inch MacBook Pro: amz.run/6l1y
Gigabyte Aero 17: amz.run/6l26
**Best Books for Instructional Designers**
The Non-Designer’s Design Book: amzn.to/3kP0reO
Map It: amzn.to/3f137mR
eLearning and the Science of Instruction: amzn.to/3kNuBiF
Design For How People Learn: amzn.to/3CLtrNM
Michael Allen’s Guide to eLearning: 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

[@DevlinPeckYT]

Learning how to become an instructional designer? Grab the free Become an ID checklist here: www.devlinpeck.com/become-an-id-checklist

[@happygouki]

Hi Sabrina! Im a gfx designer->ux -> instructional designer trying to learn and understand the id process. this has been great, instructional and reaffirming. Thank you! 🙏

[@DevlinPeckYT]

Thanks for watching! Glad it's been helpful to see where visuals land in the full ID process.

[@SabrinaGonzalesDP]

Hello! What a journey you've been on! UX research and graphic design will breath skills to bring to ID 😄

[@emsvincoffee5184]

Amazing! Thank you, Sab and team! Sab’s enthusiasm lets you feel how fun it is to actually do this.

[@sanjanasingh8313]

Finally!!!
Been waiting soo longgg

[@DevlinPeckYT]

Haha! Glad it was helpful :D

[@SabrinaGonzalesDP]

🫣 haha, thanks for the patience! Hope you enjoy this one!!

[@NDemanuele1]

Did you create all the graphics in Figma? It looks like you imported them from Vyond? Looks great.
I'm interested in creating a mockup. I'll have to play around. Is there a checklist for creating a mockup so we don't leave any important details out? Thanks

[@sadafalam]

I'm soo loving watching these videos and following along while working on my own flagship project. My project will be heavily inspired by your style, Sabrina🫣but I hope my personal twist shines through by the time I'm finished. Thank you so much!

[@DevlinPeckYT]

That's awesome! Sabrina is an inspiration for sure :D