Skip to main content
Connect your Figma account via OAuth and let your AI agents access your design system: browse files, inspect components, extract design tokens, read comments, and explore project structures — without leaving Mantle.

What you unlock

File inspection

Browse Figma files, view nodes, and retrieve metadata — understand your designs through natural language.

Component library

Access components, component sets, and styles across your team library for design system queries.

Design tokens

Extract design tokens, variables, and Tailwind configurations from your Figma files.

Collaboration

Read and post comments on files, manage webhooks, and track design feedback.

Connect Figma

1

Open Settings → Integrations

In any workspace go to Settings → Integrations and select Figma.
2

Authorize with OAuth

Click Connect and sign in to your Figma account. Grant Mantle the requested permissions to access your files and projects.
3

Confirm the connection

Once authorized, you’ll be redirected back to Mantle. The integration status will show as connected.

Agent tools

Any agent in your workspace can use Figma tools once the integration is connected.

Files & Nodes

ToolDescription
Get file JSONRetrieve the full JSON representation of a file
Get file metadataRetrieve file metadata (name, version, etc.)
Get file nodesAccess specific nodes within a file
Render node imagesExport images of specific file nodes
Get image fillsRetrieve image fill URLs from a file
Get file versionsList version history of a file

Components & Styles

ToolDescription
Get componentRetrieve details of a specific component
Get team componentsList all components published by a team
Get component setsList component sets in a file
Get file stylesRetrieve styles defined in a file
Get team stylesList all styles published by a team

Design Tokens & Variables

ToolDescription
Extract design tokensExtract design tokens from a file
Tokens to TailwindConvert Figma design tokens to Tailwind config
Get local variablesRetrieve local variables from a file
Get published varsRetrieve published variables from a library

Projects & Comments

ToolDescription
List projectsList projects in a team
List project filesList files within a project
Get commentsRetrieve comments on a file
Add commentPost a comment on a file

Triggers

Automated triggers for Figma are not yet available. Triggers will be added in a future update — check back soon.

Example use cases

Ask your agent to extract design tokens from a Figma file and convert them to Tailwind configuration — bridging the gap between design and code without manual translation.
Ask “Which components from our design system are used in the dashboard file?” and the agent inspects the file structure, identifying component instances and their source libraries.
An agent fetches all unresolved comments from a Figma file and posts them to your #design channel, so the team can discuss feedback without switching to Figma.

Troubleshooting

Make sure you are signing in with a Figma account that has access to the files and projects you want to inspect. Try disconnecting and reconnecting from Settings → Integrations → Figma.
Figma API access is scoped to files the authenticated user can view. Verify the file is shared with the connected account or lives in a project the account has access to.
Not all Figma files use variables or design tokens. Verify the file contains published styles, variables, or component properties before extracting tokens.
Rendered node images default to 1x scale. Specify a higher scale factor when requesting image exports for better resolution.

Back to Integrations

View all available integrations