#601

Global Rank · of 601 Skills

figma-developer AI Agent Skill

View Source: oakoss/agent-skills

Medium

Installation

npx skills add oakoss/agent-skills --skill figma-developer

35

Installs

Figma Developer

Overview

Automates the Figma-to-code bridge using the Figma REST API. Extracts design tokens (colors, typography, spacing) as CSS variables and JSON, exports icons as SVG React components, generates React components from Figma node structures, and sets up CI pipelines for continuous design sync.

When to use: Syncing design tokens from Figma to code, exporting icon sets as React components, generating component scaffolding from Figma variants, setting up automated design sync in CI.

When NOT to use: Manual one-off design tweaks (just copy values), Figma plugin development (use the Plugin API instead), real-time collaborative editing (use Figma webhooks directly), or projects without a Figma design system.

Quick Reference

Pattern API / Approach Key Points
Get file data GET /v1/files/:key Returns full document tree with styles and fills
Get specific nodes GET /v1/files/:key/nodes?ids=... Fetch only the nodes you need to reduce payload
Export images GET /v1/images/:key?ids=...&format=svg Renders nodes as SVG/PNG/PDF; URLs expire in 14 days
Get styles GET /v1/files/:key/styles Lists all published color, text, and effect styles
Get components GET /v1/files/:key/components Lists all published components with metadata
Get component sets GET /v1/files/:key/component_sets Returns variant groupings for components
Get variables GET /v1/files/:key/variables/local Extracts Figma Variables (colors, spacing, etc.)
Publish variables POST /v1/variables Publishes local variables organization-wide
Token extraction Parse styles from file response, transform to CSS/JSON No built-in "extract tokens" endpoint exists
CI sync GitHub Actions cron + peter-evans/create-pull-request Auto-sync PRs on Figma file changes

Figma File Organization

Section Contents
Colors All color styles with / hierarchy (Primary/500)
Typography Text styles (Heading/Large, Body/Regular)
Spacing Spacing guide values
Components Variant groups (Button/Primary, Card/Default)
Icons All icons in one exportable frame

Common Mistakes

Mistake Fix
Using fabricated API methods like extractDesignTokens() Parse styles from GET /v1/files/:key response manually
Hardcoding Figma values instead of using tokens Extract tokens to CSS variables, reference with var()
Not normalizing Figma style names Lowercase + replace special chars with hyphens
Forgetting Figma uses 0-1 RGB not 0-255 Multiply by 255 and round before hex conversion
No API response caching Cache with TTL to avoid rate limits
Manual icon exports Automate with GET /v1/images/:key + React component generation
No CI sync workflow GitHub Actions cron + create-pull-request action
Using expired image URLs Image export URLs expire in 14 days; re-fetch before use

Libraries

Package Purpose
figma-api Community Figma REST API client (typed)
@figma/rest-api-spec Official TypeScript types for Figma API
style-dictionary Transform design tokens across platforms
svgo Optimize exported SVGs before use
@svgr/core Convert SVG files to React components

Delegation

  • Design systems: see design-system skill
  • Asset optimization: see asset-manager skill

References

Installs

Installs 35
Global Rank #601 of 601

Security Audit

ath Safe
socket Safe
Alerts: 0 Score: 90
snyk Medium
EU EU-Hosted Inference API

Power your AI Agents with the best open-source models.

Drop-in OpenAI-compatible API. No data leaves Europe.

Explore Inference API

GLM

GLM 5

$1.00 / $3.20

per M tokens

Kimi

Kimi K2.5

$0.60 / $2.80

per M tokens

MiniMax

MiniMax M2.5

$0.30 / $1.20

per M tokens

Qwen

Qwen3.5 122B

$0.40 / $3.00

per M tokens

How to use this skill

1

Install figma-developer by running npx skills add oakoss/agent-skills --skill figma-developer in your project directory. Run the install command above in your project directory. The skill file will be downloaded from GitHub and placed in your project.

2

No configuration needed. Your AI agent (Claude Code, Cursor, Windsurf, etc.) automatically detects installed skills and uses them as context when generating code.

3

The skill enhances your agent's understanding of figma-developer, helping it follow established patterns, avoid common mistakes, and produce production-ready output.

What you get

Skills are plain-text instruction files — not executable code. They encode expert knowledge about frameworks, languages, or tools that your AI agent reads to improve its output. This means zero runtime overhead, no dependency conflicts, and full transparency: you can read and review every instruction before installing.

Compatibility

This skill works with any AI coding agent that supports the skills.sh format, including Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider, and other tools that read project-level context files. Skills are framework-agnostic at the transport level — the content inside determines which language or framework it applies to.

Data sourced from the skills.sh registry and GitHub. Install counts and security audits are updated regularly.

EU Made in Europe

Chat with 100+ AI Models in one App.

Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.

Start for free View pricing
Customer Support