Quick and Easy eLearning Prototypes in Figma
Speed through the interactive prototype process for your next eLearning or instructional design project with help from the free Figma Keyboard Shortcuts job aid. 👉 Grab your copy here: www.devlinpeck...
Testing as you go is the secret to making sure your eLearning project isn't leaving your users in the dark. Is the interface intuitive? Is the content clear? What elements are missing?
If you want to make sure your project not only looks good, but runs smoothly, you'll want to test out its functionality before you publish.
That's the beauty of interactive prototyping.
Simulating the final product with a prototype is like a safety net for development - it highlights errors and gives you opportunities for early feedback.
Plus, it helps you make necessary changes before they have a chance to become bigger problems down the line.
So far, we've seen that Figma can be used to build wireframes and mockups. But did you know this tool can be your go-to for interactive prototyping too?
In this video, Sabrina Gonzales shows how to create a project demo in Figma, so you can make those little fixes before diving further into development.
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....
WellSaid Labs: www.wellsaidla...
Descript: www.descript.c...
Jasper: jasper.ai/?fpr...
**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:32 What is a Prototype?
2:32 Why Build a Prototype?
4:53 The ID Process
6:07 Prototype Overview
6:59 Button Interactivity
11:33 Smart Animation
13:16 Push Animation
14:20 Preview the Flow State
15:39 Time for Feedback!
Пікірлер: 12
Looking for guidance on your journey to become an instructional designer? Download the free Become an ID Checklist here: www.devlinpeck.com/become-an-id-checklist
I watched all 5 videos in this series. LOVE Sabrina's step-by-step demos. She has great eyes for design and attention to detail. I have learned a lot from her. In the next video (please keep growing this series), I hope to see how she transfers the prototypes from Figma to Articulate Storyline to produce a real interactive eLearning product or scene. Thank you so much for developing these tutorials and sharing them on KZread!
@DevlinPeckYT
Ай бұрын
Glad you like them! Sabrina is awesome :D Thanks for watching
Interesting. A few questions: 1. Where were the prototype (slides) created? Seems like Vyond? 2. Once you get the Ok from SMEs and Stakeholders, it seems like it would be almost done? Just complete everything in the authoring tool you developed the slides? Correct?? Thanks
@DevlinPeckYT
6 ай бұрын
Great questions! Sabrina designed the visuals in Figma with graphics sourced from freepik.com, which she does in this video: kzread.info/dash/bejne/iIJs2beThNmWfdo.html And yes! You can get feedback from stakeholders directly in Figma, then off to an authoring tool like Storyline to develop the project fully. Thanks for watching!
@PreetiSharma-xh1ob
6 ай бұрын
Informative, thank you so much ❤
Which is better Figma OR Vyond? I am really confused. I am new to ID and would appreciate the explanation.
@DevlinPeckYT
5 ай бұрын
There is a lot of software out there and it can definitely feel overwhelming at first! Figma is good for prototyping when you're in the early stages of design/development, whereas Vyond is great for developing professional looking animations later down the line. You can learn either one, but they're typically used at different stages in the process.
@lovelyjain6306
5 ай бұрын
Thank you Devlin. Appreciate the response. Since I am new to ID, I really feel overwhelmed. I think for the time being i would focus on figma as Vyond seems really advanced to me as a beginner.@@DevlinPeckYT
Thanks for this video. A quick quesiton: is it possible from Figma exporting the prototype to a LMS package? (cmi5, xAPI, SCORM, AICC)
@DevlinPeckYT
6 ай бұрын
Glad you liked it! As far as I know Figma doesn't have that function built in. I typically export the graphics separately and import them into Storyline.
@user-bw6zy4fp8p
5 ай бұрын
I've been working through all of Sabrina's videos on Figma, as well as some of your other Storyline ones. I've completed the prototype and am ready to begin developing the final product. Can you do a video on some tips and tricks to go from Figma to Storyline effectively and efficiently?@@DevlinPeckYT