What is figma-bridge?

A read-only bridge to Figma, a tool for creating interface designs, that extracts design details such as colors, fonts, spacing, components, and exported assets.

Use it to retrieve design tokens, understand a Figma file's structure, inspect specific elements, and export visual assets for development.

It reduces the need to inspect designs manually or guess how a design should be implemented in code.

figma-bridge — Skill for Claude Code and Codex by vanthienha199

Install

Getting it into your agent

It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.

Clone the repo

git clone --depth 1 https://github.com/vanthienha199/openclaw-skills

agentmods

npx agentmods add skills/vanthienha199/openclaw-skills/figma-bridge

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/vanthienha199/openclaw-skills/figma-bridge/github.svg)](https://agentmods.dev/skills/vanthienha199/openclaw-skills/figma-bridge)

Your own site

<a href="https://agentmods.dev/skills/vanthienha199/openclaw-skills/figma-bridge"><img src="https://agentmods.dev/badge/skills/vanthienha199/openclaw-skills/figma-bridge/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/vanthienha199/openclaw-skills/figma-bridge"><img src="https://agentmods.dev/badge/skills/vanthienha199/openclaw-skills/figma-bridge.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 92 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 1,155 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 1 finding. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00092	$0.01155
Opus 5	$0.00046	$0.00577
Sonnet 5	$0.00018	$0.00231
Haiku 4.5	$0.00009	$0.00115

Measured 11d ago against content hash 49e9927a7093, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-11, from the pricing page.

Security

Grade A, and why

figma-bridge scanned grade A with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 11d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Makes network callslowCapability

Not a fault in itself. Listed so you know the mod talks to something, and to what.

curl -s "https://api.figma.com/v1/[endpoint]" \

figma-bridge/SKILL.md · 160 lines

How it starts

The opening of the file, as written. The whole thing — 160 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Figma Bridge

You extract design information from Figma and make it usable for development.

Setup

This skill requires a Figma Personal Access Token provided via environment variable.

Go to figma.com → Settings → Personal Access Tokens → Generate
Set as environment variable: export FIGMA_TOKEN="figd_..."

Credential Handling

Token is read from the FIGMA_TOKEN environment variable at runtime
This skill does NOT store tokens to disk
This skill is read-only — it never modifies your Figma files
If the token is missing, prompt the user to set the environment variable

Figma API

All calls use the Figma REST API:

curl -s "https://api.figma.com/v1/[endpoint]" \
  -H "X-Figma-Token: [TOKEN]"

Get file structure

curl -s "https://api.figma.com/v1/files/[FILE_KEY]" \
  -H "X-Figma-Token: [TOKEN]"

Get specific node

curl -s "https://api.figma.com/v1/files/[FILE_KEY]/nodes?ids=[NODE_ID]" \
  -H "X-Figma-Token: [TOKEN]"

Export assets

curl -s "https://api.figma.com/v1/images/[FILE_KEY]?ids=[NODE_IDS]&format=png&scale=2" \
  -H "X-Figma-Token: [TOKEN]"

Commands

"Get design tokens from [figma URL]"

Extract the file key from the URL, fetch styles, and output:

:root {
  /* Colors */
  --color-primary: #ff6b2b;
  --color-secondary: #22d3ee;
  --color-background: #0b1120;
  --color-text: #e2e8f0;

  /* Typography */
  --font-heading: 'Inter', sans-serif;
  --font-body: 'IBM Plex Mono', monospace;
  --font-size-h1: 2.5rem;
  --font-size-body: 1rem;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
}

"Show components in [figma URL]"

List all components with their properties:

## Components

### Button
- Variants: primary, secondary, ghost
- Sizes: sm, md, lg
- States: default, hover, disabled
- Properties: label (text), icon (instance), loading (boolean)

### Card
- Variants: default, elevated
- Properties: title (text), description (text), image (instance)

Read the full file on GitHub · 160 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

11d ago First seen · 160 lines · 92 tokens per session scan A 49e9927a7093

Subscribe to this mod's changes

figma-bridge is a skill published in the GitHub repository vanthienha199/openclaw-skills (1 stars, last pushed 5mo ago), licensed MIT. It adds 92 tokens to every session and 1,155 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Claude Code Design and UX agent-plugins agent-skills ai ai-agent components css design-system figma tokens ui

design-system

Document and define UI design system tokens, components, and guidelines.

furkangonel/cowrangler · 16 tokens

design-md

Author/validate/export Google's DESIGN.md token spec files.

mateaix/mateclaw · 14 tokens

frontend-ui-design

Use when design and build production-grade UI components using React, Vue, or vanilla HTML/CSS. Create responsive layouts, design systems, and accessible interfaces. Use when designing and build production-grade ui components using react, vue, or.

oyi77/1ai-skills · 51 tokens

frontend-design

Use this skill when specifying, designing, or documenting UI components, layouts, and design systems for frontend implementation. Trigger phrases: 'design this UI component', 'create a responsive layout', 'spec the CSS for', 'design system for'. Do NOT use for backend development, server-side logic, data engineering…

NickCrew/Claude-Cortex · 70 tokens

Design Token Enforcement

A code review check that finds hard-coded colors, spacing, font sizes, rounded corners, and shadows in frontend code when the project already provides design tokens. Design tokens are named shared values, such as a primary color or medium spacing.

s977043/river-review · 63 tokens

create-db-component

Creates a new DB UX Design System component with Mitosis source, SCSS, typed model, and Playwright tests.

db-ux-design-system/core-web · 29 tokens

figma-bridge