# How to connect Figma to OpenClaw (no API keys)

> Connect Figma to OpenClaw with ClawLink in one click — 37 tools your AI agent can call from chat via hosted OAuth. No API keys, no manual setup.

Web version: https://claw-link.dev/openclaw/figma

The usual route to Figma access for OpenClaw is an MCP server you configure and keep running, plus your own OAuth app or API keys. ClawLink gives OpenClaw a more practical Figma setup: install one ClawHub skill, connect Figma in the browser, and OpenClaw can call real Figma actions from any chat surface with no auth, token refresh, or tool wiring to build yourself.

**Start here:** install the ClawLink plugin (`openclaw plugins install clawhub:clawlink-plugin`), pair it in the browser, then connect the app in the ClawLink dashboard. The interactive install prompt is on the web version of this page: https://claw-link.dev/openclaw/figma

## Setup

It takes three steps to connect OpenClaw to Figma.

1. **Install ClawLink** — add the plugin to OpenClaw once.
2. **Connect Figma** — one-click OAuth in the ClawLink dashboard.
3. **Use it from chat** — ask OpenClaw in plain English.

**Alternative for any agent (no plugin needed):** if the OpenClaw plugin route isn't available or doesn't work, any AI agent with shell access can use the ClawLink CLI instead:

```bash
npx -y @useclawlink/cli login          # sign in via browser — no API key to paste
npx -y @useclawlink/cli connect figma  # connect Figma (browser OAuth)
npx -y @useclawlink/cli actions figma  # list available actions
npx -y @useclawlink/cli run figma <action> --input '<json>'  # execute (add --confirm for writes)
```

### Install by command

The setup prompt above does all of this in one paste. By hand, it is one install command plus a browser approval:

```bash
openclaw plugins install clawhub:clawlink-plugin
```

Then ask OpenClaw to set up ClawLink. It starts browser pairing and prints an approval link — open it, approve the device, return to the chat, and say `done`. Finally, connect Figma in the [ClawLink dashboard](https://claw-link.dev/dashboard) — a one-click OAuth approval, no API keys.

Verify the connection by asking OpenClaw:

> I'm sharing a Figma link: https://www.figma.com/design/A1b2C3d4E5f6/MyApp. Run figma_discover_figma_resources with figma_url set to that link, then call figma_get_file_json with the file_key it returns and simplify: true. Summarize the structure, main frames, and any text I should look at.

### Using a different agent?

The OpenClaw plugin is one client of ClawLink's MCP server. Claude Code, Cursor, Codex, or any agent that can run a shell command pairs with the same ClawLink account through the CLI:

```bash
npx -y @useclawlink/cli login
```

`login` opens the same browser approval and stores a credential locally. Once Figma is connected in the dashboard, that agent calls the same 37 Figma tools over MCP. Full setup for MCP clients and shell agents: [connect apps to any AI agent](https://claw-link.dev/learn/connect-apps-to-any-ai-agent).

## Figma MCP for OpenClaw

Looking for a Figma MCP server for OpenClaw? ClawLink connects Figma to OpenClaw and exposes 37 Figma tools your agent can call over [MCP](https://claw-link.dev/learn/what-is-an-mcp-server), with [hosted auth](https://claw-link.dev/learn/oauth-for-ai-agents) and nothing to run or maintain yourself. Using Hermes instead? The [Hermes Figma integration](https://claw-link.dev/hermes/figma) works the same way.

Figma does not make this easy on purpose. The API route everyone's guides point at is a personal access token, which Figma's own documentation describes as acting on your account 'as if they were the user who generated the token', and which is rate-limited to 6 requests a month on Starter-plan files. ClawLink connects through Figma's hosted OAuth flow instead: 12 granular scopes, no token sitting in a config file on your machine, and the same Figma REST API underneath, called through the tools below.

## What ClawLink does not do with Figma

Three honest limits, so you are not surprised later.

- **No canvas writes.** ClawLink's Figma tools read files, post comments, create webhooks, extract tokens, and render images — nothing edits or creates frames. For AI that draws on the canvas itself, Figma's own MCP server (`mcp.figma.com/mcp`, client-catalog waitlist) writes to canvas; it is free during beta and planned to become usage-based.
- **No variables, dev resources, or library analytics.** Those APIs sit behind Enterprise-plan-only scopes, so the tools were dropped rather than shipping calls that 401 for everyone else. If your team has Enterprise, those tools exist on Composio's own toolkit page, not through this integration.
- **Read rate limits follow the file's plan, not ours.** A Starter-plan file caps Tier 1 reads at 6 calls a month even with OAuth; Dev/Full seats get 10-20 a minute. gethopp's figma-mcp-bridge exists specifically to route around that cap via a plugin, which is the honest answer for heavy Starter-plan use. For most workflows — one file at a time, shallow reads — the per-minute window for Dev/Full seats is plenty.

None of these limits are hidden behind a plan tier on ClawLink's side; they are Figma's own API boundaries, stated up front so the page stays truthful.

## What the OpenClaw Figma integration can do

37 Figma tools are ready for OpenClaw once the account is connected. The 30 below are the ones people reach for most; your agent can call all 37.

### 30 of 37 Figma tools for OpenClaw

| Tool | What it does |
|---|---|
| **Add a comment to a file** `figma_add_a_comment_to_a_file` | Post a comment to a Figma file or branch |
| **Create a webhook** `figma_create_a_webhook` | Create a Figma webhook |
| **Design tokens to tailwind** `figma_design_tokens_to_tailwind` | Convert design tokens to Tailwind CSS config |
| **Download figma images** `figma_download_figma_images` | Download images from Figma file nodes |
| **Extract design tokens** `figma_extract_design_tokens` | Extract design tokens from Figma files |
| **Detect background** `figma_detect_background` | Detect background layers for selected nodes in a Figma file |
| **Discover figma resources** `figma_discover_figma_resources` | Smart Figma resource discovery - extract IDs from any Figma URL |
| **Extract prototype interactions** `figma_extract_prototype_interactions` | Extract prototype interactions and animations from Figma files |
| **Get a webhook** `figma_get_a_webhook` | Retrieves detailed information about a specific webhook by its ID, provided the webhook exists |
| **Get comments in a file** `figma_get_comments_in_a_file` | Retrieves all comments from an existing Figma file, identified by a valid `file_key`, returning |
| **Get component set** `figma_get_component_set` | Retrieves detailed metadata for a specific published Figma component set using its unique `key` |
| **Get component2** `figma_get_component2` | Fetches metadata for a specific component using its unique identifier |
| **Get current user** `figma_get_current_user` | Retrieves detailed information for the currently authenticated Figma user |
| **Get file component sets** `figma_get_file_component_sets` | Retrieves all published component sets from the specified Figma main file (file_key must not be |
| **Get file components** `figma_get_file_components` | Retrieves published components from a Figma file, which must be a main file (not a branch) |
| **Get file json** `figma_get_file_json` | Get Figma Design file data with automatic simplification |
| **Get file metadata** `figma_get_file_metadata` | Get Figma file metadata including name, creator, last modification details, thumbnail, and |
| **Get file nodes** `figma_get_file_nodes` | Fetch JSON for specific node IDs from a Figma file to avoid full-file payload limits |
| **Get file styles** `figma_get_file_styles` | Retrieves a list of published styles (like colors, text attributes, effects, and layout grids) |
| **Get files in a project** `figma_get_files_in_a_project` | Fetches a list of files in a Figma project, optionally including branch metadata |
| **Get image fills** `figma_get_image_fills` | Retrieves temporary (14-day expiry) download URLs for all image fills in a Figma file; requires |
| **Get projects in a team** `figma_get_projects_in_a_team` | Retrieves projects within a specified Figma team that are visible to the authenticated user |
| **Get reactions for a comment** `figma_get_reactions_for_a_comment` | Retrieves reactions for a specific comment in a Figma file |
| **Get scim service provider config** `figma_get_scim_service_provider_config` | Get Figma's SCIM service provider configuration |
| **Get style** `figma_get_style` | Retrieves detailed metadata for a specific style in Figma using its unique style key |
| **Get team component sets** `figma_get_team_component_sets` | Retrieves a paginated list of published component sets (collections of reusable UI elements) |
| **Get team components** `figma_get_team_components` | Retrieves components published in a specific Figma team's library; the team must have published |
| **Get team styles** `figma_get_team_styles` | Retrieves a paginated list of published styles (fill colors, text styles, effects, grids) from |
| **Get team webhooks** `figma_get_team_webhooks` | Retrieves all webhooks registered for a specified Figma context (team, project, or file) |
| **Get versions of a file** `figma_get_versions_of_a_file` | Retrieves the version history for a Figma file or branch, as specified by its `file_key` |

## Example prompts

**Read a design from a link**

> I'm sharing a Figma link: https://www.figma.com/design/A1b2C3d4E5f6/MyApp. Run figma_discover_figma_resources with figma_url set to that link, then call figma_get_file_json with the file_key it returns and simplify: true. Summarize the structure, main frames, and any text I should look at.

**Extract design tokens to Tailwind**

> Get the file_key for https://www.figma.com/design/A1b2C3d4E5f6/Design-System with figma_discover_figma_resources, then run figma_extract_design_tokens on it (include_variables stays false — we don't have the Enterprise variable scope). Then pass the output to figma_design_tokens_to_tailwind with config_format "ts" and show me the generated tailwind.config.

**Download a frame as an image**

> For https://www.figma.com/design/A1b2C3d4E5f6/MyApp, use figma_discover_figma_resources to get the file_key and the node id of the frame named 'Login'. Then call figma_download_figma_images with file_key, images: [\{node_id: \<that node id>, scale: 2\}] and format png, and save the result somewhere I can open it.

**Leave a review comment on a design**

> Discover the file_key and the node id of the 'Checkout' frame in https://www.figma.com/design/A1b2C3d4E5f6/MyApp, then call figma_add_a_comment_to_a_file with file_key and message "The checkout button has no focus state — here's a suggestion: add a 2px outline." Set client_meta with positive region height and width.

## How the Figma tools actually behave

Argument names, defaults, and limits from the live tool schemas, checked 2026-08-02. Three of these surprise every new user.

- **Never let the agent guess a file key or node id.** Figma ids come from URLs: the key after `figma.com/file/` or `figma.com/design/` in the address, node ids from the `?node-id=123:456` fragment, team ids after `figma.com/files/team/`. The `figma_discover_figma_resources` tool takes any of those URLs and returns the ids — it has no required arguments, just paste the link. An agent that invents an id gets a 403 or 404 on an otherwise healthy connection.
- **`figma_get_file_json` simplifies by default.** `simplify` defaults to true and converts the raw REST response into an AI-friendly shape (css-like property names, deduplicated variables, empties removed, roughly 70% smaller). Set `simplify: false` only when you need the raw API response, and use `ids` plus `depth` to fetch one subtree instead of a whole file — a full-file pull is the fastest way to hit the rate limits in the troubleshooting section.
- **Image URLs from `figma_get_image_fills` expire in 14 days.** The tool returns temporary download URLs, not files. If the agent needs them later, it has to re-ask.
- **`figma_download_figma_images` renders nodes server-side with `scale` defaulting to 2** (0.01-4.0 for retina output) and exports png, svg, jpg, or pdf. For SVG, `svg_outline_text` and `svg_simplify_stroke` default to true — set `svg_outline_text: false` only if you want editable text paths.
- **Design-token extraction is styles-first.** `figma_extract_design_tokens` takes just `file_key`, and `extract_from_nodes` and `include_local_styles` default to true. Variables are excluded because Figma marks `file_variables:read` as Enterprise-only and this integration does not request it — see the variables troubleshooting card.
- **Comments need a real file key and a message.** `figma_add_a_comment_to_a_file` requires `file_key` and `message`; replying works by passing the parent comment's `comment_id`, but replies cannot be nested. If `client_meta` positions the comment on the canvas, `region height` and `region width` must be positive.
- **Webhooks need an id you cannot discover by searching.** `figma_create_a_webhook` monitors at team, project, or file level, and Figma's own description warns that `team_id`, `project_id`, and `file_key` cannot be discovered programmatically — extract them from URLs or with `figma_discover_figma_resources`, and the endpoint must be a publicly reachable https URL or Figma's ping will fail.

## ClawLink vs. building it yourself

The alternative to ClawLink is usually manual OAuth app setup plus your own token handling, permission troubleshooting, and tool plumbing for OpenClaw. That is fine if you want to build and maintain the integration yourself. Most teams just want Figma working from chat.

| | Manual | ClawLink |
|---|---|---|
| **Connection flow** | Register a Figma app, configure redirect URLs, manage consent details, and reconnect users when auth settings drift. | Users connect Figma through the hosted browser flow and ClawLink keeps the token lifecycle out of your app code. |
| **Ongoing maintenance** | You own refresh logic, permission debugging, environment config, and every provider-specific edge case for Figma. | ClawLink handles the repetitive integration plumbing so your team can focus on the workflow instead of the infrastructure. |
| **Agent usability** | You still need to expose the right Figma actions to the runtime in a format your agent can reliably use. | 37 tools for Figma are already exposed through ClawLink, so the agent can read and act from chat immediately. |

## ClawLink vs. Composio

Composio also exposes Figma to AI agents. It is developer infrastructure: Python and TypeScript SDKs, an MCP server, and a catalog past 1,000 apps, aimed at teams shipping agent products. ClawLink is built for OpenClaw users instead. You install the plugin once, connect Figma in the browser, and the 37 tools above work from chat. There is no SDK, no config file, and no API key handling. Choosing between them? Read the full [Composio alternatives](https://claw-link.dev/hub/composio-alternatives) comparison.

### OpenClaw installed the Figma skill but can't call the tools
The ClawHub skill teaches OpenClaw about Figma, but the calls run through the ClawLink plugin and your connected account. Make sure Figma is connected in the dashboard, then start a fresh chat so OpenClaw reloads the tool catalog. If OpenClaw runs as a persistent gateway, restart it so the new tools register.

### Connection succeeds but no tools appear
Reconnect Figma from the dashboard, then start a fresh chat if the runtime still has the old tool catalog loaded.

### "Tool schema not loaded yet" error when calling Figma tools
Figma tool schemas load on demand the first time a tool runs and are cached after that, so this error usually clears on its own: wait a few seconds and retry the same request. If every Figma call keeps failing with it in a fresh chat, reconnect from the dashboard, and contact support if it still persists — that pattern points to a configuration problem on our side, not something you can fix by reconnecting again.

### Figma returns 403 or "permission denied" on one action while others work
Two usual causes. The connected account may not have access to the specific workspace, inbox, store, or project in the request — check that first. If access looks right, the agent may have sent a placeholder value (like "YOUR_ID" or an example id from documentation) instead of a real one: ask it to run a list or search tool first, then retry the action with a real id from those results. Most failures at this stage are one of these two, not ClawLink bugs.

### Figma returns 429 "Rate limit exceeded"
The literal error from production is the JSON body with status 429 and err "Rate limit exceeded". Figma rate-limits the REST API per user, per plan, per app. The tier that matters most: on Starter-plan files, the Tier 1 read endpoints (GET file, GET file nodes, GET image) are capped at 6 calls a month for View and Collab seats — Dev and Full seats get 10-20 requests per minute instead. The 429 response carries a Retry-After header; Figma's own guidance is to wait, typically about a minute, before retrying. This is why an agent that pulls a whole file or renders many nodes can trip it where lighter calls succeed. If the file is on a paid plan with a Dev or Full seat, keep reads shallow (see the get-file-json notes below) and you will stay under the per-minute window. If you are on Starter, batch what you need in a handful of calls — the 6/month cap is the plan, not a ClawLink limit, and the same budget would apply to a personal access token or any other app against that file.

Ask the agent to diagnose it:

```text
Run clawlink_list_integrations and report the Figma connection status. Then check the last failed call's error body for a Retry-After value and report it without retrying.
```

### Figma returns 403 on one file while other Figma calls work
Figma's scopes do not override file permissions: you can only access files that were created by the connected account or shared with it. The most common cause of a 403 on one specific file is simply that the file was never shared with the account you connected — an agent can read everything else you have access to and still fail on that one, which looks exactly like a bug. Check the file's Share settings and confirm the connected account appears there. The second cause is a placeholder id: file keys and node ids come from the file's URL (the key after figma.com/file/ or figma.com/design/), and an agent that invents one gets a 403 or 404 on an otherwise healthy connection. Use the URL-to-id tool described below instead of letting the agent guess. A third, rarer cause is Enterprise-only endpoints (variables, library analytics, activity logs): those return permission errors on non-Enterprise accounts because the underlying scope is Enterprise-only — the tools that need them are not on this page for exactly that reason. One differentiator: if this 403 appears while you run a DIY Figma MCP server (mcp.figma.com or a community server) rather than this hosted connection, the usual cause is Figma's dynamic client registration: your client id is not on the server's allowlist in Figma's developer console. That is a separate failure surface with its own fix, and it does not apply to the ClawLink connection.

Ask the agent to diagnose it:

```text
Ask the agent to run the discover-figma-resources tool with the Figma URL I provide, then retry with the returned file key. Report the exact status code and body from the failure.
```

### Figma tool returns "tool not found" for figma_get_local_variables or figma_create_modify_delete_variables
Those tools are not part of this integration, on purpose. Figma marks the file_variables:read and file_variables:write scopes as Enterprise-plan-only, so variable-editing tools were removed from the ClawLink Figma toolset in the 2026-05-08 scope audit rather than shipping tools that would fail on non-Enterprise accounts. If the agent suggests them, it is reading stale documentation — redirect it to the tools on this page. Style-based design tokens still work without that scope: figma_extract_design_tokens returns styles and node-derived values on any plan, and its include_variables option stays off because the variable scope is not granted.

Ask the agent to diagnose it:

```text
List the Figma tools you actually have access to and use one of those instead of the variables tools. Tell me which are available.
```

### OAuth finished in the browser but the account is still missing
Try reconnecting Figma and complete the consent flow in the same browser session. Partial OAuth approvals or switching accounts mid-flow can leave the connection incomplete.

### Is there a OpenClaw Figma integration?
Yes. ClawLink is the fastest way to connect OpenClaw to Figma: link your Figma account once in the browser and OpenClaw can call the Figma API through 37 ready-made tools — no custom code or token handling.

### How do I add Figma to OpenClaw with ClawLink?
Paste the setup prompt from this page into OpenClaw. It installs the ClawLink Figma skill from ClawHub, then you click Connect in the dashboard to authorize Figma. OpenClaw calls the tools from the next message — no config files or API keys to manage.

### How long does it take to connect Figma to OpenClaw?
About two minutes. Sign in, click Connect next to Figma in the dashboard, authenticate, and OpenClaw can use it from the next chat message.

### Why use ClawLink instead of wiring Figma up myself?
The alternative to ClawLink is usually manual OAuth app setup plus your own token handling, permission troubleshooting, and tool plumbing for OpenClaw. That is fine if you want to build and maintain the integration yourself. Most teams just want Figma working from chat.

### Is it safe to connect my Figma account to an AI agent?
It depends on the route. The personal-access-token route most guides teach gives the token holder access to your account 'as if they were the user' — full reach, no expiry by default, and the token lives in a config file on whatever machine runs the agent. ClawLink connects through Figma's hosted OAuth instead: the grant is tied to one app, shows on the app-consent page in your Figma settings, can be revoked there at any time, and requests are scoped to the 12 granular scopes this page's tools need (read file content and metadata, read and post comments, read projects and libraries, create webhooks). There is no canvas-write scope, no variables scope, and no dev-resources scope in the grant — the tools that need those were dropped from this integration on purpose. The other rule to remember is Figma's: an agent only sees files that are shared with your account, so nothing outside the files you share is reachable at all.

### Can I connect Figma to OpenClaw without a Figma API token?
Yes — that is the whole point of the hosted connection. No personal access token is generated, no X-Figma-Token header ever exists on your machine, and nothing is written to a config file. You click Connect on Figma's consent screen once, approve the scopes, and OpenClaw calls the Figma REST API through the ClawLink runtime from the next message. The two-minute setup is: install the ClawLink skill, connect Figma in the dashboard, and ask.

### OpenClaw installed the Figma skill but can't call the tools
The ClawHub skill teaches OpenClaw about Figma, but the calls run through the ClawLink plugin and your connected account. Make sure Figma is connected in the dashboard, then start a fresh chat so OpenClaw reloads the tool catalog. If OpenClaw runs as a persistent gateway, restart it so the new tools register.

## Related

- [OpenClaw Cloudinary integration](https://claw-link.dev/openclaw/cloudinary) — Cloudinary is a cloud-based media management platform for uploading, storing, transforming, and delivering images and videos via CDN.
- [Penpot tools](https://claw-link.dev/openclaw/penpot) — Open-source design and prototyping platform for collaborative design workflows.
- [Connect Canva](https://claw-link.dev/openclaw/canva) — Create designs, upload assets, export content, and manage brand templates