# Figma AI integration on Definable

> A collaborative interface design tool.

## What this connects

A collaborative interface design tool.

Vendor: https://www.figma.com/

## Tools available

**53** tools available. First 12:

- `FIGMA_ADD_A_COMMENT_TO_A_FILE` — Add a comment to a file — Posts a new comment to a Figma file or branch, optionally replying to an existing root comment (replies cannot be nested); `region_height` and `region_width` in `client_meta` must be positive if defining a comment region.
- `FIGMA_ADD_A_REACTION_TO_A_COMMENT` — Add a reaction to a comment — Posts a specified emoji reaction to an existing comment in a Figma file or branch, requiring valid file_key and comment_id.
- `FIGMA_CREATE_A_WEBHOOK` — Create a webhook — Creates a Figma webhook to receive POST notifications when specific events occur. Webhooks can monitor events at three scopes: - Team level: monitors all files in a team (requires team admin permissions) - Project level: monitors all files in a project (requires edit access) - File level: monitors a specific file (requires edit access) Upon creation, Figma sends an initial PING event to verify your endpoint (unless status is PAUSED). IMPORTANT: team_id, project_id, and file_key cannot be discovered programmatically. Extract them from Figma URLs or use FIGMA_DISCOVER_FIGMA_RESOURCES to parse URLs.
- `FIGMA_CREATE_DEV_RESOURCES` — Create dev resources — Creates and attaches multiple uniquely-URLed development resources to specified Figma nodes, up to 10 per node.
- `FIGMA_CREATE_MODIFY_DELETE_VARIABLES` — Create, modify, or delete variables — Manages variables, collections, modes, and their values in a Figma file via batch create/update/delete operations; use temporary IDs to link new related items in one request and ensure `variableModeValues` match the target variable's `resolvedType`.
- `FIGMA_DELETE_A_COMMENT` — Delete a comment — Deletes a specific comment from a Figma file or branch, provided the authenticated user is the original author of the comment.
- `FIGMA_DELETE_A_REACTION` — Delete a reaction — Deletes a specific emoji reaction from a comment in a Figma file; the user must have originally created the reaction.
- `FIGMA_DELETE_A_WEBHOOK` — Delete a webhook — Permanently deletes an existing webhook, identified by its unique `webhook_id`; this operation is irreversible.
- `FIGMA_DELETE_DEV_RESOURCE` — Delete dev resource — Deletes a development resource (used to link Figma design elements to external developer information like code or tasks) from a specified Figma file.
- `FIGMA_DESIGN_TOKENS_TO_TAILWIND` — Design tokens to tailwind — Convert design tokens to Tailwind CSS configuration. TWO-STEP WORKFLOW: 1. First, call FIGMA_EXTRACT_DESIGN_TOKENS with a Figma file_key to extract design tokens 2. Then, pass the returned DesignTokens object to this action's 'tokens' parameter This action generates: - tailwind.config.ts/js with theme extensions - Optional globals.css with font imports Note: Shadow colors can be provided in either string format (e.g., "rgba(15, 110, 110, 0.32)") or dictionary format (e.g., {"r": 0.059, "g": 0.431, "b": 0.431, "a": 0.32}).
- `FIGMA_DETECT_BACKGROUND` — Detect Background Layers — Detect background layers for selected nodes in a Figma file. This action analyzes the Figma document structure and identifies potential background elements for the given target nodes. It uses: - Geometric analysis (bounding box overlap/containment) - Z-index ordering (nodes earlier in the layer stack are behind later ones) - Visual properties (fills, node types) - Naming conventions (nodes named 'background', 'bg', etc.) Returns background candidates with confidence scores (0-1) and explanations.
- `FIGMA_DISCOVER_FIGMA_RESOURCES` — Discover Figma Resources — Smart Figma resource discovery - extract IDs from any Figma URL. Supports all URL formats: /file/, /design/, /board/, /proto/, /slides/ Example: figma.com/board/ABC123/Name → file_key=ABC123 Discovery workflow: team_id → projects → files → nodes Use extracted IDs with GetFileJson, DetectBackground, etc.

## Auth

Auth schemes: `OAUTH2`, `API_KEY`. Managed by Definable: `OAUTH2` — no client credentials required from the user.

## How agents use Figma

Inside a Definable workflow, Figma is one of the tools the **Distributor specialist** can call. Example coordination patterns:

- **Researcher → Figma** — the Researcher (GPT-5.5) pulls context from Figma (records, threads, documents), synthesises findings, and briefs the rest of the team.
- **Writer → Distributor → Figma** — the Writer (Claude Opus 4.7) drafts copy in brand voice, the Verifier passes it, then the Distributor writes the result into Figma (create record, post message, draft email).
- **Designer / Engineer → Distributor → Figma** — the Designer ships an asset or the Engineer ships a code change, the Distributor delivers it via Figma (attach file, open PR comment, post status).

The Verifier checks every Figma call. On rate limit, schema drift, or auth refresh it self-heals and retries — the workflow completes without manual intervention.

## Categories

- images & design — https://definable.ai/apps/category/images-&-design/
- team collaboration — https://definable.ai/apps/category/team-collaboration/

## Related

- HTML page: https://definable.ai/apps/figma/
- Same category (images & design): https://definable.ai/apps/category/images-&-design/
- All integrations: https://definable.ai/apps/
- Workflow (multi-agent loop): https://definable.ai/workflow/
- Apps llms.txt index: https://definable.ai/llms-apps.txt