How to Create Wireframes in Figma for eLearning & Instructional Design

Speed up your wireframe building process for eLearning or instructional design projects with the free Figma Keyboard Shortcuts job aid. 👉 Download it here: https://www.devlinpeck.com/forms/figm...

When we're developing eLearning, it's tempting to dive right into Storyline and start building.

But you can make your life a lot easier (and your final product a lot better) if you design your layouts in a tool like Figma first?

Wireframes are the missing step between storyboards and interactive eLearning for a lot of instructional designers.

When you create your wireframes, you don't need to worry about programming, triggers, or variables. You just need to decide where your different elements will go on the slide.

Using a streamlined process like this lets you develop a lot faster, and it ensures that your visuals are polished and professional (perfect for presenting your company in a positive light or helping you get hired if you're on the job market).

In this video, Sabrina Gonzales goes in-depth on how to use Figma to create wireframes in part three of the Figma playlist.

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:23 What are Wireframes?
4:03 Hand-drawn vs Digital
8:00 The ID Process
8:27 Wireframe Layout
14:42 Buttons and Text
22:34 Iterate
26:59 What's Next?