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

To upload design walkthroughs (designers, stakeholders — no CLI needed):

• A SageOx team account
• Screen recordings of Figma design sessions (use Loom, CapCut, or Figma's built-in recording)

To implement with design context (developers):

• SageOx CLI installed (ox) with a connected repo (ox init)
• A coding agent (Claude Code, Codex, etc.)

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. Upload the recording

1. Go to your team's Media section at sageox.ai
2. Click Import and paste the recording URL (Loom, Figma, or CapCut)
3. Or click Upload to drag in a local recording
4. Add a descriptive title like "Dashboard redesign — card layout rationale"

No CLI needed. 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. Upload the recording to your team's Media section when the review wraps.

The transcript captures both the designer's rationale and the engineer's implementation questions, creating a complete decision record. Import these with titles like "Design review — onboarding flow v2".

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. Title these clearly: "Alert banner — variants and usage guidelines".

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.

Anyone on your team can upload recordings through the web — no CLI, no setup. 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

• Upload via web — drag-and-drop upload from the SageOx web interface
• Video Import — all import options and supported formats
• Cap Setup — optimal recording settings
• SageOx + Loom — the complete Loom import workflow
• SageOx + Claude Code — how your AI coworker uses imported recordings