Access Figma via the Figma API with OAuth authentication. Read files, manage comments, extract design tokens, download images, and create webhooks for file event notifications.
This skill uses ClawLink for hosted connection flows and credentials so you do not need to configure Figma API access yourself.
| Step 1: Install | Step 2: Pair Account | Step 3: Connect Figma |
|---|---|---|
| :---: | :---: | :---: |
| !Install | !Pair | App-specific connection GIF coming soon |
| Run the install command in OpenClaw | Sign in and approve the device | Open the dashboard and connect Figma |
┌─────────────────┐ ┌──────────────┐ ┌──────────────────┐
│ OpenClaw │────▶│ ClawLink │────▶│ Figma API │
│ (User Chat) │ │ (OAuth) │ │ (REST) │
└─────────────────┘ └──────────────┘ └──────────────────┘
│ │ │
│ 1. Install Plugin │ │
│ 2. Pair Device │ │
│ 3. Connect Figma │ │
│ │ 4. Secure Token │
│ │ 5. Proxy Requests │
│ │ │
▼ ▼ ▼
┌──────────┐ ┌──────────┐ ┌──────────┐
│ SKILL │ │ Dashboard│ │ Figma │
│ File │ │ Auth │ │ Files │
└──────────┘ └──────────┘ └──────────┘
Install the verified ClawLink plugin from ClawHub. After the user confirms, complete the full setup so ClawLink tools are visible in the next OpenClaw chat.
openclaw plugins install clawhub:clawlink-plugin
openclaw config set tools.alsoAllow '["clawlink-plugin"]' --strict-json
openclaw gateway restart
Then tell the user: "OpenClaw has been restarted. Send /new as a standalone message to start a fresh chat, then ask for Figma again."
# Get current authenticated Figma user
clawlink_call_tool --tool "figma_get_current_user" --params '{}'
# Discover file key and node IDs from a Figma URL
clawlink_call_tool --tool "figma_discover_figma_resources" --params '{"figma_url": "https://www.figma.com/file/ABC123xyz/MyFile"}'
# Get file JSON for a Figma design file
clawlink_call_tool --tool "figma_get_file_json" --params '{"file_key": "ABC123xyz"}'
All Figma tool calls are authenticated automatically by ClawLink using the user's connected Figma account.
No API key is required in chat. ClawLink stores the OAuth token securely and injects it into every Figma API request on the user's behalf.
clawlink_begin_pairing if it is not configured yet.clawlink_list_integrations to verify the connection is active.clawlink_list_integrations
Response: Returns all connected integrations. Look for figma in the list.
clawlink_list_tools --integration figma
Response: Returns the live tool catalog for Figma.
If Figma tools are missing or the connection shows an error:
clawlink_list_integrations to verifyclawlink_list_tools --integration figma| Tool | Description | Mode |
|---|---|---|
| ------ | ------------- | ------ |
figma_discover_figma_resources | Extract file_key, node IDs, team_id, and project_id from any Figma URL | Read |
figma_get_file_metadata | Get file name, creator, last modified, thumbnail, and access info | Read |
figma_get_current_user | Get authenticated Figma user details | Read |
| Tool | Description | Mode |
|---|---|---|
| ------ | ------------- | ------ |
figma_get_file_json | Get full Figma design file JSON with automatic simplification | Read |
figma_get_file_nodes | Fetch JSON for specific node IDs from a file | Read |
figma_get_file_styles | List published styles (colors, text, effects, grids) from a main file | Read |
figma_get_file_components | List published components from a library file | Read |
figma_get_file_component_sets | List published component sets from a main file | Read |
| Tool | Description | Mode |
|---|---|---|
| ------ | ------------- | ------ |
figma_get_comments_in_a_file | Get all comments from a file with author, position, and reactions | Read |
figma_add_a_comment_to_a_file | Post a new comment or reply to an existing root comment | Write |
figma_delete_a_comment | Delete a comment (must be original author) | Write |
figma_add_a_reaction_to_a_comment | Add an emoji reaction to an existing comment | Write |
figma_delete_a_reaction | Remove an emoji reaction from a comment | Write |
figma_get_reactions_for_a_comment | Get all reactions for a specific comment | Read |
| Tool | Description | Mode |
|---|---|---|
| ------ | ------------- | ------ |
figma_download_figma_images | Download images from file nodes (PNG, SVG, JPG, PDF) | Read |
figma_render_images_of_file_nodes | Render nodes as images with format and scale options | Read |
figma_get_image_fills | Get temporary download URLs for all image fills in a file | Read |
| Tool | Description | Mode |
|---|---|---|
| ------ | ------------- | ------ |
figma_extract_design_tokens | Extract design tokens (styles, variables) from a Figma file | Read |
figma_design_tokens_to_tailwind | Convert extracted design tokens to Tailwind CSS config | Read |
| Tool | Description | Mode |
|---|---|---|
| ------ | ------------- | ------ |
figma_create_a_webhook | Create a webhook for file, project, or team events | Write |
figma_get_a_webhook | Get details for a specific webhook | Read |
figma_get_team_webhooks | List all webhooks for a team, project, or file context | Read |
figma_update_a_webhook | Update webhook endpoint, event type, or status | Write |
figma_delete_a_webhook | Permanently delete a webhook | Write |
figma_get_webhook_requests | Get webhook request history (last 7 days) | Read |
| Tool | Description | Mode |
|---|---|---|
| ------ | ------------- | ------ |
figma_get_projects_in_a_team | List projects in a Figma team | Read |
figma_get_files_in_a_project | List files in a Figma project | Read |
figma_get_team_components | List published components from a team's library | Read |
figma_get_team_styles | List published styles from a team's library | Read |
figma_get_team_component_sets | List published component sets from a team's library | Read |
clawlink_call_tool --tool "figma_discover_figma_resources" \
--params '{
"figma_url": "https://www.figma.com/file/ABC123xyz/MyDesign"
}'
clawlink_call_tool --tool "figma_get_file_json" \
--params '{
"file_key": "ABC123xyz"
}'
clawlink_call_tool --tool "figma_download_figma_images" \
--params '{
"file_key": "ABC123xyz",
"images": [
{
"node_id": "1:2",
"file_name": "logo.png",
"format": "png"
}
]
}'
clawlink_call_tool --tool "figma_add_a_comment_to_a_file" \
--params '{
"file_key": "ABC123xyz",
"comment": {
"text": "Please review the updated hero section"
}
}'
# Step 1: Extract tokens
clawlink_call_tool --tool "figma_extract_design_tokens" \
--params '{
"file_key": "ABC123xyz"
}'
# Step 2: Convert to Tailwind config (pass returned tokens)
clawlink_call_tool --tool "figma_design_tokens_to_tailwind" \
--params '{
"tokens": { "$schema": "...", "colors": {...} }
}'
clawlink_list_integrations to confirm Figma is connected.clawlink_list_tools --integration figma to see the live catalog.clawlink_search_tools with a short query and integration figma.┌─────────────────────────────────────────────────────────────┐
│ READ OPERATIONS (Safe) │
│ list → get → search → describe → call │
│ │
│ Example: Discover file → Get JSON → Extract nodes │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ WRITE OPERATIONS (Require Confirmation) │
│ list → get → describe → preview → confirm → call │
│ │
│ Example: Describe tool → Preview comment → User approves │
│ → Execute post │
└─────────────────────────────────────────────────────────────┘
clawlink_describe_tool first.whenToUse, askBefore, safeDefaults, examples, and followups to shape the call.clawlink_preview_tool first.clawlink_call_tool. Pass confirmation only after the preview matches the user's intent.figma.com/design/...) are supported by figma_get_file_json. FigJam boards (figma.com/board/...) and Slides (figma.com/slides/...) return a 400 error.node-id=, or from the figma_get_file_json response.team_id, project_id, and file_key cannot be discovered via API — extract them from Figma URLs or use figma_discover_figma_resources.figma_extract_design_tokens.| Status / Error | Meaning |
|---|---|
| ---------------- | --------- |
| Tool not found | The tool name does not exist in the current catalog. Verify with clawlink_list_tools --integration figma. |
| Missing connection | Figma is not connected. Direct the user to https://claw-link.dev/dashboard?add=figma. |
400 File type not supported | File is a FigJam board or Slides file, not a Design file. Only Design files work with get_file_json. |
404 Not Found | File key, node ID, or webhook does not exist or is not accessible to the authenticated user. |
403 Forbidden | Insufficient permissions for the requested operation (e.g., team admin required for team webhooks). |
| Write rejected | User did not confirm a write action. Always confirm before executing writes. |
```bash
openclaw plugins list
```
/new as a standalone message to reload the catalog.```bash
openclaw config set tools.alsoAllow '["clawlink-plugin"]' --strict-json
openclaw gateway restart
```
/new again and retry.figma.clawlink_describe_tool to verify parameter names and types before calling.clawlink_preview_tool first.Powered by ClawLink — an integration hub for OpenClaw
共 2 个版本