Figma
Connect Figma so the agents working on a project can read your designs: file structure, specific frames and components, rendered images, and your design system’s components and styles.
Connect
Section titled “Connect”- Open Integrations in the project’s sidebar and choose Figma.
- Click Connect Figma and authorize your Figma account.
Use it with agents
Section titled “Use it with agents”Figma adds tools to the Integrations MCP server for Claude Code, Codex and OpenCode:
- Get a file — its pages, frames and layers
- Get nodes — specific frames or components in full detail
- Render images — export frames as PNG, JPG, SVG or PDF
- List components and styles — the file’s published design system
Paste a Figma link into the agent’s prompt and describe what to build:
Build the pricing section from https://www.figma.com/design/AbC123/Site?node-id=12-345 using our existing components.
The file key and node ID come from the link, so agents find the right frame.
Disconnect
Section titled “Disconnect”Click Disconnect on the integration’s page. Agents lose access to your Figma files in the project, and you can reconnect at any time.