SageOx + Figma
Design decisions happen in Figma — component rationale, spacing tradeoffs, accessibility choices, interaction patterns. But that context stays locked in someone's head or buried in comment threads. This cookbook turns Figma design walkthroughs into structured knowledge your AI coworkers can reference when implementing UI.
What you need
- SageOx CLI installed (
ox) - A connected repo (
ox init) - Screen recordings of Figma design sessions (Loom, Cap, or local recordings)
The workflow
1. Record your Figma walkthrough
Open your Figma file and start a screen recording. Walk through the design while narrating your decisions:
- Why you chose this layout over alternatives
- How components relate to existing patterns
- What edge cases the design handles (empty states, error states, responsive breakpoints)
Keep recordings under 10 minutes. If a design review runs longer, split by feature area.
2. Import the recording
Grab the recording URL (or local file) and import it:
SageOx transcribes the narration, extracts keyframes of the Figma screens, and commits structured artifacts to your Team Context. Processing takes 1–3 minutes.
3. Your AI coworker implements with context
When an engineer (or their AI coworker) picks up the implementation, the design walkthrough is already in context. Instead of interpreting a static Figma link, the AI coworker knows:
- The spacing rationale you narrated
- Which components you pointed at and why
- The edge cases you called out on screen
- How this design relates to existing patterns
Before SageOx: "Why is this card 16px padding instead of 24px?" → open Figma, search comments, ping the designer.
After SageOx: "Why is this card 16px padding instead of 24px?" → your AI coworker cites the walkthrough where you explained the density requirements for data-heavy dashboards.
Recipes
Design review recordings
Record your design review sessions — the back-and-forth is where the real decisions happen.
The transcript captures both the designer's rationale and the engineer's implementation questions, creating a complete decision record.
Component documentation walkthroughs
When you create a new component in Figma, record a 2-minute walkthrough of its variants, states, and usage guidelines:
This is especially valuable for components with complex state (loading, error, empty, partial) that are hard to convey in a static Figma frame.
Narrate your design system decisions
Walk through your design system changes and explain the reasoning:
- "We're moving from 8px to 6px grid because..."
- "This color scale replaces the old one because..."
- "The new elevation system works like..."
These recordings become the institutional memory for your design system — when someone asks "why is our primary green and not blue?", the answer exists in context.
Tips for better Figma recordings
- Zoom in on the details. SageOx extracts keyframes — close-ups of spacing, color tokens, and component anatomy capture better than full-canvas shots.
- Name your layers. When you hover or click, visible layer names in Figma give the transcript anchors that link to implementation.
- Show the before and after. If you're redesigning, briefly show what exists today before walking through the new design.
- Call out responsive behavior. Resize the frame on camera — "at 768px, these cards stack to a single column because..."
Build the habit
The highest-value pattern: record a walkthrough every time you hand off a design. The handoff recording replaces the sync meeting, outlives the Slack thread, and gives every future engineer (human or AI) the full context of your design intent.
Within a month, your Team Context has a visual history of why the UI looks the way it does — not just the final pixels, but the reasoning behind every tradeoff.
What's next
- Video import reference — all import options, formats, and flags
- SageOx + Loom — the complete Loom import workflow
- SageOx + Claude Code — how your AI coworker uses imported recordings during implementation