> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mantle.chat/llms.txt
> Use this file to discover all available pages before exploring further.

# Figma

> Browse files, inspect designs, and manage Figma projects — access components, variables, and design tokens from Mantle

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

<CardGroup cols={2}>
  <Card title="File inspection" icon="pen-ruler">
    Browse Figma files, view nodes, and retrieve metadata — understand your designs through natural language.
  </Card>

  <Card title="Component library" icon="puzzle-piece">
    Access components, component sets, and styles across your team library for design system queries.
  </Card>

  <Card title="Design tokens" icon="palette">
    Extract design tokens, variables, and Tailwind configurations from your Figma files.
  </Card>

  <Card title="Collaboration" icon="comments">
    Read and post comments on files, manage webhooks, and track design feedback.
  </Card>
</CardGroup>

***

## Connect Figma

<Steps>
  <Step title="Open Settings → Integrations">
    In any workspace go to **Settings → Integrations** and select **Figma**.
  </Step>

  <Step title="Authorize with OAuth">
    Click **Connect** and sign in to your Figma account. Grant Mantle the requested permissions to access your files and
    projects.
  </Step>

  <Step title="Confirm the connection">
    Once authorized, you'll be redirected back to Mantle. The integration status will show as connected.
  </Step>
</Steps>

***

## Agent tools

Add Figma tools to agents that need them. Their access is limited by the connected account and selected tools.

### Files & Nodes

| Tool               | Description                                     |
| ------------------ | ----------------------------------------------- |
| Get file JSON      | Retrieve the full JSON representation of a file |
| Get file metadata  | Retrieve file metadata (name, version, etc.)    |
| Get file nodes     | Access specific nodes within a file             |
| Render node images | Export images of specific file nodes            |
| Get image fills    | Retrieve image fill URLs from a file            |
| Get file versions  | List version history of a file                  |

### Components & Styles

| Tool                | Description                              |
| ------------------- | ---------------------------------------- |
| Get component       | Retrieve details of a specific component |
| Get team components | List all components published by a team  |
| Get component sets  | List component sets in a file            |
| Get file styles     | Retrieve styles defined in a file        |
| Get team styles     | List all styles published by a team      |

### Design Tokens & Variables

| Tool                  | Description                                    |
| --------------------- | ---------------------------------------------- |
| Extract design tokens | Extract design tokens from a file              |
| Tokens to Tailwind    | Convert Figma design tokens to Tailwind config |
| Get local variables   | Retrieve local variables from a file           |
| Get published vars    | Retrieve published variables from a library    |

### Projects & Comments

| Tool               | Description                 |
| ------------------ | --------------------------- |
| List projects      | List projects in a team     |
| List project files | List files within a project |
| Get comments       | Retrieve comments on a file |
| Add comment        | Post a comment on a file    |

***

## Triggers

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

***

## Example use cases

<AccordionGroup>
  <Accordion title="Extract design tokens for development">
    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.
  </Accordion>

  <Accordion title="Component audit across files">
    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.
  </Accordion>

  <Accordion title="Design review comments in chat">
    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.
  </Accordion>
</AccordionGroup>

***

## Troubleshooting

<AccordionGroup>
  <Accordion title="OAuth connection failed">
    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**.
  </Accordion>

  <Accordion title="Agent can't access a file">
    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.
  </Accordion>

  <Accordion title="Design token extraction returns empty results">
    Not all Figma files use variables or design tokens. Verify the file contains published styles, variables, or
    component properties before extracting tokens.
  </Accordion>

  <Accordion title="Image export quality is low">
    Rendered node images default to 1x scale. Specify a higher scale factor when requesting image exports for better
    resolution.
  </Accordion>
</AccordionGroup>

***

<Card title="Back to Integrations" icon="plug" href="/integrations/overview">
  View all available integrations
</Card>