Figma Integration
The Figma node lets your agents read design files, extract design tokens, generate code from frames, and modify canvas content.
Connection Setup
Section titled “Connection Setup”Requires a Figma Personal Access Token.
- Go to Figma → Account Settings → Personal Access Tokens
- Generate a new token — select the scopes your agent needs (file read, write, etc.)
- Paste it when connecting Figma in Spawnbase
Available Tools
Section titled “Available Tools”Tools are discovered automatically when you connect.
| Category | What you can do |
|---|---|
| Read designs | Extract frames, components, variables, and layout data |
| Write to canvas | Create and modify frames, components, variables, and auto layout |
| Generate code | Select a Figma frame and convert it to code |
| Design context | Pull variables, components, and spacing into structured data |
| Code Connect | Map Figma components to real codebase components |
MCP Server
Section titled “MCP Server”| Server URL | https://mcp.figma.com/mcp |
| Transport | Streamable HTTP |
| Docs | Figma MCP Server |
- File keys are in the Figma URL:
figma.com/design/{fileKey}/...— your agent needs this to target specific files. - Design system audits — build agents that extract variables and flag inconsistencies across files.
- Code generation works best when your Figma file uses auto layout and named components — messy files produce messy code.