Figma Developer
Figma Developer bridges design and development by extracting components, design tokens, and assets directly from Figma into production-ready code. It automates icon export as React components, syncs design decisions as CSS and JSON tokens, and generates component structures—eliminating manual handoff between designers and developers.
Figma Developer automates conversion of Figma designs into production-ready React components with design tokens and asset export.
AI-generated summary based on this skill's SKILL.md
Install
daffy0208/ai-dev-standards/figma-developer · repository language: TypeScript
git clone https://github.com/daffy0208/ai-dev-standards
cp -r ai-dev-standards/skills/figma-developer ~/.claude/skills/figma-developerFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How does Figma Developer convert figma designs to react code?
Figma Developer automates the conversion of Figma designs into production-ready React components. It reads your design frames directly from Figma, extracts component structures, and generates TypeScript-ready code that maintains design fidelity while following React best practices. This eliminates manual recreation and keeps your codebase synchronized with design updates.
Can Figma Developer extract design tokens from Figma?
Yes. Figma Developer extracts design tokens directly from your Figma file and syncs them as CSS variables and JSON files. This ensures your color palettes, typography scales, spacing systems, and other design decisions flow automatically into your codebase, creating a single source of truth for design consistency across teams.
Does Figma Developer generate icon components from Figma frames?
Figma Developer generates icon components and assets from Figma frames automatically. It exports SVG icons as reusable React components, preserving your design system's icon library and making icons instantly available to developers without manual export steps.
How can I automate design-to-code workflow with Figma Developer?
Figma Developer integrates with GitHub Actions to automate your entire design-to-code pipeline. Set up triggers that run whenever your Figma file updates, automatically regenerating components, tokens, and assets in your repository. This bridges the gap between designers and developers by eliminating manual handoffs and keeping code always in sync with design.
What license does Figma Developer use?
Figma Developer is released under the MIT license, allowing you to use, modify, and distribute it freely in both open-source and commercial projects with minimal restrictions.
SKILL.md
rendered from the published skill — quoted content, verbatim
Figma Developer
Turn Figma designs into production-ready code.
Core Principle
Design is the single source of truth.
Designers work in Figma. Developers build from Figma. The bridge between them should be automated, not manual.
Phase 1: Setup & Authentication
Get Figma Access Token
- Go to Figma Settings
- Scroll to "Personal access tokens"
- Click "Generate new token"
- Name it (e.g., "Development")
- Copy and save securely
Environment Setup
# .env
FIGMA_ACCESS_TOKEN=figd_...
Install Figma Client
npm install node-fetch
Test Connection
```typescript import { FigmaClient } from '@/integrations/design-tools/figma/client'
const client = new FigmaClient({ accessToken: process.env.FIGMA_ACCESS_TOKEN })
// Test with a public file const file = await
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
skills/figma-developer/SKILL.md
skills/figma-developer/manifest.yaml