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

Usage Guide

Everything you can do with Trio in Figma — every feature, example prompts, and tips to get the most out of your workflow.

67 AI tools · 3 modes · 9 frameworks
Start Reading
OVERVIEW

How It Works

You write a prompt
Trio Server
Claude AI
Figma Plugin
Design appears on canvas
1

Run the trio command in your terminal

2

Open the Trio plugin in Figma

3

Describe what you want in natural language

4

AI creates the design directly in your Figma file

Trio operates in three distinct modes. Each mode handles a different task and maintains its own prompt history.

CAPABILITIES

Three Modes

Design Mode

Create and edit designs in Figma

"Create a login page"

67 tools

Prototype Mode

Add transitions and animations between designs

"When login button is clicked, navigate to dashboard"

5 tools

Code Mode

Generate production-ready code from Figma designs

"Export this screen as React + Tailwind"

6 tools
DESIGN MODE

Create anything in Figma

Design Mode is Trio's most powerful mode. Build anything with 67 AI tools — from simple shapes to full design systems.

PROTOTYPE MODE

Wire interactions & flows

Add click, hover, and transition animations between your designs. Prototype Mode doesn't touch the design — it only creates connections.

Supported Triggers

ON_CLICKClick/tap
ON_HOVERHover (reverts on leave)
ON_PRESSPress and hold (reverts)
ON_DRAGDrag gesture
AFTER_TIMEOUTTimer (ms)
MOUSE_ENTERMouse enter (persistent)
MOUSE_LEAVEMouse leave (persistent)
ON_KEY_DOWNKeyboard key

Transition Effects

DISSOLVESmooth fade transition
SMART_ANIMATESmart animate
PUSHPush (left/right)
SLIDE_IN / SLIDE_OUTSlide in/out
MOVE_IN / MOVE_OUTMove in/out
SCROLL_ANIMATEScroll animation
CODE MODE

Design to code in 9 frameworks

Code Mode converts your Figma designs into production-ready code. It reads the design without modifying it.

Supported Frameworks

FrameworkDescriptionExample Prompt
React + TailwindDefault, most popular"Export this screen"
Next.jsApp Router, layout.tsx + page.tsx"Export as Next.js"
HTML + TailwindUtility-first, no framework"Export as HTML + Tailwind"
HTML + CSSVanilla, semantic"Export as plain HTML + CSS"
React + CSS ModulesComponent-scoped CSS"Export with CSS Modules"
React NativeMobile apps"Export as React Native"
Vue.jsComposition API"Export as Vue.js"
SwiftUIiOS native"Export as SwiftUI"
Flutter / DartCross-platform mobile"Export as Flutter"
VISION

Design from images

Send a reference image and let AI design based on it. (Pro+)

How to use

  1. 1Click the attachment icon in the plugin
  2. 2Select an image or paste one (Ctrl+V)
  3. 3Send it with your prompt

“[image attached] Recreate this screen in Figma”

→ Analyzes the image and recreates the layout, colors, typography, and elements.

“[image attached] Create a similar page but with a blue theme”

→ Takes inspiration from the reference image and reinterprets with the requested changes.

“[image attached] Turn this wireframe into a detailed design”

→ Converts a lo-fi wireframe into a hi-fi design.

PlanAttachmentMax SizeMax Count
FreeNo——
ProYes10 MB5
TeamYes25 MB10
EnterpriseYes50 MB20
PLANS

Plan Comparison

FeatureFreeProTeamEnterprise
Design Mode10/day200/day500/dayUnlimited
Prototype Mode50/day200/dayUnlimited
Code Mode50/day200/dayUnlimited
AI ModelHaikuSonnet, HaikuOpus, Sonnet, HaikuAll
Thinking Mode
Image Attachment5 images, 10MB10 images, 25MB20 images, 50MB
Design Systemshadcnshadcn, AlignUIAllAll
Icon PackLucideLucide, RemixAllAll
Prompt Length500 chars2,0005,00010,000
Concurrent Sessions1310Unlimited
DS Health Report
DS Parity Check
Batch Variables
Comments & Notes
Change Tracking
Component Editing
Plugin Code
Screenshots/Day3UnlimitedUnlimitedUnlimited
INTERFACE

Plugin UI Guide

Top Bar

  • Trio logo — connection status indicator (green: connected, red: error, orange: processing, gray: disconnected)
  • Mode tabs — Design / Prototype / Code (locked modes show a lock icon)
  • Menu button — DS selection, icon pack, framework, plan management, team, links
  • Settings button — port config, account info, update check

Chat Area

  • Message history (user / assistant / system messages)
  • Quick suggestion pills (different suggestions per mode)
  • Auto-scroll to latest message

Input Area

  • Text input field (placeholder changes per mode)
  • Image attachment button
  • Send / Stop button
  • Character counter
  • Model selector (Haiku / Sonnet / Opus)
  • Thinking mode button
  • Active selections (DS, icon pack, framework pills)

Keyboard Shortcuts

  • Enter — Send message
  • Shift + Enter — New line
BEST PRACTICES

Tips & Tricks

General Tips

  1. 1Be specific — instead of "Create a page", write "Create a 390px mobile login page with email and password fields, and a Google sign-in button".
  2. 2Use a Design System — when a DS is active, AI automatically applies correct colors, typography, spacing, and component rules.
  3. 3Work step by step — finish one screen, review it, then move to the next.
  4. 4Build on existing designs — prompts like "Add a hero section below the existing Header" help AI recognize your current layout.
  5. 5Select an icon pack — the matching icon pack is auto-suggested per DS (shadcn → Lucide, AlignUI → Remix).

Design Mode Tips

  1. 1For complex screens, describe the structure first, then add details.
  2. 2For consistency, pick a design system and use the same one across all screens.
  3. 3For dark mode, say "Create the dark mode version" — variables bind automatically.

Prototype Mode Tips

  1. 1Define flows — "Set up Login → Dashboard → Profile → Settings flow".
  2. 2Add micro-interactions — "Add hover effects to all buttons".
  3. 3Build modal flows — "Filter button → filter panel (bottom overlay)".

Code Mode Tips

  1. 1Select a frame first — always select a frame in Figma before using Code Mode.
  2. 2Specify framework — add "with React + Tailwind" to your prompt.
  3. 3Export multiple frames — say "Export all screens together" and shared components are extracted automatically.
REFERENCE

Tool Summary

67 AI tools powering every interaction.

CategoryTools
Creation (frame, text, shape, image)8
Styles & effects5
Layout (auto-layout, sizing)2
Node operations (move, copy, delete)6
Components3
Variables & tokens11
Paint/text styles4
Design systems8
Querying & inspection5
Screenshots1
Icons2
Comments3
Monitoring2
Prototype3
Code export3
Power tool1
Total67