← 返回
未分类 中文

Figma

Read files, manage comments, extract design tokens, download images, and create webhooks in Figma via the Figma REST API. Use this skill when users want to i...
Read files, manage comments, extract design tokens, download images, and create webhooks in Figma via the Figma REST API. Use this skill when users want to i...
hith3sh hith3sh 来源
未分类 clawhub v1.0.6 2 版本 99936.9 Key: 无需
★ 6
Stars
📥 1,463
下载
💾 2
安装
2
版本
#latest

概述

Figma

!Figma

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.

Setup in 3 Steps

Step 1: InstallStep 2: Pair AccountStep 3: Connect Figma
:---::---::---:
!Install!PairApp-specific connection GIF coming soon
Run the install command in OpenClawSign in and approve the deviceOpen the dashboard and connect Figma

How It Works

┌─────────────────┐     ┌──────────────┐     ┌──────────────────┐
│   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

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

Quick Start

# 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"}'

Authentication

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.

Getting Connected

  1. Install the ClawLink plugin (see Install above).
  2. Pair the plugin with clawlink_begin_pairing if it is not configured yet.
  3. Open https://claw-link.dev/dashboard?add=figma and connect Figma.
  4. Call clawlink_list_integrations to verify the connection is active.

Connection Management

List Connections

clawlink_list_integrations

Response: Returns all connected integrations. Look for figma in the list.

Verify Connection

clawlink_list_tools --integration figma

Response: Returns the live tool catalog for Figma.

Reconnect

If Figma tools are missing or the connection shows an error:

  1. Direct the user to https://claw-link.dev/dashboard?add=figma
  2. After they confirm, call clawlink_list_integrations to verify
  3. Then call clawlink_list_tools --integration figma

Security & Permissions

  • Access is scoped to Figma files, comments, and resources accessible to the connected Figma account.
  • All write operations require explicit user confirmation. Before executing any create, update, or delete call, confirm the target resource and intended effect with the user.
  • Destructive actions (delete comment, delete webhook, delete reaction) are marked as high-impact and must be confirmed.
  • Webhook creation requires team admin permissions for team-level webhooks, or edit access for project/file-level webhooks.

Tool Reference

File & Resource Discovery

ToolDescriptionMode
-------------------------
figma_discover_figma_resourcesExtract file_key, node IDs, team_id, and project_id from any Figma URLRead
figma_get_file_metadataGet file name, creator, last modified, thumbnail, and access infoRead
figma_get_current_userGet authenticated Figma user detailsRead

File Content

ToolDescriptionMode
-------------------------
figma_get_file_jsonGet full Figma design file JSON with automatic simplificationRead
figma_get_file_nodesFetch JSON for specific node IDs from a fileRead
figma_get_file_stylesList published styles (colors, text, effects, grids) from a main fileRead
figma_get_file_componentsList published components from a library fileRead
figma_get_file_component_setsList published component sets from a main fileRead

Comments & Reactions

ToolDescriptionMode
-------------------------
figma_get_comments_in_a_fileGet all comments from a file with author, position, and reactionsRead
figma_add_a_comment_to_a_filePost a new comment or reply to an existing root commentWrite
figma_delete_a_commentDelete a comment (must be original author)Write
figma_add_a_reaction_to_a_commentAdd an emoji reaction to an existing commentWrite
figma_delete_a_reactionRemove an emoji reaction from a commentWrite
figma_get_reactions_for_a_commentGet all reactions for a specific commentRead

Assets & Export

ToolDescriptionMode
-------------------------
figma_download_figma_imagesDownload images from file nodes (PNG, SVG, JPG, PDF)Read
figma_render_images_of_file_nodesRender nodes as images with format and scale optionsRead
figma_get_image_fillsGet temporary download URLs for all image fills in a fileRead

Design Tokens

ToolDescriptionMode
-------------------------
figma_extract_design_tokensExtract design tokens (styles, variables) from a Figma fileRead
figma_design_tokens_to_tailwindConvert extracted design tokens to Tailwind CSS configRead

Webhooks

ToolDescriptionMode
-------------------------
figma_create_a_webhookCreate a webhook for file, project, or team eventsWrite
figma_get_a_webhookGet details for a specific webhookRead
figma_get_team_webhooksList all webhooks for a team, project, or file contextRead
figma_update_a_webhookUpdate webhook endpoint, event type, or statusWrite
figma_delete_a_webhookPermanently delete a webhookWrite
figma_get_webhook_requestsGet webhook request history (last 7 days)Read

Teams & Projects

ToolDescriptionMode
-------------------------
figma_get_projects_in_a_teamList projects in a Figma teamRead
figma_get_files_in_a_projectList files in a Figma projectRead
figma_get_team_componentsList published components from a team's libraryRead
figma_get_team_stylesList published styles from a team's libraryRead
figma_get_team_component_setsList published component sets from a team's libraryRead

Code Examples

Discover resources from a Figma URL

clawlink_call_tool --tool "figma_discover_figma_resources" \
  --params '{
    "figma_url": "https://www.figma.com/file/ABC123xyz/MyDesign"
  }'

Get file JSON and extract a specific node

clawlink_call_tool --tool "figma_get_file_json" \
  --params '{
    "file_key": "ABC123xyz"
  }'

Download an image from a file node

clawlink_call_tool --tool "figma_download_figma_images" \
  --params '{
    "file_key": "ABC123xyz",
    "images": [
      {
        "node_id": "1:2",
        "file_name": "logo.png",
        "format": "png"
      }
    ]
  }'

Post a comment on a file

clawlink_call_tool --tool "figma_add_a_comment_to_a_file" \
  --params '{
    "file_key": "ABC123xyz",
    "comment": {
      "text": "Please review the updated hero section"
    }
  }'

Extract design tokens and convert to Tailwind

# 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": {...} }
  }'

Discovery Workflow

  1. Call clawlink_list_integrations to confirm Figma is connected.
  2. Call clawlink_list_tools --integration figma to see the live catalog.
  3. Treat the returned list as the source of truth. Do not guess or assume what tools exist.
  4. If the user describes a capability but the exact tool is unclear, call clawlink_search_tools with a short query and integration figma.
  5. If no Figma tools appear, direct the user to https://claw-link.dev/dashboard?add=figma.

Execution Workflow

┌─────────────────────────────────────────────────────────────┐
│  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                                     │
└─────────────────────────────────────────────────────────────┘
  1. For unfamiliar tools, ambiguous requests, or any write action, call clawlink_describe_tool first.
  2. Use the returned guidance, schema, whenToUse, askBefore, safeDefaults, examples, and followups to shape the call.
  3. Prefer read, list, search, and get operations before writes when that reduces ambiguity.
  4. For writes or anything marked as requiring confirmation, call clawlink_preview_tool first.
  5. Execute with clawlink_call_tool. Pass confirmation only after the preview matches the user's intent.
  6. If the tool call fails, report the real error. Do not invent results or restate the failure as a missing capability unless the live catalog supports that conclusion.

Notes

  • Only Design files (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 IDs can be found in Figma URLs after node-id=, or from the figma_get_file_json response.
  • Downloaded image URLs expire after 14 days; download images immediately after generation.
  • Webhook team_id, project_id, and file_key cannot be discovered via API — extract them from Figma URLs or use figma_discover_figma_resources.
  • Comment replies cannot be nested; replies attach to existing root comments only.
  • Design tokens not encoded as Figma styles or variables are silently omitted by figma_extract_design_tokens.

Error Handling

Status / ErrorMeaning
-------------------------
Tool not foundThe tool name does not exist in the current catalog. Verify with clawlink_list_tools --integration figma.
Missing connectionFigma is not connected. Direct the user to https://claw-link.dev/dashboard?add=figma.
400 File type not supportedFile is a FigJam board or Slides file, not a Design file. Only Design files work with get_file_json.
404 Not FoundFile key, node ID, or webhook does not exist or is not accessible to the authenticated user.
403 ForbiddenInsufficient permissions for the requested operation (e.g., team admin required for team webhooks).
Write rejectedUser did not confirm a write action. Always confirm before executing writes.

Troubleshooting: Tools Not Visible

  1. Check that the ClawLink plugin is installed:

```bash

openclaw plugins list

```

  1. If the plugin is installed but tools are missing, tell the user to send /new as a standalone message to reload the catalog.
  2. If a fresh chat does not help, run:

```bash

openclaw config set tools.alsoAllow '["clawlink-plugin"]' --strict-json

openclaw gateway restart

```

  1. After restart, tell the user to send /new again and retry.

Troubleshooting: Invalid Tool Call

  1. Ensure the integration slug is exactly figma.
  2. Use clawlink_describe_tool to verify parameter names and types before calling.
  3. For write operations, always call clawlink_preview_tool first.

Resources

Related Skills


Powered by ClawLink — an integration hub for OpenClaw

!ClawLink Logo

版本历史

共 2 个版本

  • v1.0.6 当前
    2026-06-09 16:15 安全 安全
  • v0.1.0
    2026-05-08 02:29 安全 安全

安全检测

腾讯云安全 (Keen)

安全,无风险
查看报告

腾讯云安全 (Sanbu)

安全,无风险
查看报告

🔗 相关推荐

design-media

Nano Banana Pro

steipete
使用 Nano Banana Pro (Gemini 3 Pro Image) 生成或编辑图像。支持文生图、图生图及 1K/2K/4K 分辨率,适用于图像创建、修改及编辑请求,使用 --input-image 指定输入图像。
★ 429 📥 116,694
dev-programming

GitHub

hith3sh
通过 GitHub REST 和GraphQL API 与仓库、议题、拉取请求、提交、分支、发布和工作流进行交互。在需要时使用此技能。
★ 6 📥 1,958
design-media

UI/UX Pro Max

xobi667
提供 UI/UX 设计智能与实现指导,帮助打造精美界面。适用于 UI 设计、UX 流程、信息架构、视觉风格、设计系统/标记、组件规格、文案/微文案、无障碍及前端 UI(HTML/CSS/JS、React、Next.js、Vue、Svelte
★ 216 📥 47,226