A Go tool to extract design specifications from Figma files using the Figma REST API. This tool automatically extracts colors, typography, spacing, shadows, border radii, and layout specifications from any Figma file and outputs them in a markdown format that can be used to implement the design with AI.
- 🎨 Color Extraction: Automatically categorizes colors into primary, secondary, background, text, status, and border colors
- 📝 Typography: Extracts font families, sizes, weights, and line heights
- 📏 Spacing: Identifies spacing patterns and normalizes them to a standard scale
- 🌈 Visual Effects: Extracts shadows and border radii
- 📐 Layout Specs: Captures layout dimensions like header height and sidebar width
- 🎯 Node-Specific Extraction: Extract specific elements or components instead of the entire file
- 📦 Multi-Node Support: Extract multiple nodes in a single operation
- 🖼️ Image/Asset Export: Export images and assets directly from Figma (PNG, SVG, JPG, PDF) with multi-scale support
- 📄 Markdown Output: Generates a comprehensive markdown file with all specifications
The only requirement is the Go Programming Language.
go install github.com/hellenic-development/figma-extractor/cmd/figma-extractor@latestfigma-extractor --url "https://www.figma.com/file/YOUR_FILE_KEY/Design-Name" --token "YOUR_ACCESS_TOKEN"Extract one or more specific elements from your Figma file:
# Extract a single node by ID
figma-extractor \
--url "https://www.figma.com/file/YOUR_FILE_KEY/Design" \
--token "YOUR_ACCESS_TOKEN" \
--node-ids "123:456"
# Extract multiple nodes
figma-extractor \
--url "https://www.figma.com/file/YOUR_FILE_KEY/Design" \
--token "YOUR_ACCESS_TOKEN" \
--node-ids "123:456,789:012,345:678"The tool automatically detects node IDs from Figma share URLs:
# URL with node-id query parameter (most common)
figma-extractor \
--url "https://www.figma.com/file/ABC123/Design?node-id=123:456" \
--token "YOUR_ACCESS_TOKEN"
# URL with multiple nodes
figma-extractor \
--url "https://www.figma.com/file/ABC123/Design?node-id=123:456,789:012" \
--token "YOUR_ACCESS_TOKEN"- Log in to your Figma account
- Go to Settings → Account
- Scroll down to Personal access tokens
- Click Generate new token
- Give it a name (e.g., "Design Extractor")
- Copy the token (you won't be able to see it again)
--url, -u: Figma file URL (required)--token, -t: Figma Personal Access Token (required)--output, -o: Output markdown file (default:FIGMA_DESIGN_SPECIFICATIONS.md)--node-ids, -n: Comma-separated node IDs to extract (optional)--inherit-context, -i: Inherit file-level context (colors, styles) when extracting specific nodes (default: false)--export-images: Export images/assets from Figma (default: false)--image-format: Image format:png,svg,jpg,pdf(default:png)--image-scales: Comma-separated scale factors, e.g."1,2,3"(default:1; ignored for SVG/PDF)--image-dir: Output directory for exported images (default:figma-assets)
Extract entire file:
figma-extractor \
--url "https://www.figma.com/file/abc123xyz/My-Design-System" \
--token "figd_xxxxxxxxxxxxxxxxxxxxxxxxxxxx" \
--output "design-specs.md"Extract specific component:
figma-extractor \
--url "https://www.figma.com/file/abc123xyz/My-Design-System" \
--token "figd_xxxxxxxxxxxxxxxxxxxxxxxxxxxx" \
--node-ids "123:456" \
--output "button-component.md"Extract from share link with node ID:
figma-extractor \
--url "https://www.figma.com/file/abc123xyz/My-Design-System?node-id=123:456" \
--token "figd_xxxxxxxxxxxxxxxxxxxxxxxxxxxx" \
--output "component-specs.md"Extract node with file-level context (colors, styles):
figma-extractor \
--url "https://www.figma.com/file/abc123xyz/My-Design-System?node-id=123:456" \
--token "figd_xxxxxxxxxxxxxxxxxxxxxxxxxxxx" \
--inherit-context \
--output "component-with-styles.md"Extract multiple related components:
figma-extractor \
--url "https://www.figma.com/file/abc123xyz/My-Design-System" \
--token "figd_xxxxxxxxxxxxxxxxxxxxxxxxxxxx" \
--node-ids "123:456,789:012,345:678" \
--output "button-variants.md"Export all assets/images from the entire file as PNG (1x and 2x):
figma-extractor \
--url "https://www.figma.com/file/abc123xyz/My-Design-System" \
--token "figd_xxxxxxxxxxxxxxxxxxxxxxxxxxxx" \
--export-images \
--image-scales "1,2" \
--image-dir "assets"Export specific nodes as SVG:
figma-extractor \
--url "https://www.figma.com/file/abc123xyz/My-Design-System" \
--token "figd_xxxxxxxxxxxxxxxxxxxxxxxxxxxx" \
--node-ids "123:456,789:012" \
--export-images \
--image-format svg \
--image-dir "icons"The tool generates a markdown file with the following sections:
- Color Palette: All colors categorized by usage (primary, background, text, etc.)
- Typography: Font families, sizes, weights, and line heights
- Spacing: Standardized spacing scale
- Border Radius: Border radius values
- Shadows: Shadow definitions with offsets, blur, and colors
- Header height
- Sidebar width
- Content padding
- Other layout measurements
- Instructions for applying the design system
- Usage examples for Tailwind CSS configuration
- Guidelines for implementing the design
- Authentication: Connects to the Figma API using your personal access token
- File Retrieval: Fetches the complete file data including all nodes and styles
- Recursive Extraction: Traverses the entire document tree and extracts:
- Fill colors from all elements
- Stroke colors and border properties
- Text styles (fonts, sizes, weights)
- Layout properties (padding, spacing, dimensions)
- Visual effects (shadows, blur)
- Categorization: Automatically categorizes extracted values based on node names and properties
- Normalization: Deduplicates and normalizes values to standard scales
- Markdown Generation: Formats all specifications as CSS variables in a markdown document
- Node ID Detection: Extracts node IDs from the URL or
--node-idsflag- Supports query parameter format:
?node-id=123:456 - Supports URL-encoded format:
?node-id=123-456 - Supports multiple nodes:
?node-id=123:456,789:012
- Supports query parameter format:
- Targeted Fetch: Fetches only the specified nodes using the Figma
/nodesAPI endpoint - Smart Extraction: Extracts specifications from target nodes and their children
- Optional Context Inheritance: Use
--inherit-contextflag to include:- Published styles and colors from document root
- Global typography definitions
- File-level design tokens
- Normalization & Deduplication: Normalizes values to standard scales
- Markdown Output: Generates the same comprehensive markdown format
Benefits of Node Extraction:
- ⚡ Faster: Only fetches and processes specific elements
- 🎯 Focused: Perfect for extracting individual components or screens
- 📦 Efficient: Works great with large Figma files
- 🔗 Convenient: Works directly with Figma share links
- 🎛️ Flexible: Choose whether to include file-level context or not
- Opt-in: Enabled via the
--export-imagesflag - Node Discovery:
- Full file mode: Automatically discovers all nodes that have export settings defined by the designer in Figma
- Node-specific mode: Exports the targeted nodes directly
- Batched API Requests: Sends node IDs to the Figma Images API in batches of 100 for efficiency
- Concurrent Downloads: Downloads images in parallel (up to 5 at a time) for speed
- Smart Naming: Generates kebab-case filenames from node names, with
@2x/@3xsuffixes for raster scales > 1 and automatic deduplication of colliding names - Multi-Format: Supports PNG, SVG, JPG, and PDF output formats
- Multi-Scale: Generate multiple scale variants (e.g., 1x, 2x, 3x) in a single run; scale is ignored for vector formats (SVG/PDF)
- Integrated Output: Exported asset info is included in the generated markdown file
The generated markdown file is specifically formatted to work with Claude Sonnet 4.5, ChatGPT and e.t.c. for implementing the design. Simply provide the generated markdown file to AI along with your implementation request, and it will use the exact specifications to build your UI.
The tool generates CSS variables like:
/* Primary Colors */
--color-primary-main: #3B82F6;
--color-primary-hover: #2563EB;
/* Background Colors */
--color-bg-main: #FFFFFF;
--color-bg-surface: #F9FAFB;
/* Typography */
--font-primary: 'Inter', system-ui, -apple-system, sans-serif;
--text-base: 16px;
--text-lg: 18px;
--font-medium: 500;
--font-semibold: 600;
/* Spacing */
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
/* Border Radius */
--radius-md: 6px;
--radius-lg: 8px;The tool supports all common Figma URL formats for node identification:
https://www.figma.com/file/ABC123/Design?node-id=123:456
https://www.figma.com/design/ABC123/Design?node-id=123-456 (URL-encoded colon)
https://www.figma.com/file/ABC123/Design?node-id=123:456,789:012
https://www.figma.com/file/ABC123/Design#123:456
To find a node ID in Figma:
- Right-click on any element in Figma
- Select "Copy link to selection"
- The copied URL will contain the node ID in the format shown above
- Use that URL directly with figma-extractor
- Requires a valid Figma Personal Access Token
- Can only access files you have permission to view
- Color categorization is based on node naming conventions
- Very large files may take longer to process (use node extraction for better performance)
- Node IDs must exist in the specified file
Contributions are welcome! Please feel free to submit pull requests or open issues for bugs and feature requests.
MIT License - feel free to use this tool in your projects.
If you encounter any issues:
- Verify your Figma token is valid
- Ensure you have access to the Figma file
- Check that the file URL is correct
- Review the error messages for specific issues
For additional help, please open an issue on GitHub.
This project is licensed under the BSD 3-clause license, just like the Go project itself.