#601

Globales Ranking · von 601 Skills

figma-developer AI Agent Skill

Quellcode ansehen: oakoss/agent-skills

Medium

Installation

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

35

Installationen

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

Installationen

Installationen 35
Globales Ranking #601 von 601

Sicherheitsprüfung

ath Safe
socket Safe
Warnungen: 0 Bewertung: 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

So verwenden Sie diesen Skill

1

Install figma-developer by running npx skills add oakoss/agent-skills --skill figma-developer in your project directory. Führen Sie den obigen Installationsbefehl in Ihrem Projektverzeichnis aus. Die Skill-Datei wird von GitHub heruntergeladen und in Ihrem Projekt platziert.

2

Keine Konfiguration erforderlich. Ihr KI-Agent (Claude Code, Cursor, Windsurf usw.) erkennt installierte Skills automatisch und nutzt sie als Kontext bei der Code-Generierung.

3

Der Skill verbessert das Verständnis Ihres Agenten für figma-developer, und hilft ihm, etablierte Muster zu befolgen, häufige Fehler zu vermeiden und produktionsreifen Code zu erzeugen.

Was Sie erhalten

Skills sind Klartext-Anweisungsdateien — kein ausführbarer Code. Sie kodieren Expertenwissen über Frameworks, Sprachen oder Tools, das Ihr KI-Agent liest, um seine Ausgabe zu verbessern. Das bedeutet null Laufzeit-Overhead, keine Abhängigkeitskonflikte und volle Transparenz: Sie können jede Anweisung vor der Installation lesen und prüfen.

Kompatibilität

Dieser Skill funktioniert mit jedem KI-Coding-Agenten, der das skills.sh-Format unterstützt, einschließlich Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider und anderen Tools, die projektbezogene Kontextdateien lesen. Skills sind auf Transportebene framework-agnostisch — der Inhalt bestimmt, für welche Sprache oder welches Framework er gilt.

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
Kundensupport