OpenClaw Figma Skill: Extract Design Tokens and Assets with AI

A designer hands you a Figma link. You need the color palette, typography scale, spacing values, and a handful of icon exports. In the Figma app, that means clicking into each frame, inspecting properties one at a time, copying hex values into a spreadsheet, and exporting assets through the export dialog. For a small design system, this takes thirty minutes. For a large one, it takes the better part of a day.

The OpenClaw figma skill automates that entire process. Send your agent a Figma file URL and it extracts design tokens, exports assets, and returns structured data you can feed directly into your codebase. What used to be manual inspection becomes a single conversation.

This article covers what the figma skill does, how to set it up, and how to build a design-to-code pipeline around it.

What the Figma Skill Does

The figma skill, built by maddiedreese, connects your OpenClaw agent to the Figma API. It performs professional-grade design analysis and asset export without opening the Figma application.

Core capabilities:

• Design token extraction — Pull colors, typography, spacing, border radii, and shadows from any Figma file
• Asset export — Export frames, components, and icons as PNG, SVG, JPG, or PDF
• Component analysis — Map component hierarchies, variants, and auto-layout properties
• Style inspection — Read fill styles, stroke styles, text styles, and effect styles
• Layout data — Extract auto-layout settings, constraints, and responsive behavior
• File navigation — Browse pages, frames, and layers within a Figma file

The skill reads Figma files through the official REST API. It does not modify your designs. All operations are read-only, so there is no risk of accidentally changing a production file.

Manual Figma Export vs. OpenClaw Figma Skill

Before diving into the setup, here is a direct comparison of what each approach involves.

The manual approach works fine for a one-off inspection of three or four elements. For anything larger, or anything you need to repeat when designs change, the figma skill saves significant time.

What You Need

1. OpenClaw installed — Follow the Getting Started guide if you have not set up OpenClaw yet.

2. A Figma access token — Generate one at figma.com/developers under Personal Access Tokens. The token needs read access to the files you want to analyze.

3. A Figma file URL — Any file you have view access to. The URL looks like https://www.figma.com/file/XXXXX/File-Name.

No Figma paid plan is required for basic API access. The Figma API is available on all plans including the free tier, though rate limits differ.

Installation

Install the figma skill from ClawHub:

clawhub install figma

Set your Figma access token:

export FIGMA_ACCESS_TOKEN=your-token-here

Add this to your shell profile (~/.bashrc or ~/.zshrc) so it persists across sessions.

Verify the skill is loaded:

openclaw skills list

You should see figma in the list. The skill is ready to use.

Alternative: figma-design-toolkit

There is also a figma-design-toolkit skill in the ecosystem. It provides similar functionality with a different API surface. For most users, the figma skill by maddiedreese is the better starting point — it has broader coverage and more active maintenance. If you need specific features from the toolkit, you can install both without conflicts.

Extracting Design Tokens

Design tokens are the foundational values of a design system: colors, typography, spacing, shadows, and border radii. The figma skill extracts all of them from a Figma file.

Colors

Ask your agent:

Extract all color styles from https://www.figma.com/file/XXXXX/Design-System

The skill returns structured color data:

{
  "colors": [
    {
      "name": "primary/500",
      "hex": "#2563EB",
      "rgba": { "r": 37, "g": 99, "b": 235, "a": 1 },
      "style_id": "S:abc123"
    },
    {
      "name": "neutral/100",
      "hex": "#F3F4F6",
      "rgba": { "r": 243, "g": 244, "b": 246, "a": 1 },
      "style_id": "S:def456"
    }
  ]
}

This covers every published color style in the file. You get the style name, hex value, RGBA breakdown, and the Figma style ID for reference.

Typography

Extract typography tokens from the design system file

Returns:

{
  "typography": [
    {
      "name": "heading/h1",
      "fontFamily": "Inter",
      "fontSize": 48,
      "fontWeight": 700,
      "lineHeight": 56,
      "letterSpacing": -0.02
    },
    {
      "name": "body/regular",
      "fontFamily": "Inter",
      "fontSize": 16,
      "fontWeight": 400,
      "lineHeight": 24,
      "letterSpacing": 0
    }
  ]
}

Each typography token includes font family, size, weight, line height, and letter spacing. These map directly to CSS properties or design token formats like style-dictionary.

Spacing

Extract spacing values from all auto-layout frames

The skill analyzes auto-layout properties across the file:

{
  "spacing": [
    { "name": "gap/sm", "value": 8 },
    { "name": "gap/md", "value": 16 },
    { "name": "gap/lg", "value": 24 },
    { "name": "padding/card", "horizontal": 24, "vertical": 16 },
    { "name": "padding/section", "horizontal": 64, "vertical": 48 }
  ]
}

Shadows and Effects

Extract shadow and effect styles from the design system

{
  "effects": [
    {
      "name": "shadow/sm",
      "type": "DROP_SHADOW",
      "offset": { "x": 0, "y": 1 },
      "radius": 3,
      "spread": 0,
      "color": { "hex": "#00000026" }
    },
    {
      "name": "shadow/lg",
      "type": "DROP_SHADOW",
      "offset": { "x": 0, "y": 10 },
      "radius": 25,
      "spread": -5,
      "color": { "hex": "#0000001A" }
    }
  ]
}

All Tokens at Once

For a complete extraction:

Extract all design tokens from https://www.figma.com/file/XXXXX/Design-System

This returns colors, typography, spacing, effects, and border radii in a single structured response. Useful when you want to generate a complete token file in one pass.

Exporting Assets

Beyond tokens, the figma skill exports visual assets from your Figma files.

Export Specific Components

Export the "icon/arrow-right" component as SVG from the design system file

The skill locates the component by name, exports it at the specified format, and returns the file.

Batch Export by Pattern

Export all components matching "icon/*" as SVG at 1x scale

This finds every component whose name starts with “icon/” and exports them all. For a design system with 80 icons, this runs in under a minute — compared to selecting and exporting each one manually.

Export Frames as Images

Export the "Homepage Hero" frame as PNG at 2x scale

Useful for generating preview images, social media assets, or documentation screenshots directly from Figma.

Supported Export Formats

Building a Design-to-Code Pipeline

The real power of the figma skill is not individual extractions. It is building a repeatable pipeline that keeps your codebase in sync with design updates.

Step 1: Extract Tokens to JSON

Ask your agent to extract tokens and save them:

Extract all design tokens from the design system file and format them as a style-dictionary compatible JSON file

The output follows the style-dictionary format:

{
  "color": {
    "primary": {
      "500": { "value": "#2563EB" },
      "600": { "value": "#1D4ED8" }
    },
    "neutral": {
      "100": { "value": "#F3F4F6" },
      "900": { "value": "#111827" }
    }
  },
  "font": {
    "family": {
      "heading": { "value": "Inter" },
      "body": { "value": "Inter" }
    },
    "size": {
      "h1": { "value": "48px" },
      "body": { "value": "16px" }
    }
  }
}

Step 2: Generate CSS Variables

From the JSON tokens, generate CSS custom properties:

:root {
  --color-primary-500: #2563EB;
  --color-primary-600: #1D4ED8;
  --color-neutral-100: #F3F4F6;
  --color-neutral-900: #111827;
  --font-family-heading: 'Inter';
  --font-family-body: 'Inter';
  --font-size-h1: 48px;
  --font-size-body: 16px;
}

Step 3: Export and Optimize Assets

Export all icon components as SVG, optimize them with SVGO, and save to ./src/assets/icons/

The skill handles the export. Your agent can then run SVGO or any other optimization tool on the results.

Step 4: Automate the Update Cycle

When designers push changes to the Figma file:

1. Re-run the token extraction command
2. Diff the new tokens against your current token file
3. Update only the values that changed
4. Export any new or modified assets

This keeps your codebase in sync without manual inspection. The entire update cycle takes minutes instead of hours.

Integration with Development Workflows

The figma skill works well alongside other OpenClaw skills for a complete development workflow.

Pair with Development Skills

• Use diagram-gen to visualize component hierarchies extracted from Figma
• Use neondb-skill to store design tokens in a database for multi-project access
• Browse development skills for tools that complement design workflows

Pair with Media Skills

• Use fal-ai to generate placeholder images based on Figma frame dimensions
• Use smart-ocr to extract text from design mockup screenshots
• Browse media skills for image and asset processing tools

CI/CD Integration

Run the figma skill as part of your build pipeline:

1. Before each build, extract current tokens from Figma
2. Compare with the tokens checked into your repository
3. Fail the build if tokens are out of date
4. Auto-update if you want continuous sync

This works because the figma skill produces deterministic output. Same file, same tokens. You can diff the results reliably.

Understanding Figma API Limits

The Figma API has rate limits that affect how you use the skill.

For most individual developers, the rate limits are not an issue. If you are running extractions as part of a build pipeline for a large team, consider caching token results and only re-extracting when the Figma file version changes.

The skill checks the file version before performing a full extraction. If the file has not changed since the last run, it can skip the extraction entirely.

Troubleshooting

”Access token invalid”

Your Figma personal access token may have expired or been revoked. Generate a new one at figma.com/developers and update your environment variable.

”File not found”

Check that your Figma file URL is correct and that your access token has permission to view the file. Files in private teams require a token from a team member.

”Rate limit exceeded”

Wait a few minutes and retry. If this happens frequently, reduce the number of concurrent extractions or upgrade your Figma plan.

Empty Token Results

Some Figma files do not use published styles. The skill extracts published color styles, text styles, and effect styles. If the designer applied colors directly to elements without creating styles, those values will not appear in the token extraction. Ask the designer to publish their styles in Figma.

What to Try Next

Once you have the figma skill running:

• Build a token pipeline — Set up automated extraction that runs when your Figma file updates
• Combine with asset optimization — Pipe exported SVGs through SVGO for production-ready icons
• Explore the figma skill page — Visit figma on Claw Directory for the full skill documentation
• Browse related skills — Check media skills and development skills for tools that complement design workflows
• Read the best skills guide — See Best OpenClaw Skills 2026 for our top picks across every category

FAQ

Does the figma skill modify my Figma files?

No. All operations are read-only. The skill uses the Figma REST API to read file data and export assets. It cannot create, edit, or delete anything in your Figma account.

Can I extract tokens from a specific page or frame?

Yes. You can specify a page name or frame ID when requesting an extraction. This is useful for large files where you only need tokens from a specific section, like a “Tokens” or “Design System” page.

How does this compare to Figma’s built-in Variables feature?

Figma Variables (introduced in 2023) store design tokens natively inside Figma. The figma skill can extract these variables through the API, but it also works with older files that use published styles instead of variables. If your team uses Variables, the skill reads them. If your team uses the older style-based approach, the skill reads those too.

Do I need a paid Figma account?

No. The Figma API is available on all plans, including the free Starter plan. Rate limits are lower on free plans, but for occasional use — extracting tokens once a week, exporting assets when designs change — the free tier is sufficient.

Can multiple team members use the same Figma access token?

Figma personal access tokens are tied to individual accounts. Each team member should generate their own token. For CI/CD pipelines, create a dedicated Figma service account and use that token.

Summary

The OpenClaw figma skill turns Figma from a visual tool into a data source. Instead of manually inspecting designs and copying values, you extract structured tokens and assets programmatically.

Install the skill:

clawhub install figma

Set your token:

export FIGMA_ACCESS_TOKEN=your-token-here

Then send your agent a Figma URL and tell it what you need. The manual inspection days are over.

For the complete skill documentation, visit the figma skill page. For more design and media tools, browse the media skills category.