Figma AI
Overview
Figma AI is the suite of AI features built into Figma: Figma Make (design-to-code), a canvas-resident Figma agent, and an MCP server that pipes design context into external coding tools — blurring the line between design and implementation.
Key Features
Figma Make (Design → Code)
Turn designs into HTML/CSS/JavaScript, then refine, test, and export without leaving Figma. It connects to a local codebase so you can annotate elements, adjust spacing, swap components on the live interface, and open a PR from inside the design tool. GPT-5.6 is available as the generation model on all plans.
Figma Agent
A canvas-resident agent that generates and remixes designs and automates repetitive work while staying inside your design system's guardrails. You can define custom team skills and workflows, and it can search the web, take external file attachments, and connect to external tools over MCP. Professional+ plans with Full seats; free during beta without consuming credits.
Figma Motion (Open Beta)
A native timeline animation system with keyframes, easing curves, and spring animations, plus 3D transforms and code export — describe the motion and the agent generates a first pass. Available on all plans; Full seats required to publish animated components.
Custom Shaders (Open Beta)
Build natively rendered WebGPU shader effects and fills from prompts. Paid plans, Full seats only.
Code Layers (Closed Beta)
Bring working code onto the canvas as a layer type and convert between code and design layers.
Figma MCP Server
Feed Figma design context directly into agentic coding tools like Cursor, VS Code, Windsurf, and Claude. Agents can also write back to your Figma files using your components, variables, and tokens.
Generative Plugins (Open Beta)
Prompt the agent to build reusable plugins for custom workflows, living inside the file for collaborators. Paid plans only.
Pricing
Seats come in Full / Dev / Collab types, and each plan carries a monthly AI credit allowance (non-Full seats get 500 credits/month across the board).
| Plan | Full seat (monthly, annual billing) | Dev seat | AI credits (Full) |
|---|---|---|---|
| Starter | $0 | — | 150/day, up to 500/mo |
| Professional | $16 | $12 | 3,000/mo |
| Organization | $55 | $25 | 3,500/mo |
| Enterprise | $90 | $35 | 4,250/mo |
Collab seats are $3 on Professional and $5 on Organization/Enterprise. Extra AI credits can be bought as an add-on.
Strengths
- ✅ Figma Make for design-to-code, all the way to a PR
- ✅ MCP server for AI tool integration
- ✅ Agents writing directly to Figma
- ✅ Custom team skills to shape agent behavior
- ✅ Motion and shaders widen what the canvas can express
- ✅ No relearning needed for existing Figma users
Weaknesses
- ❌ AI credits are capped monthly; heavy generation needs add-on purchases
- ❌ Shaders and generative plugins are paid plans only
- ❌ Higher barrier than Canva for beginners
- ❌ MCP integration is developer-oriented
Official Resources
- Website: https://www.figma.com
- Figma Make: https://www.figma.com/make
- Figma AI: https://www.figma.com/ai
使いこなし Tips
SNS・コミュニティで共有されている実践的な使い方
- In Figma AI, add reference images for AI image generation/editing three ways: copy/paste, add directly from a selection, or drag and drop files (Source: https://x.com/figma/status/2049523196626682057)
- Figma released a use_figma MCP tool that lets AI agents design directly on the Figma canvas — now in open beta (Source: https://x.com/figma/status/2036434766661296602)