Agent skill · design visual · daffy0208
Figma Developer
Extract components from Figma, convert designs to React components, sync design tokens, and generate code from designs. Bridge the gap between design and code with automated workflows.
Why this skill is useful
Adds executable scripts for extracting design tokens and generating React components from Figma designs, which are not commonly found in public documentation.
What it needs
Requires node-fetch installed locally. Requires figma account access. About 7k tokens when loaded. Last updated 2025-12-25. 33 stars on the source repository.
What this skill does
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 1. Go to Figma Settings 2. Scroll to "Personal access tokens" 3. Click "Generate new token" 4. Name it (e.g., "Development") 5. Copy and save securely Environment Setup Install Figma Client Test Connection --- Phase 2: Extract Design Tokens What Are Design Tokens? Design tokens are design decisions (colors, typography, spacing) stored as code. Benefits: Single source of truth Consistent across platforms Easy to update Type-safe Extract Tokens from Figma Use Tokens in Code Usage in React: --- Phase 3: Export Assets Export Icons as SVG Generate React Icon Components Usage: --- Phase 4: Component Generation Extract Component Structure Generate Button Component from Figma --- Phase 5: Automated Workflows Set Up GitHub Actions Package.json Scripts --- Best Practices 1. Organize Figma Files Structure: 2. Naming Conventions Colors: Typography: Components: 3. Use Figma Variables (Beta) Figma now supports variables natively. Use them for: Colors Spacing Border radius Typography sizes Extract these automatically with the API. 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills daffy0208/figma-developer