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

Turn Figma designs into production-ready code

Select any frame on your canvas. Trio reads the layer hierarchy, maps components to your chosen framework, and generates clean, responsive code — React, Next.js, Vue, SwiftUI, or Flutter.

From Figma frame to production code in seconds

Five steps from selected frame to clean, responsive code. 9 frameworks, pixel-perfect output, zero manual rewriting.

How it works
Code Mode
Select a frame...
LoginScreenFrame
DashboardFrame
SettingsFrame
ProfileCardComponent
01

Select your frame

Select any frame on your Figma canvas and choose your target framework — React + Tailwind, Next.js, Vue, React Native, SwiftUI, Flutter, or 3 more options. Trio reads your selection with get_selection() and locks onto the frame.

10 precise tools, one intelligent agent

Code Mode doesn't modify your canvas — it reads the design tree, exports vectors, and generates framework-specific code through 10 read-only tools.

Design Tree Extractor
Node CSS Reader
SVG String Exporter
10 tools across 2 categories — ⚠️ All create, modify, and delete tools are disabled in Code Mode

Strict read-only rules that guarantee clean code

Every extraction runs under strict constraints. No canvas modifications. No guesswork. No incomplete outputs.

Fully read-only — cannot create, move, or delete anything
Design tree extracted to 10 levels deep
CSS properties included for every single node
Layout-to-Flexbox mapping, not approximation
Fully read-only — cannot create, move, or delete anything
Design tree extracted to 10 levels deep
CSS properties included for every single node
Layout-to-Flexbox mapping, not approximation
2+ instances auto-split into separate components
Vectors exported as inline SVGs, not rasterized
Images preserved as img tags with source refs
Code streamed in real-time, not batched
2+ instances auto-split into separate components
Vectors exported as inline SVGs, not rasterized
Images preserved as img tags with source refs
Code streamed in real-time, not batched
9 frameworks — each with idiomatic code patterns
Figma spacing values map to exact utility classes
Fills, strokes, shadows, radius — all mapped to CSS
React default — Tailwind CSS when no framework specified
9 frameworks — each with idiomatic code patterns
Figma spacing values map to exact utility classes
Fills, strokes, shadows, radius — all mapped to CSS
React default — Tailwind CSS when no framework specified

Your design structure. AI-native.

Select any frame — Trio reads the full layer hierarchy, extracts design tokens, maps components to your framework, and generates clean, production-ready code with proper types and responsive classes.

Framework mapping
1.

Framework System

9 framework targets give your designs real production depth — not just HTML. React, Next.js, Vue 3, Nuxt, Svelte, Angular, SwiftUI, Flutter, React Native. Each framework gets idiomatic output — React uses JSX + hooks, Vue uses SFC + Composition API, SwiftUI uses native views.

Framework→Output Format
ReactJSX + Hooks
Next.jsServer Components
Vue 3SFC + Composition
SwiftUINative Views
FlutterWidget Tree
React NativeNative Components
SvelteSvelte Components
AngularTemplates + Services
NuxtAuto-imports + Pages
Token extraction
2.

Design Tokens

Every color, font, spacing value, and shadow in your Figma file gets extracted and mapped to framework-native tokens — Tailwind utility classes, CSS custom properties, SwiftUI Color assets, Flutter ThemeData. No manual translation, no guessing hex codes.

Design Token→Code Token
Fill: #09090btext-foreground
Size: 14px Inter Mediumtext-sm font-medium
Padding: 16px 24pxpx-6 py-4
Radius: 8pxrounded-lg
Gap: 12pxgap-3
Shadow: 0 1px 2pxshadow-sm
Output:TailwindCSS VariablesDesign Tokens
Component mapping
3.

Layer Intelligence

Each Figma layer maps to proper components — auto-layout becomes flex/grid, text nodes map to semantic HTML, icons become SVG imports, frames become proper container components. The AI reads your layer tree and produces a component hierarchy that mirrors your design intent.

Figma Layer→Component
Frame (auto-layout: vertical)<div className='flex flex-col'>
Text: 'Welcome back'<h1>
Rectangle (fill + radius)<div className='bg-... rounded-...'>
Instance: Button<Button />
Vector (SVG)<Icon />
Frame (auto-layout: horizontal)<div className='flex'>
Input<input />
Image fill<img />
Code quality
4.

Clean Output

Every generated file meets production standards: TypeScript types on all props, proper imports with no barrel re-exports, no inline styles, semantic HTML elements, accessible ARIA attributes, responsive breakpoints, and zero magic numbers.

Step 1:
get_selection()
→ Selected: LoginScreen (Frame)
↓
Step 2:
get_node_properties(LoginScreen)
→ Auto-layout: vertical, 5 children
↓
Step 3:
extract_design_tokens()
→ 12 colors, 4 fonts, 8 spacing
↓
Step 4:
generate_code({ framework: 'react', styling: 'tailwind' })
→ 47 lines, TypeScript
↓
Step 5:
verify_output()
→ ✓ Clean, 0 warnings

Is Trio Right For You?

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

0 — 2

Not Yet

Your current design-to-code handoff might be working fine. Bookmark this — when your team scales and you’re rebuilding the same screens across multiple platforms, Trio Code Mode will save you days.

3 — 5

Good Fit

You’re spending real development time recreating UI that already exists in Figma. Code Mode is available on Pro tier — 50 code prompts/day, 9 frameworks, full design tree extraction. One prompt per component, not one hour.

6 — 8

Perfect Match

Every checkbox you ticked is a design-to-code gap that Trio bridges. 10-level tree extraction, deterministic layout mapping, automatic component splitting, 9 framework targets — from the same Figma frame. Your team will stop rewriting designs and start shipping them.

F.A.Q

Frequently Asked Questions.

Get answers to commonly asked questions.