Introducing Trio Companion Server — One command to start: npm install -g trio-ai2design && trio Get started
Prototype Mode

Turn prompts into
interactive Figma
prototypes

Describe any interaction in plain text. Trio's AI reads your canvas, finds the source and destination frames, and wires prototype connections with the right trigger, transition, and easing — all inside Figma's native prototype system.

From prompt to
interactive prototype
in seconds

Five steps from natural language to fully wired Figma prototype interactions. 8 triggers, 8 transitions, zero manual noodle-dragging.

How it works
Prototype Mode

0 / 10,000
01

Describe your interaction

Tell Trio what should happen in plain text — “When the user clicks Login, navigate to Dashboard with a slide transition.” Single-screen interactions like hover states or multi-screen navigation flows, both work from one sentence.

8 focused tools,
one intelligent agent

Prototype Mode doesn't draw or modify anything — it reads your canvas and wires native Figma interactions through 8 purpose-built tools.

Set Interaction
Remove Interactions
Read Interactions
8 tools across 2 categories — ⚠️ Design & creation tools are disabled in Prototype Mode

8 strict rules that guarantee
reliable prototypes

Every interaction runs under strict constraints. No broken links. No missing destinations. No guesswork.

Only prototype tools — no design modifications
Page structure scanned before every connection
Source node verified by name, not guessed
Destination frame confirmed before wiring
Only prototype tools — no design modifications
Page structure scanned before every connection
Source node verified by name, not guessed
Destination frame confirmed before wiring
Native Figma interactions, not external links
8 trigger types — click, hover, drag, key press, timeout
8 transition effects — dissolve, smart animate, push, slide
7 easing curves — bouncy, gentle, quick, ease-in-out
Native Figma interactions, not external links
8 trigger types — click, hover, drag, key press, timeout
8 transition effects — dissolve, smart animate, push, slide
7 easing curves — bouncy, gentle, quick, ease-in-out
8 navigation types — navigate, overlay, swap, scroll, back
Duration and direction always explicit, never default
Read-only on design — cannot move, delete, or modify any element
Every connection verified before marking complete
8 navigation types — navigate, overlay, swap, scroll, back
Duration and direction always explicit, never default
Read-only on design — cannot move, delete, or modify any element
Every connection verified before marking complete

Your prototype logic.
AI-native.

Describe any interaction in plain text — Trio reads your canvas, resolves source and destination nodes, and wires native Figma prototype connections with the exact trigger, transition, easing, and timing you need.

Trigger mapping
1.

Trigger System

8 trigger types give your prototypes real interaction depth — not just click. Hover states, drag gestures, key press shortcuts, timed auto-transitions, mouse enter/leave zones. Describe the behavior in natural language, and Trio maps it to the exact Figma trigger.

PromptFigma Trigger
"When user hovers the card"ON_HOVER
"After 2 seconds"AFTER_TIMEOUT (2000ms)
"When user drags the handle"ON_DRAG
"Press Enter to submit"ON_KEY_DOWN
"When mouse enters the area"MOUSE_ENTER
"Click the button"ON_CLICK
"Long press the icon"ON_PRESS
"When cursor leaves the menu"MOUSE_LEAVE
Visual effects
2.

Transition Effects

8 transition effects with full control over easing and direction. Smart Animate matches layers between frames for seamless morphing. Dissolve for subtle fades. Push and Slide for mobile navigation patterns. Every transition includes explicit duration and one of 7 easing curves.

Transition·Best for
SMART_ANIMATEShared-layer morphing
DISSOLVESubtle state changes
PUSHMobile screen navigation
SLIDE_IN / OUTDrawer, panel reveals
MOVE_IN / OUTModal, overlay entrances
SCROLL_ANIMATEScroll-triggered effects
Easing:EASE_IN_AND_OUTEASE_OUTEASE_INLINEARBOUNCYGENTLEQUICK
Direction:LEFTRIGHTTOPBOTTOM
Navigation routing
3.

Navigation Types

8 navigation types cover every prototype pattern — from simple screen-to-screen navigation to overlays, component swaps, scroll anchors, and even external URLs. The AI selects the right type based on your description: "show a modal" becomes OVERLAY, "go back" becomes BACK, "open docs" becomes URL.

DescriptionNavigation Type
"Navigate to Dashboard"NAVIGATE
"Show confirmation modal"OVERLAY
"Swap to active tab state"SWAP
"Scroll to pricing section"SCROLL_TO
"Change to hover variant"CHANGE_TO
"Go back to previous screen"BACK
"Close the popup"CLOSE
"Open external documentation"URL
Smart resolution
4.

Canvas Intelligence

Before wiring any connection, the AI scans your entire page structure with get_page_structure(), locates the exact source and destination with find_nodes(), and reads existing interactions with get_prototype_interactions() to avoid conflicts. It doesn’t guess node IDs — it resolves them by name from your actual canvas.

Step 1:
get_page_structure()
→ Found: 6 frames, 47 nodes
Step 2:
find_nodes("Login Button")
→ node_4a2f (in LoginScreen)
Step 3:
find_nodes("Dashboard")
→ frame_8b1c (top-level frame)
Step 4:
get_prototype_interactions(node_4a2f)
→ No existing interactions
Step 5:
set_prototype_interaction({ source → destination ON_CLICK → NAVIGATE SMART_ANIMATE, 300ms EASE_IN_AND_OUT })
→ ✓ Connected

Is Trio Right For You?

60 seconds to know if we're a fit. Tick what's true:

0 — 2

Not Yet

Your current prototype workflow probably works fine at small scale. Save this page — when your project grows past 10 screens and interactions pile up, you’ll feel the friction. Trio will be here.

3 — 5

Good Fit

You’re spending real time on prototype wiring that could go to design thinking. Prototype Mode is available on Pro tier — 50 prompts/day, 8 triggers, 8 transitions, full interaction control. One prompt per connection, no noodle-dragging.

6 — 8

Perfect Match

Every checkbox you ticked is prototype friction that Trio eliminates. Canvas scanning, node resolution by name, 8 triggers × 8 transitions × 7 easings × 8 navigations — all from natural language. Your team will go from "we'll prototype later" to "it's already wired."

F.A.Q

Frequently Asked
Questions.

Get answers to commonly asked questions.