OnboardFlow
Onboarding is one of the most impactful things you can design. Structured tooltip walkthroughs increase user retention by up to 50%. Without them, 98% of users churn within two weeks of signing up.
Every product designer knows this. And yet, onboarding consistently loses prioritization battles in sprint planning.
Not because it isn't important but because it's too expensive to prototype.
WHAT I FOUND
The real problem isn't design thinking. It's design labor.
Building a single tooltip walkthrough in Figma means:
Designing the tooltip itself
Positioning tooltips relative to each target element
Wiring prototype connections between every frame
For a 5-step, 3-screen walkthrough, that's roughly 15 frames, 60+ prototype connections, and hours of repetitive work, just to show stakeholders a concept.
The result? Designers either skip onboarding entirely or deliver static annotated mockups that don't communicate the actual experience.
THE OPPORTUNITY
What if you could generate an interactive walkthrough prototype in under a minute?
OnboardFlow is a Figma plugin that collapses the entire walkthrough prototyping process into three actions:
Select the elements you want to highlight
Write the tooltip copy for each step
Generate and plugin builds the full prototype
No duplicating frames. No manual wiring. No overlay arithmetic. The output is native Figma prototype frames with real interactions. Press Play and walk through it immediately.
DESIGN CHALLENGES
Building a plugin that feels like a design tool,
not a code tool
The technical capability was straightforward: Figma's Plugin API can create frames, clone nodes, and wire prototype connections programmatically. The design challenge was making this feel intuitive for designers who've never touched a plugin before. I identified four core UX challenges:
Which screen does this element belong to?
Figma's selection API doesn't scope to frames. When a designer clicks an element, the plugin has no built-in way to know which screen it lives on.
Dark tooltip on dark background = invisible.
A single color scheme can't work everywhere. The plugin needs to detect what's behind each tooltip and adapt.
Onboarding doesn't live on one screen.
Real flows cross screens — Dashboard → Settings → Profile. Steps need global ordering and cross-screen prototype wiring.
Designers don't trust locked layers.
If the output is flattened or grouped, nobody will use it. Every generated element needs to be a real, named, movable Figma layer.
Four interventions,
each mapped to a challenge
PROBLEM 1
Screen-scoped selection
DESIGN DECISION 1
Select your screen first, then pick elements inside it
Every element selection is scoped to the active screen. No cross-frame confusion.
PROBLEM 2
Auto-contrast tooltips
DESIGN DECISION 2
Detect background luminance and flip tooltip colors automatically
Light background → dark tooltip. Dark background → light tooltip. Always readable by default.
PROBLEM 3
Unified cross-screen generation
DESIGN DECISION 3
One walkthrough, multiple screens, fully wired.
Steps are ordered globally. The plugin generates one frame per step, clones the correct screen as background, and wires all navigation including cross-screen transitions.
KEY TAKEAWAY
The biggest insight from this project wasn't about building a plugin.
It was about understanding what designers actually skip and why.
Onboarding isn't deprioritized because teams don't believe in it. It's deprioritized because the cost of prototyping it is disproportionate to every other design task in a sprint.
OnboardFlow doesn't change what designers do. It removes the reason they don't.
