Project Overview
As a contract visual designer for Microsoft, I was tasked with building a clear, visually guided onboarding toolkit for Xbox Support team members learning Figma. This project—internally nicknamed “Figma Fleet”—focused on practical UX onboarding using annotated screenshots, shortcut overlays, and structured flows within a shared Figma workspace.
The toolkit empowers support leads and content creators to understand frame hierarchy, edit flows, and contribute lightweight updates to shared files. It blends system clarity with just enough visual charm to keep engagement high.
Visual Highlights
Figma project dashboard
Layer naming walkthrough
Frame & layout logic
Component system overview
Feedback mode demo
Prototype simulation
Keyboard shortcuts map
Final tutorial output
Behind the Scenes
This project required a blend of visual clarity and tool fluency. I began by mapping the most common questions Xbox Support teams asked about Figma—from file access to layer control. I then staged a multi-screen walkthrough, capturing each phase with annotation layers and a consistent visual style.
The process also included creating a keyboard overlay system to teach shortcuts visually, helping speed up team fluency in live-edit scenarios.
Tools & Techniques
- Figma (desktop + web)
- UI Annotation & Markup Design
- Snagit, Skitch & Screenshot Workflows
- Custom Shortcut Mapping & Overlay UX
- Component Systems & Library Hygiene
- WCAG Contrast & Accessibility Checks
- Visual Documentation for Training
Results & Impact
10+
Annotated walkthroughs created
12
Team members trained
40%
Faster onboarding time
Key Learnings
Visual Learning First
Figma adoption is faster when examples are practical, repeatable, and visual.
Component Discipline
Even small teams benefit from shared structure and consistent naming.
Support-Centric Design
Design training should reflect the real tools and constraints of the team.