home / skills / openclaw / skills / kai-tw-figma

kai-tw-figma skill

safe

This skill helps you read Figma file structures, export layers as images, and fetch comments via the Figma REST API for design insights.

npx playbooks add skill openclaw/skills --skill kai-tw-figma

Review the files below or copy the command above to add this skill to your agents.

Files (4)

SKILL.md

1.1 KB

---
name: figma
description: Interact with the Figma REST API to read files, export layers/components as images, and retrieve comments. Use when the user needs information from Figma designs or wants to export assets for development. Triggers include "read figma file", "export figma layer", or "check figma comments".
metadata:
  openclaw:
    emoji: 📐
    requires:
      env:
        - FIGMA_TOKEN
---

# Figma Skill

This skill allows the agent to interact with Figma files via the REST API.

## Setup

Requires a Figma Personal Access Token (PAT).
Environment Variable: `FIGMA_TOKEN`

## Procedures

### 1. Read File Structure
To understand the contents of a Figma file (pages, frames, layers):
`python scripts/figma_tool.py get-file <file_key>`

### 2. Export Images
To export specific layers/components as images:
`python scripts/figma_tool.py export <file_key> --ids <id1>,<id2> --format <png|jpg|svg|pdf> --scale <1|2|3|4>`

### 3. Check Comments
To list recent comments on a file:
`python scripts/figma_tool.py get-comments <file_key>`

## References
- [Figma API Documentation](https://www.figma.com/developers/api)

Overview

This skill connects to the Figma REST API to read file structure, export layers or components as images, and retrieve comments. It is designed for developers and designers who need to extract assets or inspect design metadata programmatically. A Figma Personal Access Token is required via the FIGMA_TOKEN environment variable.

How this skill works

The skill calls Figma API endpoints to fetch file JSON, list pages and layers, and query comments for a file key. It can request image exports for specific node IDs in PNG, JPG, SVG, or PDF formats at selectable scales. Commands run the corresponding API requests, download generated images, and present parsed structure or comment lists for further use.

When to use it

You need to inspect pages, frames, or layer hierarchies of a Figma file programmatically.
You want to export specific components or layers as image assets for development.
You need to pull recent comments or review discussion threads from a design file.
You are building build pipelines or automation that include design asset extraction.
You want to archive or back up design structure and assets from Figma.

Best practices

Store your Figma Personal Access Token in FIGMA_TOKEN and never hard-code it.
Request only the node IDs you need when exporting to reduce API usage and latency.
Use appropriate export scale (1, 2, 3, 4) to balance image quality and file size.
Paginate or filter comment queries for large files to avoid large payloads.
Cache file structure responses when possible to limit repeated API calls.

Example use cases

Generate production-ready PNG assets for specific UI components before a release.
List all frames and layers to create a design audit report or inventory.
Extract SVG icons from a design file to integrate into a web project.
Automate retrieval of recent comments for a designer handoff checklist.
Periodically back up file structure and exported assets for archival purposes.

FAQ

What credential is required to use the skill?

A Figma Personal Access Token must be set in the FIGMA_TOKEN environment variable.

Which export formats and scales are supported?

Exports support png, jpg, svg, and pdf formats, with scales commonly 1, 2, 3, or 4 to control resolution.