# How to connect Figma to Grok Bot (no API keys)

> Connect Figma to Grok Bot 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/grokbot/figma

Grok Bot runs on its own cloud computer, so most Figma guides send you to register an OAuth app and paste keys into a sandbox that resets. ClawLink gives Grok Bot a more practical Figma setup: it runs one CLI command, you approve once in the browser, and Grok Bot can call real Figma actions from chat with no auth, token refresh, or tool wiring to build yourself.

**Start here — paste this into Grok Bot to set up ClawLink:**

> Set up ClawLink for me and tell me when it's ready.
> 1. Pair this machine. It prints an approval link, so show me the link and stop, don't wait: `npx -y @useclawlink/cli login`
> 2. I'll approve it in my browser, then reply "approved".
> 3. When I say approved, connect the app: `npx -y @useclawlink/cli connect figma`
> 4. Then run `npx -y @useclawlink/cli whoami` and tell me whether ClawLink is ready.

## Setup

It takes three steps to connect Grok Bot to Figma.

1. **Pair from the terminal** — ask Grok Bot to run `npx -y @useclawlink/cli login` and approve the link it prints.
2. **Connect Figma** — `npx -y @useclawlink/cli connect figma`, then approve in the browser.
3. **Use it from chat** — ask Grok Bot in plain English.

**The same CLI works from any agent with shell access:**

```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 prompt above does all of this. By hand, it is two commands Grok Bot runs in its own terminal, and one browser approval:

```bash
npx -y @useclawlink/cli login          # prints an approval link, approve it in your browser
npx -y @useclawlink/cli connect figma
```

Pair once and it sticks: the key is written to ~/.clawlink/credentials.json inside Grok Bot's sandbox, so it survives between sessions. Prefer native tools over shell commands? Add `https://claw-link.dev/api/mcp` as a custom connector at grok.com/connectors and approve the ClawLink sign-in. Same account, no CLI.

Verify the connection by asking Grok Bot:

> Use Figma to add a comment to a file and walk me through the result in plain English.

### Using a different agent?

The CLI above is not specific to Grok Bot. Claude Code, Cursor, Codex, or any agent that can run a shell command pairs with the same ClawLink account the same way:

```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 Grok Bot

Looking for a Figma MCP server for Grok Bot? ClawLink connects Figma to Grok Bot 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 a different agent? The [OpenClaw Figma integration](https://claw-link.dev/openclaw/figma) and the [Hermes Figma integration](https://claw-link.dev/hermes/figma) connect the same ClawLink account the same way.

## What the Grok Bot Figma integration can do

37 Figma tools are ready for Grok Bot 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 Grok Bot

| 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

**Add A Comment To A File**

> Use Figma to add a comment to a file and walk me through the result in plain English.

**Create A Webhook**

> Create it in Figma for me, then confirm the important fields before you finish.

**Design Tokens To Tailwind**

> Use Figma to design tokens to tailwind and walk me through the result in plain English.

**Download Figma Images**

> Use Figma to download figma images and walk me through the result in plain English.

## 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 Grok Bot. 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 Grok Bot 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.

### Grok Bot says it cannot add ClawLink as an MCP server
Grok Bot only attaches MCP servers that are reachable over the public internet, so a local stdio server is refused. You do not need one. Ask Grok Bot to run `npx -y @useclawlink/cli login` in its terminal instead. The CLI is a shell command, not an MCP server. If you would rather have native tools, add `https://claw-link.dev/api/mcp` as a custom connector at grok.com/connectors and approve the ClawLink sign-in.

### 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.

### 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 Grok Bot Figma integration?
Yes. ClawLink is the fastest way to connect Grok Bot to Figma: link your Figma account once in the browser and Grok Bot can call the Figma API through 37 ready-made tools — no custom code or token handling.

### How do I connect Figma to Grok Bot with ClawLink?
Ask Grok Bot to run `npx -y @useclawlink/cli login` in its terminal and approve the link it prints, then `npx -y @useclawlink/cli connect figma` to authorize Figma. Grok Bot calls the tools from the next message, and the pairing persists in its sandbox, so this is a one-time step: no config files or API keys to manage.

### How long does it take to connect Figma to Grok Bot?
About two minutes. Sign in, click Connect next to Figma in the dashboard, authenticate, and Grok Bot 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 Grok Bot. That is fine if you want to build and maintain the integration yourself. Most teams just want Figma working from chat.

### Grok Bot says it cannot add ClawLink as an MCP server
Grok Bot only attaches MCP servers that are reachable over the public internet, so a local stdio server is refused. You do not need one. Ask Grok Bot to run `npx -y @useclawlink/cli login` in its terminal instead. The CLI is a shell command, not an MCP server. If you would rather have native tools, add `https://claw-link.dev/api/mcp` as a custom connector at grok.com/connectors and approve the ClawLink sign-in.

## Related

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