{"id":32514032,"url":"https://github.com/kataras/figma-extractor","last_synced_at":"2026-02-15T20:08:27.153Z","repository":{"id":320962630,"uuid":"1083908870","full_name":"kataras/figma-extractor","owner":"kataras","description":"Figma Design Extractor - Extract design tokens and specifications from Figma files as markdown with CSS variables for easy AI-powered implementation.","archived":false,"fork":false,"pushed_at":"2026-01-29T11:40:33.000Z","size":28,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-08T06:17:18.374Z","etag":null,"topics":["ai","claude-code","figma","figma-extractor","go","go-figma"],"latest_commit_sha":null,"homepage":"https://hellenic.dev","language":"Go","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kataras.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"kataras"}},"created_at":"2025-10-26T23:55:56.000Z","updated_at":"2026-01-30T17:19:35.000Z","dependencies_parsed_at":"2025-10-27T02:22:48.647Z","dependency_job_id":"352d5843-96b4-4c6e-a166-89c4c01d120a","html_url":"https://github.com/kataras/figma-extractor","commit_stats":null,"previous_names":["kataras/figma-extractor"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/kataras/figma-extractor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kataras%2Ffigma-extractor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kataras%2Ffigma-extractor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kataras%2Ffigma-extractor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kataras%2Ffigma-extractor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kataras","download_url":"https://codeload.github.com/kataras/figma-extractor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kataras%2Ffigma-extractor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29487869,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-15T19:29:10.908Z","status":"ssl_error","status_checked_at":"2026-02-15T19:29:10.419Z","response_time":118,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","claude-code","figma","figma-extractor","go","go-figma"],"created_at":"2025-10-27T23:16:31.919Z","updated_at":"2026-02-15T20:08:27.147Z","avatar_url":"https://github.com/kataras.png","language":"Go","funding_links":["https://github.com/sponsors/kataras"],"categories":[],"sub_categories":[],"readme":"# Figma Design Extractor\n\nA 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.\n\n## Features\n\n- 🎨 **Color Extraction**: Automatically categorizes colors into primary, secondary, background, text, status, and border colors\n- 📝 **Typography**: Extracts font families, sizes, weights, and line heights\n- 📏 **Spacing**: Identifies spacing patterns and normalizes them to a standard scale\n- 🌈 **Visual Effects**: Extracts shadows and border radii\n- 📐 **Layout Specs**: Captures layout dimensions like header height and sidebar width\n- 🎯 **Node-Specific Extraction**: Extract specific elements or components instead of the entire file\n- 📦 **Multi-Node Support**: Extract multiple nodes in a single operation\n- 🖼️ **Image/Asset Export**: Export images and assets directly from Figma (PNG, SVG, JPG, PDF) with multi-scale support\n- 📄 **Markdown Output**: Generates a comprehensive markdown file with all specifications\n\n## Installation\n\nThe only requirement is the [Go Programming Language](https://go.dev/dl/).\n\n```bash\ngo install github.com/kataras/figma-extractor/cmd/figma-extractor@latest\n```\n\n## Usage\n\n### Basic Usage (Extract Entire File)\n\n```bash\nfigma-extractor --url \"https://www.figma.com/file/YOUR_FILE_KEY/Design-Name\" --token \"YOUR_ACCESS_TOKEN\"\n```\n\n### Extract Specific Nodes\n\nExtract one or more specific elements from your Figma file:\n\n```bash\n# Extract a single node by ID\nfigma-extractor \\\n  --url \"https://www.figma.com/file/YOUR_FILE_KEY/Design\" \\\n  --token \"YOUR_ACCESS_TOKEN\" \\\n  --node-ids \"123:456\"\n\n# Extract multiple nodes\nfigma-extractor \\\n  --url \"https://www.figma.com/file/YOUR_FILE_KEY/Design\" \\\n  --token \"YOUR_ACCESS_TOKEN\" \\\n  --node-ids \"123:456,789:012,345:678\"\n```\n\n### Extract from Figma Share Links\n\nThe tool automatically detects node IDs from Figma share URLs:\n\n```bash\n# URL with node-id query parameter (most common)\nfigma-extractor \\\n  --url \"https://www.figma.com/file/ABC123/Design?node-id=123:456\" \\\n  --token \"YOUR_ACCESS_TOKEN\"\n\n# URL with multiple nodes\nfigma-extractor \\\n  --url \"https://www.figma.com/file/ABC123/Design?node-id=123:456,789:012\" \\\n  --token \"YOUR_ACCESS_TOKEN\"\n```\n\n### Getting a Figma Personal Access Token\n\n1. Log in to your Figma account\n2. Go to **Settings** → **Account**\n3. Scroll down to **Personal access tokens**\n4. Click **Generate new token**\n5. Give it a name (e.g., \"Design Extractor\")\n6. Copy the token (you won't be able to see it again)\n\n\n### Options\n\n- `--url, -u`: Figma file URL (required)\n- `--token, -t`: Figma Personal Access Token (required)\n- `--output, -o`: Output markdown file (default: `FIGMA_DESIGN_SPECIFICATIONS.md`)\n- `--node-ids, -n`: Comma-separated node IDs to extract (optional)\n- `--inherit-context, -i`: Inherit file-level context (colors, styles) when extracting specific nodes (default: false)\n- `--export-images`: Export images/assets from Figma (default: false)\n- `--image-format`: Image format: `png`, `svg`, `jpg`, `pdf` (default: `png`)\n- `--image-scales`: Comma-separated scale factors, e.g. `\"1,2,3\"` (default: `1`; ignored for SVG/PDF)\n- `--image-dir`: Output directory for exported images (default: `figma-assets`)\n\n### Examples\n\n**Extract entire file:**\n```bash\nfigma-extractor \\\n  --url \"https://www.figma.com/file/abc123xyz/My-Design-System\" \\\n  --token \"figd_xxxxxxxxxxxxxxxxxxxxxxxxxxxx\" \\\n  --output \"design-specs.md\"\n```\n\n**Extract specific component:**\n```bash\nfigma-extractor \\\n  --url \"https://www.figma.com/file/abc123xyz/My-Design-System\" \\\n  --token \"figd_xxxxxxxxxxxxxxxxxxxxxxxxxxxx\" \\\n  --node-ids \"123:456\" \\\n  --output \"button-component.md\"\n```\n\n**Extract from share link with node ID:**\n```bash\nfigma-extractor \\\n  --url \"https://www.figma.com/file/abc123xyz/My-Design-System?node-id=123:456\" \\\n  --token \"figd_xxxxxxxxxxxxxxxxxxxxxxxxxxxx\" \\\n  --output \"component-specs.md\"\n```\n\n**Extract node with file-level context (colors, styles):**\n```bash\nfigma-extractor \\\n  --url \"https://www.figma.com/file/abc123xyz/My-Design-System?node-id=123:456\" \\\n  --token \"figd_xxxxxxxxxxxxxxxxxxxxxxxxxxxx\" \\\n  --inherit-context \\\n  --output \"component-with-styles.md\"\n```\n\n**Extract multiple related components:**\n```bash\nfigma-extractor \\\n  --url \"https://www.figma.com/file/abc123xyz/My-Design-System\" \\\n  --token \"figd_xxxxxxxxxxxxxxxxxxxxxxxxxxxx\" \\\n  --node-ids \"123:456,789:012,345:678\" \\\n  --output \"button-variants.md\"\n```\n\n**Export all assets/images from the entire file as PNG (1x and 2x):**\n```bash\nfigma-extractor \\\n  --url \"https://www.figma.com/file/abc123xyz/My-Design-System\" \\\n  --token \"figd_xxxxxxxxxxxxxxxxxxxxxxxxxxxx\" \\\n  --export-images \\\n  --image-scales \"1,2\" \\\n  --image-dir \"assets\"\n```\n\n**Export specific nodes as SVG:**\n```bash\nfigma-extractor \\\n  --url \"https://www.figma.com/file/abc123xyz/My-Design-System\" \\\n  --token \"figd_xxxxxxxxxxxxxxxxxxxxxxxxxxxx\" \\\n  --node-ids \"123:456,789:012\" \\\n  --export-images \\\n  --image-format svg \\\n  --image-dir \"icons\"\n```\n\n## Output Format\n\nThe tool generates a markdown file with the following sections:\n\n### Design System\n- **Color Palette**: All colors categorized by usage (primary, background, text, etc.)\n- **Typography**: Font families, sizes, weights, and line heights\n- **Spacing**: Standardized spacing scale\n- **Border Radius**: Border radius values\n- **Shadows**: Shadow definitions with offsets, blur, and colors\n\n### Layout Specifications\n- Header height\n- Sidebar width\n- Content padding\n- Other layout measurements\n\n### Implementation Notes\n- Instructions for applying the design system\n- Usage examples for Tailwind CSS configuration\n- Guidelines for implementing the design\n\n## How It Works\n\n### Full File Extraction\n\n1. **Authentication**: Connects to the Figma API using your personal access token\n2. **File Retrieval**: Fetches the complete file data including all nodes and styles\n3. **Recursive Extraction**: Traverses the entire document tree and extracts:\n   - Fill colors from all elements\n   - Stroke colors and border properties\n   - Text styles (fonts, sizes, weights)\n   - Layout properties (padding, spacing, dimensions)\n   - Visual effects (shadows, blur)\n4. **Categorization**: Automatically categorizes extracted values based on node names and properties\n5. **Normalization**: Deduplicates and normalizes values to standard scales\n6. **Markdown Generation**: Formats all specifications as CSS variables in a markdown document\n\n### Node-Specific Extraction\n\n1. **Node ID Detection**: Extracts node IDs from the URL or `--node-ids` flag\n   - Supports query parameter format: `?node-id=123:456`\n   - Supports URL-encoded format: `?node-id=123-456`\n   - Supports multiple nodes: `?node-id=123:456,789:012`\n2. **Targeted Fetch**: Fetches only the specified nodes using the Figma `/nodes` API endpoint\n3. **Smart Extraction**: Extracts specifications from target nodes and their children\n4. **Optional Context Inheritance**: Use `--inherit-context` flag to include:\n   - Published styles and colors from document root\n   - Global typography definitions\n   - File-level design tokens\n5. **Normalization \u0026 Deduplication**: Normalizes values to standard scales\n6. **Markdown Output**: Generates the same comprehensive markdown format\n\n**Benefits of Node Extraction:**\n- ⚡ **Faster**: Only fetches and processes specific elements\n- 🎯 **Focused**: Perfect for extracting individual components or screens\n- 📦 **Efficient**: Works great with large Figma files\n- 🔗 **Convenient**: Works directly with Figma share links\n- 🎛️ **Flexible**: Choose whether to include file-level context or not\n\n### Image/Asset Export\n\n1. **Opt-in**: Enabled via the `--export-images` flag\n2. **Node Discovery**:\n   - **Full file mode**: Automatically discovers all nodes that have export settings defined by the designer in Figma\n   - **Node-specific mode**: Exports the targeted nodes directly\n3. **Batched API Requests**: Sends node IDs to the Figma Images API in batches of 100 for efficiency\n4. **Concurrent Downloads**: Downloads images in parallel (up to 5 at a time) for speed\n5. **Smart Naming**: Generates kebab-case filenames from node names, with `@2x`/`@3x` suffixes for raster scales \u003e 1 and automatic deduplication of colliding names\n6. **Multi-Format**: Supports PNG, SVG, JPG, and PDF output formats\n7. **Multi-Scale**: Generate multiple scale variants (e.g., 1x, 2x, 3x) in a single run; scale is ignored for vector formats (SVG/PDF)\n8. **Integrated Output**: Exported asset info is included in the generated markdown file\n\n## Integration with Claude\n\nThe generated markdown file is specifically formatted to work with [Claude Sonnet 4.5](https://claude.ai), [ChatGPT](https://chatgpt.com/) 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.\n\n## Example Output\n\nThe tool generates CSS variables like:\n\n```css\n/* Primary Colors */\n--color-primary-main: #3B82F6;\n--color-primary-hover: #2563EB;\n\n/* Background Colors */\n--color-bg-main: #FFFFFF;\n--color-bg-surface: #F9FAFB;\n\n/* Typography */\n--font-primary: 'Inter', system-ui, -apple-system, sans-serif;\n--text-base: 16px;\n--text-lg: 18px;\n--font-medium: 500;\n--font-semibold: 600;\n\n/* Spacing */\n--space-4: 16px;\n--space-6: 24px;\n--space-8: 32px;\n\n/* Border Radius */\n--radius-md: 6px;\n--radius-lg: 8px;\n```\n\n## Node ID Formats\n\nThe tool supports all common Figma URL formats for node identification:\n\n### Query Parameter (Most Common)\n```\nhttps://www.figma.com/file/ABC123/Design?node-id=123:456\nhttps://www.figma.com/design/ABC123/Design?node-id=123-456  (URL-encoded colon)\n```\n\n### Multiple Nodes\n```\nhttps://www.figma.com/file/ABC123/Design?node-id=123:456,789:012\n```\n\n### Hash Fragment\n```\nhttps://www.figma.com/file/ABC123/Design#123:456\n```\n\n### Finding Node IDs\n\nTo find a node ID in Figma:\n1. Right-click on any element in Figma\n2. Select \"Copy link to selection\"\n3. The copied URL will contain the node ID in the format shown above\n4. Use that URL directly with figma-extractor\n\n## Limitations\n\n- Requires a valid Figma Personal Access Token\n- Can only access files you have permission to view\n- Color categorization is based on node naming conventions\n- Very large files may take longer to process (use node extraction for better performance)\n- Node IDs must exist in the specified file\n\n## Contributing\n\nContributions are welcome! Please feel free to submit pull requests or open issues for bugs and feature requests.\n\n## License\n\nMIT License - feel free to use this tool in your projects.\n\n## Support\n\nIf you encounter any issues:\n1. Verify your Figma token is valid\n2. Ensure you have access to the Figma file\n3. Check that the file URL is correct\n4. Review the error messages for specific issues\n\nFor additional help, please open an issue on GitHub.\n\n## License\n\nThis project is licensed under the [BSD 3-clause license](LICENSE), just like the Go project itself.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkataras%2Ffigma-extractor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkataras%2Ffigma-extractor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkataras%2Ffigma-extractor/lists"}