What's new in Trio
Every update, improvement, and new feature — documented as it ships. Follow along as Trio evolves with new capabilities, performance upgrades, and expanded framework support.
Improvement: 105 Components — shadcn v4 & AlignUI
More components, richer designs. shadcn/ui upgraded to the latest v4, AlignUI expanded with new components. With 105 ready-to-use component specs, say "build a dashboard" and every detail is created correctly.
- shadcn/ui: 32 → 56 components — Sidebar, Breadcrumb, Chart, Carousel, Sonner, and more
- AlignUI: 41 → 49 components — Kanban, Timeline, File Upload, and more
- Material Design 3 removed — shadcn and AlignUI continue at production quality
Improvement: More Accurate, Complete Designs
AI now works more consistently — designs don't get cut short, colors are applied correctly. Color and spacing errors when a design system is active have been resolved. The AI rule engine was reorganized — conflicting instructions cleaned up, priorities clarified. Result: More predictable, higher quality output on every prompt.
- DS colors now applied correctly — broken token references fixed
- Unlimited design elements per prompt on all plans — even a simple login page is now fully rendered
- AI design rules streamlined — fewer conflicts, more consistent results
- Daily prompt quotas unchanged: Free 10, Pro 200, Team 500, Enterprise unlimited
New feature: Design System Health Report
How healthy is your design system? Find out with a single command. Trio can now analyze the design system in your Figma file and give it a health score from 0 to 100. Token naming, collection structure, component coverage, consistency — everything is reported.
- 6-category evaluation: Naming, token architecture, component metadata, consistency, coverage, organization
- DS summary view: How many variables, how many styles, which collections
- DS parity check: Compare your Figma tokens against the DS spec (Team+)
- Component documentation: Auto-generate Markdown docs for selected components
New feature: Comments & Notes
Leave comments directly on your designs — communicate with your team. Tell the AI "add a note to this button" and it will attach a comment to the Figma node with the author name. You can also read or delete existing comments.
Update spacing
Check contrast
Add hover state
- Node-level commenting — author name automatically included
- Read and list existing comments
- Delete and clear comments
New feature: Bulk Variable Operations
Create 100 variables in a single call — 10x faster token management. In large design systems, creating dozens of color, spacing, and radius tokens one by one was slow. Now you can create or update up to 100 variables with a single command.
- Create 1–100 variables in a single call
- Batch update: Apply name, value, and description changes all at once
- Add new modes: Custom mode support beyond Light/Dark
- Collection deletion and mode renaming
New feature: Change Tracking
What changed in your Figma file? Let the AI tell you. Trio can now track recent changes in your Figma file — which nodes were created, deleted, or modified. Ideal for design review and QA workflows.
- Document change history: Creation, deletion, and property changes
- Console log access: Read error and debug messages from the plugin side
New feature: Component Automation
Auto-arrange component variants. After creating a component set, automatically arrange all variants into a grid. No more manual sorting one by one.
- All variants in a component set automatically arranged in a grid layout
- Component creation and instance placement now support variant overrides
Improvement: Advanced Code Extraction
Convert multiple frames to code in one go. Code Mode can now analyze multiple frames simultaneously. CSS output is more accurate, SVG export support added, and smart compression ensures no detail is lost in large designs.
- Multi-frame extraction: Convert multiple frames to code in a single prompt
- SVG export: Use icons and illustrations as inline SVG in code
- Node CSS: Instantly view the computed CSS of a single node
- Smart compression: Auto-summarization for 100KB+ responses — works even on large designs
New feature: Plugin Code Execution
Access the Figma Plugin API directly — unlimited flexibility. On Team and above plans, the AI can execute Figma Plugin API code directly. Go beyond Trio's standard tools and access the full power of Figma.
- Full access to the Figma Plugin API
- Complex automations, batch operations, and custom scripts
- 30-second secure sandbox — your file is protected
Improvement: Plugin Experience Improvements
Smoother onboarding, more accurate information.
- Plugin no longer repeats onboarding on every launch — complete it once, never see it again
- Usage counter (e.g. 3/10) shows the correct value immediately on sign-in
- Status indicator improved: Shows "Thinking..." when thinking mode is on, "Planning..." when off
New feature: Account & Subscription System
Sign in, choose your tier, and start designing. Trio now works with your personal account. Sign in with email or magic link, choose the right plan, and get the same experience across all your devices.
- Email and magic link sign-in
- 4 subscription tiers: Free, Pro ($19/mo), Team ($49/user/mo), Enterprise
- Daily usage tracking: Separate prompt quota per mode
- Concurrent session control: Multi-device support
- Auto session renewal — no need to sign in again
New feature: One-Command Setup
npm install -g trio-ai2design && trio — nothing else needed. Trio now installs with a single terminal command. macOS, Linux, and Windows support. Node.js check, dependency management, and Claude Code connection verification are automatic.
- Ready-to-go launch scripts for macOS/Linux and Windows
- Automatic environment check and dependency verification
- Claude Code CLI connection test included
Improvement: Code Mode Quality Boost
Cleaner, more accurate, more usable code output.
- Deeper design tree extraction — nested frames read correctly
- Stronger Figma layout → CSS mapping rules
- Improved smart component splitting: Repeated elements auto-convert to components
- DS-compliant code generation: Correct class/prop output based on shadcn and AlignUI specs
New feature: Material Design 3 Support
Google's Material Design 3 system, ready with 27 component specs.
- 27 components: Button, Card, Checkbox, Dialog, Input, Tabs, Toast, Tooltip, and more
- MD3 color system: Primary, secondary, tertiary, surface, and on-surface tokens
- MD3 typography: Roboto font family, full type scale
- MD3 elevation and spacing rules
New feature: Auto Color Binding
Colors used by AI are automatically bound to Figma variables. One of Trio's most powerful features. When Claude uses a color, the system finds and binds the matching design token. Dark mode works with zero effort.
- Hex color → auto-match to nearest DS token
- Create all DS colors and paint styles in one call
- Light and dark mode tokens supported simultaneously
- Smart caching for performance
Improvement: Design System Updates
shadcn/ui and AlignUI component quality elevated to production level.
- shadcn/ui: All 32 components with variant, size, anatomy, state, and Figma build rules completed
- AlignUI: Updated with official color palette — alpha, social, and stable tokens added
- Full DS rule compliance enforced — every component built to spec
Improvement: Performance Upgrades
Faster responses, more stable connections.
- Font loading and variable creation accelerated
- DS color and shadow tokens applied more efficiently
- Queue management added for concurrent prompt submissions
New feature: Framework Cover Images
Visual cards for 9 frameworks and preference memory.
- Cover image for each framework: React, Next.js, Vue, React Native, SwiftUI, Flutter, HTML+CSS, HTML+Tailwind, CSS Modules
- Last used framework automatically remembered
- Quick selection via cover image grid
New feature: Code Mode
Generate production-ready code from your Figma designs in 9 different frameworks. Trio's third mode. Reads all layers, colors, typography, and layout of the selected frame — generates usable code in your preferred framework. Doesn't modify anything in Figma, only reads.
- 9 frameworks: React+Tailwind, Next.js, Vue.js, React Native, SwiftUI, Flutter/Dart, HTML+CSS, HTML+Tailwind, React+CSS Modules
- Deep design tree reading — all nested layers included
- Auto-layout → Flexbox automatic mapping
- All visual properties reflected in code: color, border, shadow, radius
- Repeated elements auto-split into components
- Real-time code stream — see output piece by piece
New feature: Prototype Mode
Create Figma prototype connections with natural language. Trio's second mode. Say "navigate to dashboard on login button click" — AI finds source and target nodes, creates native Figma prototype connections.
- 8 triggers: Click, hover, press, drag, timeout, and more
- 8 transition effects: Dissolve, Smart Animate, Push, Slide, Move, and more
- 7 easing curves: Gentle, quick, bouncy, and more
- 8 navigation types: Navigate, overlay, swap, scroll, back, open URL
- 4 direction support: Left, right, up, down
- View and remove existing connections
- Auto-find source/target nodes by scanning canvas
- Read-only safety: Doesn't touch design, only creates connections
New feature: AlignUI Design System
Modern, rich AlignUI design system added with 41 components.
- 41 components: Accordion, Alert, Avatar, Badge, Button, Card, Checkbox, Data Table, Drawer, Dropdown, Input, Modal, Pagination, Progress, Select, Switch, Tabs, Toast, Tooltip, and more
- Semantic colors: Full palette for light and dark mode
- Typography, spacing, radius, and shadow tokens
- DS colors automatically mapped to Figma styles
New feature: Stop Button
Stop the AI response at any time.
- Cancel the current prompt instantly with a single click
- Don't waste time on long-running tasks
Improvement: Smart Placement
New frames no longer overlap existing designs.
- Newly created frames automatically placed to the right of existing frames
- All frames on the canvas scanned to prevent overlap
New feature: Icon Libraries
5,165 icons with natural language search and automatic color matching. Type "search icon", find the best match, place it in Figma with your design system's color. No external plugin or library needed.
- Lucide: 1,936 icons — clean outline style
- Remix Icon: 3,229 icons — line and fill variants
- Natural language search: Find by keywords like "arrow", "settings", "notification"
- Smart ranking: Most relevant results on top
- Auto color matching: Icon color adjusted to your DS token
- Placed as real vectors in Figma — scalable, editable
- Cover image selection modal
New feature: shadcn/ui Design System
Tailwind-based shadcn/ui design system, added with 32 full component specs. Trio's first design system. Each component has defined variant, size, anatomy, state, and Figma-specific build rules.
- 32 components: Accordion, Alert, Avatar, Badge, Button, Card, Checkbox, Dialog, Drawer, Dropdown, Input, Navigation, Pagination, Progress, Select, Switch, Table, Tabs, Toast, Tooltip, and more
- 14 semantic colors: Light and dark mode support
- Inter typography, 4px spacing unit, 6 radius and 2 shadow tokens
- Figma-specific rules: "Inter font, 36px button height, 8px radius, 1px border over shadow"
New feature: Variable & Style System
Light/dark mode support, paint styles, and automatic style application.
- Variable collection creation (e.g., "Colors" collection)
- Multi-mode variable support: Light and dark values in one variable
- Bind variables to any node property (fill, stroke, padding, size)
- Paint style and text style creation
- Dark/light mode switch: Toggle modes with variable collections
New feature: Design with Images
Send a reference image, let AI design accordingly.
- Upload, paste, or drag-and-drop images
- Send text + image together: "Build this screen in Figma" + screenshot
- AI visual understanding for reference-based design
Improvement: 48 Design Tools
From frames to gradients, icons to components — create everything with 67 tools.
- Create: Frame, text, rectangle, ellipse, line, polygon, SVG import, image from URL
- Component: Create components and place instances
- Layout: Auto-layout (horizontal/vertical, gap, padding) and sizing modes (fixed, hug, fill)
- Style: Color, gradient, stroke, corner radius, shadow, blur, opacity
- Actions: Move, copy, delete, group, rename
- Query: Read selection, page structure, node properties, node search, screenshot
- Variable: Collection, variable, binding, paint style, text style
- Icon: Search and placement
- Design System: DS list, tokens, component specs
New feature: Smart Design Rules
AI doesn't design randomly — it follows 10 core rules. Trio's Design Mode works with 10 unbreakable rules: 8px grid, semantic naming, auto-layout requirement, DS token usage, and more. Result: Consistent, organized, production-ready Figma files.
New feature: First Release
Trio is born. The beginning of designing with Claude AI from inside Figma.
- Figma plugin interface: Chat-based, real-time streaming
- 3 AI model support: Haiku 4.5 (fast), Sonnet 4.6 (balanced), Opus 4.6 (powerful)
- Thinking mode: Disabled, enabled, or adaptive
- First design tools: Frame, text, shape creation, auto-layout, style commands
- Auto viewport zoom: Instant focus on the created design
- Smart font system: Automatically picks the closest alternative if the requested font is unavailable