ClawLink

How to connect Figma to Hermes Agent

Connect Figma to Hermes Agent with ClawLink: no personal access token, no local MCP server, no Dev Mode setup. 37 Figma tools your agent calls from chat.

Get started for free
Hermes Agent
Hermes Agent
ClawLink
ClawLink
Figma
Figma
FigmaOAUTH2MCP

Design files, prototypes, comments, and developer resources. Once connected, Hermes Agent can read and act on Figma from chat — pairing, token refresh, and tool wiring handled for you.

37 tools

Most guides for giving Hermes Agent Figma access start with registering your own OAuth app or pasting API keys into env files, then leave the token refresh and tool wiring to you. ClawLink gives Hermes a more practical Figma setup: pair once in the browser and your always-on Hermes agent can act on Figma for you, reading and doing real work on your behalf with no auth, token refresh, or tool wiring to build yourself.

Copy this prompt into Hermes to install the plugin and pair your account.

Prompt for Hermes
Set up ClawLink for Hermes and tell me when it's ready.

1. Install the plugin:
hermes plugins install ClawLink-HQ/hermes-plugin --enable

2. Start pairing. It prints an approval link, so show me the link and stop, don't wait:
hermes clawlink begin

3. I'll approve it in my browser, then reply "approved".

4. When I say approved, finish setup:
hermes clawlink finish

5. Then run `hermes clawlink test` and tell me whether ClawLink is ready.

Setup

It takes three steps to connect Hermes to Figma.

  1. 1

    Install and pair

    Install the ClawLink plugin, then pair Hermes with a one-time browser approval:

    hermes plugins install ClawLink-HQ/hermes-plugin --enable
  2. 2

    Connect Figma

    One-click OAuth in the dashboard.

  3. 3

    Use it from chat

    Ask Hermes Agent: "What can you do with Figma?"

Install by command

The prompt above walks Hermes through this. By hand, it is four commands and a browser approval:

hermes plugins install ClawLink-HQ/hermes-plugin --enable
hermes clawlink begin    # prints an approval link — open it and approve
hermes clawlink finish   # after approving in the browser
hermes clawlink test

Then connect Figma in the ClawLink dashboard — a one-click OAuth approval, no API keys.

Verify the connection by asking Hermes:

Here is a Figma link: https://www.figma.com/design/A1b2C3d4E5f6/MyApp. Run figma_discover_figma_resources on it, then figma_get_file_json with the file key it returns and simplify set to true. Summarize the page structure, the main frames, and any copy I should review.

Using a different agent?

The Hermes 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:

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.

Figma MCP for Hermes

Looking for a Figma MCP server for Hermes Agent? ClawLink connects Figma to Hermes Agent and exposes 37 Figma tools your agent can call over MCP, with hosted auth and nothing to run or maintain yourself. Using OpenClaw instead? The OpenClaw Figma integration works the same way.

Figma has two first-party answers for AI now, and neither of them is a Hermes tool. Its remote MCP server wants a client you configure and keep pointed at it, and its in-canvas AI works inside the Figma app rather than in your agent. The community route is the older one: generate a personal access token, which Figma's own documentation describes as acting on your account as if it were you, and paste it into a config file next to a server you run. ClawLink connects through Figma's OAuth flow with 12 granular scopes, and the 37 tools below become callable inside Hermes chat. Nothing runs on your machine, there is no X-Figma-Token header anywhere, and the grant appears on Figma's app-consent page where you can revoke it.

Three limits, stated so you are not surprised later.

  • No canvas writes. These tools read files, comment, extract tokens, render images, and manage webhooks. Nothing edits or creates frames. For AI that draws on the canvas, Figma's own in-product AI is the answer.
  • No variables, dev resources, or library analytics. Those sit behind Enterprise-plan-only scopes, so the tools were dropped rather than shipped in a state that fails for most accounts.
  • Read limits follow the file's Figma plan, not ours. A Starter-plan file caps Tier 1 reads at 6 calls a month even over OAuth. That budget is Figma's, and it applies to any app reading that file.

Using OpenClaw as well? The OpenClaw Figma integration connects through the same Figma OAuth app and the same 37 tools; only the agent-side pairing differs.

What the Hermes Agent Figma integration can do

37 Figma tools are ready for Hermes Agent 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 Hermes

ToolWhat it does
Add a comment to a file figma_add_a_comment_to_a_filePost a comment to a Figma file or branch
Create a webhook figma_create_a_webhookCreate a Figma webhook
Design tokens to tailwind figma_design_tokens_to_tailwindConvert design tokens to Tailwind CSS config
Download figma images figma_download_figma_imagesDownload images from Figma file nodes
Extract design tokens figma_extract_design_tokensExtract design tokens from Figma files
Detect background figma_detect_backgroundDetect background layers for selected nodes in a Figma file
Discover figma resources figma_discover_figma_resourcesSmart Figma resource discovery - extract IDs from any Figma URL
Extract prototype interactions figma_extract_prototype_interactionsExtract prototype interactions and animations from Figma files
Get a webhook figma_get_a_webhookRetrieves detailed information about a specific webhook by its ID, provided the webhook exists
Get comments in a file figma_get_comments_in_a_fileRetrieves all comments from an existing Figma file, identified by a valid file_key, returning
Get component set figma_get_component_setRetrieves detailed metadata for a specific published Figma component set using its unique key
Get component2 figma_get_component2Fetches metadata for a specific component using its unique identifier
Get current user figma_get_current_userRetrieves detailed information for the currently authenticated Figma user
Get file component sets figma_get_file_component_setsRetrieves all published component sets from the specified Figma main file (file_key must not be
Get file components figma_get_file_componentsRetrieves published components from a Figma file, which must be a main file (not a branch)
Get file json figma_get_file_jsonGet Figma Design file data with automatic simplification
Get file metadata figma_get_file_metadataGet Figma file metadata including name, creator, last modification details, thumbnail, and
Get file nodes figma_get_file_nodesFetch JSON for specific node IDs from a Figma file to avoid full-file payload limits
Get file styles figma_get_file_stylesRetrieves a list of published styles (like colors, text attributes, effects, and layout grids)
Get files in a project figma_get_files_in_a_projectFetches a list of files in a Figma project, optionally including branch metadata
Get image fills figma_get_image_fillsRetrieves 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_teamRetrieves projects within a specified Figma team that are visible to the authenticated user
Get reactions for a comment figma_get_reactions_for_a_commentRetrieves reactions for a specific comment in a Figma file
Get scim service provider config figma_get_scim_service_provider_configGet Figma's SCIM service provider configuration
Get style figma_get_styleRetrieves detailed metadata for a specific style in Figma using its unique style key
Get team component sets figma_get_team_component_setsRetrieves a paginated list of published component sets (collections of reusable UI elements)
Get team components figma_get_team_componentsRetrieves components published in a specific Figma team's library; the team must have published
Get team styles figma_get_team_stylesRetrieves a paginated list of published styles (fill colors, text styles, effects, grids) from
Get team webhooks figma_get_team_webhooksRetrieves all webhooks registered for a specified Figma context (team, project, or file)
Get versions of a file figma_get_versions_of_a_fileRetrieves the version history for a Figma file or branch, as specified by its file_key

Try it: find the Figma tool you need

Browse the 30 Figma tools

Click any tool to see exactly what Hermes can do and copy a ready-to-use prompt.

Example prompts

Get the file key for the URL I paste with figma_discover_figma_resources, run figma_extract_design_tokens on it, then pass the result to figma_design_tokens_to_tailwind with config_format set to ts. Show me the generated config and flag any colour that has no name.

For my Figma file, use figma_discover_figma_resources to get the file key and the node id of the frame called Login, then call figma_download_figma_images for that node at scale 2 in png. Tell me where to find the file.

Read the Checkout frame in the file I link with figma_get_file_nodes, list anything that looks inconsistent with the rest of the design system, and show me the list. Once I approve, post each item as a comment with figma_add_a_comment_to_a_file.

How the Figma tools behave

Argument-level facts from the live schemas, checked 2026-08-02. The first one prevents most failed first attempts.

  • Never let the agent guess a file key or node id. Figma ids come from URLs: the key follows figma.com/file/ or figma.com/design/, node ids come from the ?node-id=123:456 fragment, team ids follow figma.com/files/team/. figma_discover_figma_resources takes any of those links and returns the ids, and it has no required arguments beyond the URL.
  • figma_get_file_json simplifies by default. simplify defaults to true, which converts the raw REST response into a smaller AI-friendly shape. Use ids and depth to pull one subtree rather than a whole file; a full-file read is the quickest way to meet the rate limit described above.
  • Image URLs from figma_get_image_fills expire in 14 days. The tool returns temporary download links rather than files, so an agent that needs them later has to ask again.
  • figma_download_figma_images renders server-side, with scale defaulting to 2 and output in png, svg, jpg, or pdf. For SVG, svg_outline_text and svg_simplify_stroke default to true; turn the first off if you want editable text paths.
  • Design-token extraction is styles-first. figma_extract_design_tokens needs only file_key, and include_local_styles defaults to true. Variables stay out because the scope is Enterprise-only.
  • Comments can position themselves on the canvas. figma_add_a_comment_to_a_file requires file_key and message; replies pass the parent's comment_id and cannot nest further. If client_meta places the comment, its region height and width must be positive.
  • Webhook ids cannot be discovered by searching. figma_create_a_webhook watches a team, project, or file, and Figma's own description notes those ids are not programmatically discoverable, so pull them from URLs first. The endpoint must be a publicly reachable https URL or Figma's ping fails.

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

ManualClawLink
Connection flowRegister 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 maintenanceYou 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 usabilityYou 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.

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 Hermes Agent 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 comparison.

Troubleshooting

Hermes paired but still can't use Figma

Pairing is a two-step handshake: run hermes clawlink begin, approve the link in your browser, then run hermes clawlink finish. If you ran finish before approving, or the approval link expired, run hermes clawlink begin again to get a fresh link. Confirm the plugin was installed with --enable, then verify with hermes clawlink test.

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 403 on one file while other Figma calls work

Search results will tell you to check your X-Figma-Token header, regenerate an expired personal access token, or confirm a scope name like file_content:read. None of that applies here, because there is no token and the scopes were fixed at consent time. What causes it on a hosted connection is simpler. Most often the file was never shared with the account you connected, so the agent reads everything else you own and fails on that one, which looks exactly like a bug. Open the file's Share settings and confirm the connected account is listed. The second cause is a guessed id: file keys come out of the URL after figma.com/file/ or figma.com/design/, and an agent that invents one gets a 403 or 404 on a healthy connection. Run figma_discover_figma_resources with the Figma link and use the key it returns. A third and rarer cause is an Enterprise-only endpoint, covered in the tool-not-found card below.

Ask the agent to diagnose it:

Run figma_get_current_user and tell me which Figma account is connected. Then run figma_discover_figma_resources with the URL I paste and show me the file key it returns before retrying anything.
Figma returns 429 "Rate limit exceeded"

Figma rate-limits its REST API per user, per plan, per app, and the tier that catches people is the read cap on Starter-plan files: Figma's documentation puts Tier 1 read endpoints, meaning get file, get file nodes, and get image, at 6 calls a month for View and Collab seats, while Dev and Full seats get roughly 10 to 20 requests a minute instead. That is Figma's budget rather than a ClawLink limit, and a personal access token against the same file would spend the same allowance. The response carries a Retry-After header, so waiting is the correct response. If you are on a paid seat, the practical fix is to stop pulling whole files: pass ids and depth to figma_get_file_json so you fetch one subtree at a time.

Ask the agent to diagnose it:

Report the exact status code and body of the last failed Figma call, including any Retry-After value. Do not retry it.
A Figma tool returns "tool not found", including figma_get_local_variables or figma_create_modify_delete_variables

If the tool name looks ordinary, the catalog had not loaded when the first call went out; schemas load on demand and retrying once usually resolves it. If the agent is asking specifically for variables tools, those are absent on purpose. Figma marks the file_variables read and write scopes as Enterprise-plan-only, so tools depending on them were removed rather than shipped in a state that fails for everyone below Enterprise. Design tokens still work without that scope: figma_extract_design_tokens reads styles and node-derived values on any plan. Note that this is a different failure from the one most search results describe, where a local Figma MCP server is missing from an editor's config file. There is no local server in this setup.

Ask the agent to diagnose it:

List the Figma tools you actually have available and tell me which one extracts design tokens. Use that name instead.
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.

FAQ

Is there a Hermes Agent Figma integration?

Yes. ClawLink is the fastest way to connect Hermes to Figma: link your Figma account once in the browser and Hermes Agent can call the Figma API through 37 ready-made tools — no custom code or token handling.

How do I connect Figma to Hermes with ClawLink?

Install the plugin with hermes plugins install ClawLink-HQ/hermes-plugin --enable, then pair once: run hermes clawlink begin, approve the link in your browser, and run hermes clawlink finish. Connect Figma in the dashboard and Hermes can use it from the next message — no config files or API keys to manage.

How long does it take to connect Figma to Hermes Agent?

About two minutes. Sign in, click Connect next to Figma in the dashboard, authenticate, and Hermes Agent 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 Hermes Agent. That is fine if you want to build and maintain the integration yourself. Most teams just want Figma working from chat.

Do I need a Figma personal access token for this?

No, and avoiding one is most of the point. A Figma personal access token acts on your account, in Figma's own words, as if it were the user who generated it: every file you can reach, no narrowing, and no expiry unless you set one. It also has to live somewhere, which in practice means a config file on whatever machine runs your agent. The ClawLink connection is an OAuth grant with 12 granular scopes covering file content and metadata, comments, projects and libraries, and webhooks. It shows up in your Figma settings under connected apps, and revoking it there ends the access immediately.

How is this different from Figma's own MCP server?

Figma's remote MCP server is a good product and it solves a different problem. It is a server you point an MCP client at, which suits editors like Cursor or Claude Code where the client is already an MCP host and you want design context inside the editor. This connection puts Figma tools directly into Hermes chat instead, with no server address to configure and nothing to keep running. The other practical difference is coverage: Figma's server is built around reading design context for code generation, while the tools here also post comments, create webhooks, extract design tokens, and render images.

What can the agent actually see in my Figma account?

Files that are shared with the account you connected, and nothing else. Figma's permission model is not overridden by OAuth scopes, so a file nobody shared with you stays invisible to the agent exactly as it is to you. Within that, the grant covers reading file content and metadata, reading and posting comments, reading projects and libraries, and creating webhooks. It does not include a canvas-write scope, so the agent cannot edit or create frames, and it does not include the variables or dev-resources scopes, which Figma marks as Enterprise-plan-only.

Do I have to turn on Dev Mode?

No. Dev Mode enablement and the local endpoint at 127.0.0.1:3845 belong to Figma's desktop MCP setup, which is what most "Figma MCP tool not found" results are about. This connection talks to the Figma REST API through ClawLink, so there is no desktop app requirement, no local port, and no client config to re-add when it stops working.

Hermes paired but still can't use Figma

Pairing is a two-step handshake: run hermes clawlink begin, approve the link in your browser, then run hermes clawlink finish. If you ran finish before approving, or the approval link expired, run hermes clawlink begin again to get a fresh link. Confirm the plugin was installed with --enable, then verify with hermes clawlink test.