Introducing Trio Companion Server — One command to start: npm install -g trio-ai2design && trio Get started
Trusted by 2,000+ Figma users for seamless design!

Your Figma copilot for design, prototype & code.

npm install -g trio-ai2design && trio

Free tier: 10 prompts/day. No credit card required. Also available on Figma Community.

Design Agent
LIVE
SourceStatus
Claude
Initializing design tokens
progress
Design Results
FIGMA
Result

Welcome Back

Please enter your details to sign in.

Login with Google
hello@ai2.design
Forgot?
••••••••••
Remember me
Sign In

Don't have an account? Register

1 of 10 layers rendering
ReactNext.jsVue.jsReact NativeSwiftUIFlutterHTMLTailwind CSSCSS ModulesClaudeAnthropicVercelFigmashadcn/uiFramerReactNext.jsVue.jsReact NativeSwiftUIFlutterHTMLTailwind CSSCSS ModulesClaudeAnthropicVercelFigmashadcn/uiFramer
Design smarter

Design Mode

Generate pixel-perfect Figma frames from plain text. 67 AI tools handle auto-layout, spacing, color tokens, and component instances. Supports shadcn/ui and AlignUI with automatic variable binding.

Explore Design Mode
FIGMA LAYERS
Auto-layout ✓
Hero Section
Navigation
Logo
Nav Links
Content
Heading
CTA Button
Tokens:
Connect screens

Prototype Mode

Describe flows in plain English — Trio wires interactions automatically. 8 trigger types (click, hover, drag, timeout), 8 transitions (Smart Animate, Dissolve, Push), and full easing control. No manual wiring needed.

Explore Prototype Mode
on click
clickhoverdrag
Smart Animate → 300ms
Ship faster

Code Mode

Select any frame and export production-ready code. React, Next.js, Vue, React Native, SwiftUI, Flutter — 9 frameworks supported. Figma auto-layout maps directly to Flexbox. Real components, not pseudo-code.

Explore Code Mode
React
Vue
Swift
LAYERS
Frame
Header
Title
Body
Button
Selected
OUTPUT
Copy to clipboard

Designed to create.
Built to ship.

0

AI-powered tools

0

Icons ready to use

0

Frameworks supported

Token-bound design

2 built-in design systems with 105 component specs. Colors auto-bind to Figma variables — switch from light to dark mode instantly.

Real Figma layers

Not screenshots. Every frame uses auto-layout, proper spacing, and semantic naming. Edit anything after generation — it's your design.

Prompt to production

Describe a screen in plain text, get a Figma design. Select it, export React, Next.js, Vue, SwiftUI, or Flutter code. One plugin, full pipeline.

TRIO - AI2.DESIGN
Code Mode_

Turn any Figma frame into
production-ready code

Select a frame, pick your framework, and get pixel-perfect components with proper layout mapping — auto-layout becomes Flexbox, fills become Tailwind classes, vectors become inline SVGs. No manual translation needed.

9 Frameworks

React, Next.js, Vue, React Native, SwiftUI, Flutter, HTML+Tailwind, HTML+CSS, CSS Modules

Deep Design Tree Extraction

Extracts the Figma node tree up to 10 levels deep, including full CSS properties

Layout → Flexbox Mapping

Auto-layout direction, gap, padding, and alignment automatically map to flex/grid

Inline SVG Export

Vector and boolean nodes are converted to inline SVGs via export_svg_string

Smart Component Splitting

2+ instances or 3+ similar nodes are automatically split into separate components

Visual Property Mapping

fills→background, strokes→border, effects→box-shadow, cornerRadius→border-radius

Read-Only & Safe

Code mode never creates or modifies anything in Figma — it only reads and generates code

Stream Output

Code chunks are streamed in real-time, no waiting even for large components

// LoginCard.tsx — Generated from Figma frame
export function LoginCard() {
return (
<div className="flex flex-col gap-6 p-8 bg-white rounded-2xl shadow-lg w-[400px]">
<h2 className="text-2xl font-semibold text-gray-900">
Welcome back
</h2>
<input
type="email"
placeholder="Email"
className="px-4 py-3 border border-gray-200 rounded-xl text-sm"
/>
<input
type="password"
placeholder="Password"
className="px-4 py-3 border border-gray-200 rounded-xl text-sm"
/>
<button className="px-6 py-3 bg-indigo-600 text-white rounded-xl font-medium">
Sign In
</button>
</div>
);
}

Design Tree API

extract_design_tree pulls a full CSS-enriched tree for up to 500 nodes

Framework Presets

9 optimized code templates — each framework in its own idiom

NPM Package

npm install -g trio-ai2design && trio, automatic WebSocket bridge

ReactReactNext.jsNext.jsVue.jsVue.jsReact NativeReact NativeSwiftUISwiftUIFlutterFlutterHTMLHTMLTailwind CSSTailwind CSSCSS ModulesCSS Modules

Flexible pricing

Start designing with AI for free. Unlock Prototype,
Code modes and premium design systems as you scale.

Free Plan

Start building with AI-powered design. No card, no commitment.

10 design prompts / day

Pro

Full creative power for designers and developers. All 3 modes unlocked.

200 design + 50 prototype + 50 code prompts / day

Team

Most popular

For design teams scaling fast. Shared workspace, premium everything.

500 design + 200 prototype + 200 code prompts / day

Enterprise

Unlimited everything. Dedicated support. Built for agencies and large teams.

Unlimited prompts across all modes
$0forever
$19/ monthly
Billed yearly
$49/ user / monthly
Billed yearly
Custom
Design Mode only
10 design prompts / day
Unlimited tool calls per prompt
Unlimited max nodes per prompt
500 character prompt limit
1 concurrent session
3 screenshots / day
Haiku 4.5 AI model
shadcn/ui design system (56 components)
Lucide icons (1,936 icons)
Prototype Mode
Code Mode
Image upload
Extended thinking
Design + Prototype + Code — all 3 modes
200 design prompts / day
50 prototype prompts / day
50 code prompts / day
Unlimited tool calls per prompt
Unlimited max nodes per prompt
2,000 character prompt limit
3 concurrent sessions
Unlimited screenshots
Haiku 4.5 + Sonnet 4.6 AI models
shadcn/ui + AlignUI design systems (105 components)
Lucide + Remix icons (5,165 icons)
9 frameworks code export (React, Next.js, Vue, Flutter...)
5 images per prompt (max 10 MB)
Extended thinking mode
Everything in Pro, plus:
500 design prompts / day
200 prototype prompts / day
200 code prompts / day
Unlimited tool calls per prompt
Unlimited max nodes per prompt
5,000 character prompt limit
10 concurrent sessions
Haiku + Sonnet + Opus 4.6 — all AI models
All 2 design systems (shadcn/ui + AlignUI — 105 components)
All icon packs (5,165 icons)
10 images per prompt (max 25 MB)
Team management dashboard
Team usage statistics
Standard support
Everything in Team, plus:
Unlimited design prompts
Unlimited prototype prompts
Unlimited code prompts
Unlimited tool calls per prompt
Unlimited nodes per prompt
10,000 character prompt limit
Unlimited concurrent sessions
All AI models including Opus 4.6
All design systems (105 components)
All icon packs (5,165 icons)
20 images per prompt (max 50 MB)
Extended thinking mode
Priority support
Custom onboarding
SLA guarantee
F.A.Q

Frequently Asked
Questions.

Get answers to commonly asked questions.

Trio Figma Plugin

Claude