local
Figma Learn
An in-app onboarding and learning system, built inside the tool itself
swipe for role, timeline, tools, and impact
01Context
Figma’s learning resources all live outside Figma.
For MEJO 581, I ran a UX competitive analysis across six sites (including Stripe, Axios, and Are.na) built around a thesis: user-centered design and product-centered design produce genuinely different outcomes, not just different processes. Figma Learn was the follow-through on that thesis.
Figma’s own learning resources like docs, YouTube tutorials, and community files all live outside the tool, forcing beginners onto YouTube, Reddit, and third-party documentation just to understand the basics.
I traced that gap through direct observation: App Team Carolina’s UI/UX Academy, Information Science and MEJO classrooms, Figma Community forums, r/figma, and r/learndesign all showed the same pattern. Self-taught learners couldn’t find a starting point inside the tool itself.
02Opportunity
The best place to learn a tool is inside the tool.
“Knowing where to start... there are so many tools.”
“I don’t know what I can do on Figma.”
How might we help self-taught beginners learn Figma without ever leaving Figma?
03Process
A learning path that feels native to Figma.
- Ran two in-depth interviews (Nina, a MEJO major exploring UX through App Team Carolina, and Aaron, an Information Science major who switched from pre-dental to UX) plus one AI-assisted composite interview to surface patterns across a broader self-taught-learner archetype. Then built personas and a spectrum map across all three.
- Benchmarked against Duolingo (self-paced, gamified progression, but not contextual to a design tool), Codecademy (learn-by-doing, but a separate platform that still requires leaving Figma), and Figma’s own Community (templates and resources, but no structured path, and most users don’t know it exists or how to use it for learning).
- Designed the full skill-track architecture, from the Beginner Track through Foundations, Components & Auto Layout, Prototyping Interactions, and a Capstone, with locked/unlocked progression, a video-plus-live-canvas-practice lesson format, and a badge and profile system to make progress visible.
- Ran three usability testing sessions on the interactive prototype via UserTesting.com.
User Personas
I interviewed two students who had recently committed to the UX field and were trying to gain professional experience for their portfolios. Their pain points as new Figma users overlapped, and that started to build my case for Figma Learn.
Personas for Nina and Aaron, built from the two interviews.
Low-Fidelity Mockups
Once I had the idea, I diverged first, sketching anything that came to mind, before converging on a single system to carry through the prototype.
Low-fidelity sketches of the Learning Hub, lessons, and completion flow.
Iteration
Testing was consistently positive on the concept (one tester called the prototype "very rare" among quality design tools) but surfaced two concrete friction points.
Testers repeatedly lost their way trying to find their progress and badges, so I added a persistent "View Profile" button directly in the Learning Hub instead of relying on sidebar navigation alone.
Testers were also unsure whether they were meant to actively complete tasks or just click through the prototype, so I tightened the interaction wiring between the tutorial, practice, and completion screens so the path forward was never ambiguous.
Before and after: a persistent View Profile button in the Learning Hub.
Prototype
The final prototype was tested with real users on UserTesting.com to round out the designs and validate the full process of adding a feature into an existing app. This was a real test of skills and ideas rooted in what I love to do: teaching and mentoring others. It may not go into full production, but I think it's worth proposing as it would improve accessibility to Figma and give more creatives room to try new things.
04Impact
A 13-screen prototype, validated in three usability tests.
The delivered prototype covers the full arc from onboarding to capstone: a Learning Hub with skill tracks and locked/unlocked states, step-by-step tutorials pairing video with live practice on the real canvas, lesson-completion screens with earned badges (Canvas Navigator, Frame Builder, Type Setter, Constraints Pro, Grid Wizard), a resume flow that picks users back up mid-lesson, a profile page tracking lessons done and time spent, and a capstone that bridges into the Figma Community.
Across three usability testing sessions, feedback on the core premise was consistently positive, and both friction points that testing surfaced were resolved before the design was finalized.
The finished project shipped with full documentation and a LinkedIn post strategy aimed specifically at Figma employees, treating it less like a class assignment and more like a pitch.
05Reflection
Designing inside someone else’s design language.
Figma Learn is the one case study of the three that’s purely conceptual rather than shipped. The real constraint was designing entirely within Figma’s own visual language and component system rather than from a blank canvas. Every screen had to look and behave like it already belonged in the product.
Actually shipping this would take partnership with Figma’s design and education teams, backend work to track real progress across sessions, and usability testing well beyond the three rounds I ran here.