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.


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.
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.
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.
1Install and pair
Install the ClawLink plugin, then pair Hermes with a one-time browser approval:
hermes plugins install ClawLink-HQ/hermes-plugin --enable- 2
Connect Figma
One-click OAuth in the dashboard.
- 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 testThen 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 loginlogin 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.
What ClawLink does not do with Figma
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
| 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 |
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
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.
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/orfigma.com/design/, node ids come from the?node-id=123:456fragment, team ids followfigma.com/files/team/.figma_discover_figma_resourcestakes any of those links and returns the ids, and it has no required arguments beyond the URL. figma_get_file_jsonsimplifies by default.simplifydefaults to true, which converts the raw REST response into a smaller AI-friendly shape. Useidsanddepthto 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_fillsexpire 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_imagesrenders server-side, withscaledefaulting to 2 and output in png, svg, jpg, or pdf. For SVG,svg_outline_textandsvg_simplify_strokedefault to true; turn the first off if you want editable text paths.- Design-token extraction is styles-first.
figma_extract_design_tokensneeds onlyfile_key, andinclude_local_stylesdefaults to true. Variables stay out because the scope is Enterprise-only. - Comments can position themselves on the canvas.
figma_add_a_comment_to_a_filerequiresfile_keyandmessage; replies pass the parent'scomment_idand cannot nest further. Ifclient_metaplaces the comment, its region height and width must be positive. - Webhook ids cannot be discovered by searching.
figma_create_a_webhookwatches 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.
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 Hermes Agent. 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 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.
Related
Cloudinary
Cloudinary is a cloud-based media management platform for uploading, storing, transforming, and delivering images and videos via CDN.
Penpot
Open-source design and prototyping platform for collaborative design workflows.
Hermes Canva integration
Create designs, upload assets, export content, and manage brand templates