figma-developer
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 |
More from oakoss/agent-skills
playwright
|
200ui-ux-polish
Iterative UI/UX polishing workflow for web applications. Use when improving visual polish, refining desktop and mobile UX separately, running iterative enhancement cycles, applying design patterns like glassmorphism or bento grids, or auditing accessibility and WCAG compliance. Use for Stripe-level visual quality, responsive optimization, and design system alignment.
153find-skills
|
118knowledge-graph-builder
>
101tailwind
Tailwind CSS v4 patterns and design systems. Use when configuring Tailwind themes, building components, implementing dark mode, using container queries, migrating from v3, integrating shadcn/ui, or fixing build errors. Use for tailwind, css, styling, theme, design-tokens.
85pnpm-workspace
pnpm workspace monorepo management with filtering, catalogs, and shared configs. Use when setting up monorepos, managing workspace dependencies, filtering package commands, or sharing configuration across packages.
78