🎨 How Figma Changed My Instructional Design Process
Figma has completely transformed the way I approach instructional design. As someone with a background in illustration, I’ve always relied on sketching and mood boarding to think through creative projects. Figma gave me the ability to bring that same process into my instructional design work—and it’s been a total gamechanger.
🧰 What is Figma?
Figma is a browser-based design and prototyping tool most often used by UI/UX designers. It allows you to:
✅ Create visual layouts and design mockups
✅ Collaborate with teammates in real time
✅ Prototype interactions without coding
Although Figma is often associated with app and website design, it’s also an ideal space for planning out learning experiences. It lets you explore visual ideas quickly, test layout concepts, and get feedback early—before jumping into a course authoring tool.
🎯 Why I Needed a Visual Workflow
I discovered the power of Figma during my internship with Niche Academy. I was frustrated trying to storyboard with plain text docs. As a visual learner, I found it hard to map out layouts and interactivity without seeing them.
Tools like Storyline are powerful, but starting with a blank slide gave me creative paralysis. I needed a space where I could make messy decisions and explore visual ideas, just like I do when I sketch.
✏️ My Figma Workflow: Step-by-Step
1️⃣ Mood Boards & Inspiration Pages
Just like I start my art projects with a Pinterest board, I start instructional projects with a visual inspiration board.
✅ Create a Figma page titled "Mood Board"
✅ Add screenshots, color references, icons, and visual references
✅ Move them around freely like a collage
This helps me find a consistent visual direction and vibe before I ever think about layouts or content.
2️⃣ Build a Style Guide
Next, I design a visual guide to keep the project consistent.
✅ Color palette (primary, secondary, accent)
✅ Fonts and text styles for headings and body copy
✅ Button styles and UI elements
✅ Icon style and spacing rules
📌 Tip: Stick to 3-4 main colors. The constraint helps you stay focused and consistent. I personally keep A Dictionary of Color Combinations on my desk at all times. With a color palette reference or generator, I can simply flip to a page or generate a palette (and save myself the decision fatigue for a later point in the design process).
Here are some other helpful Color Palette resources:
3️⃣ Low-Fidelity Wireframes
This is the equivalent of sketching before painting.
✅ Use rectangles, circles, and text to block out screen layouts
✅ Decide content flow and navigation structure
✅ Test multiple ideas fast without distraction from colors or visuals
This phase is about structure and user flow, not final polish. It’s a perfect way to get early feedback or compare layout options.
4️⃣ High-Fidelity Prototypes
Once I have a direction, I use Figma’s prototyping features to make clickable mockups.
✅ Create fully designed slides and link them together
✅ Simulate navigation, quizzes, or branching scenarios
✅ Share with stakeholders for fast feedback
This allows me to finalize interaction ideas before building in tools like Storyline, saving time and reducing rework.
💸 Why Figma Is Great for Students and Freelancers
As a grad student on a budget, Figma's free plan has been a lifesaver. It lets me:
✅ Make major design decisions before opening paid tools
✅ Spend less time inside expensive software
✅ Avoid creative blocks by staying in a flexible space longer
The result? More intentional designs, fewer revisions, and a faster workflow overall.
🗂️ Asset Organization Tips
Good folder hygiene makes design easier. I organize all visuals in Google Drive:
✅ Main folder per project
✅ Subfolders for icons, photos, video, illustrations
✅ Clear naming conventions
✅ A "Favorites" folder with frequently used assets
📚 Learning Resources
If you’re new to using Figma for instructional design, check out:
📁Devlin Peck’s Figma for Instructional Designers series
📁Figma’s official YouTube channel and tutorials
🧠 Final Thoughts
Figma has helped me bridge the gap between my creative instincts and instructional design structure. It gives me space to explore, refine, and organize—all before development begins.
For visual thinkers, it’s more than a prototyping tool. It’s a creative sandbox where ideas come to life.
💬 Do you use Figma or other visual tools in your learning design process? I’d love to hear how you use it!
