{"enrichment":{"faq":[{"a":"Figma connects your design files to automation workflows by exposing design data through the Figma API. You can extract tokens, component specifications, colors, typography, and spacing rules directly from your design system, then sync them into your codebase or generate code automatically. This bridges the gap between design and development.","q":"How does Figma design tool integration work with automation?"},{"a":"Yes. Figma enables automated design collaboration by allowing you to programmatically manage file sharing, team workspace access, and version control through its API. You can trigger notifications, update permissions, and sync design changes across your team's workflows without manual intervention.","q":"Can Figma automate design collaboration and file sharing?"},{"a":"Figma's API lets you read and manipulate design data programmatically\u2014extracting component metadata, design tokens, asset exports, and file structure. You can build custom integrations to pull design specs into development tools, automate asset generation, sync design systems to code repositories, and create design-to-development handoff pipelines.","q":"What can you do with the Figma API for programmatic operations?"},{"a":"Figma streamlines handoff by automating the extraction of design specifications, component details, and assets. Through API integration, developers can pull exact spacing, colors, typography, and component behavior directly into their codebase, eliminating manual spec sheets and reducing miscommunication between designers and developers.","q":"How does Figma streamline design-to-development handoff?"},{"a":"Figma can export design tokens (colors, typography, spacing), component libraries, asset files, layout specifications, and interactive prototyping data. Your automation workflows can consume this data to generate code snippets, update design system documentation, sync tokens across platforms, or trigger downstream processes in your development pipeline.","q":"What design data can Figma export for automation workflows?"}],"shadow_tags":["design-collaboration","prototyping-tool","ui-ux-design","asset-management","design-systems","workflow-automation","team-workspace","component-library","design-handoff","api-integration"],"summary_rewrite":"Figma brings your design system into automation by extracting tokens, component specs, and design data through the Figma API. Pull colors, typography, spacing, and component details directly into your workflows, then generate code or sync tokens to your codebase."},"gist":{"api_url":"https://skillfed.io/api/skills/johnlindquist/claude/figma.json","as_of":"2025-12-19","description":"Figma connects your design files to automation workflows for extracting tokens and generating code. npx skillfed install johnlindquist/claude/figma","install":{"manual":["git clone https://github.com/johnlindquist/claude","cp -r claude ~/.claude/skills/figma"],"primary":"npx skillfed install johnlindquist/claude/figma","version":"2d656b7a"},"kind":"skill","mirror_url":"https://skillfed.io/johnlindquist/claude/figma.md","similar":[{"id":"hoodini/ai-agents-skills/figma","name":"Figma","publisher":"hoodini/ai-agents-skills","url":"https://skillfed.io/hoodini/ai-agents-skills/figma"},{"id":"AceDataCloud/Skills/figma","name":"Figma","publisher":"AceDataCloud/Skills","url":"https://skillfed.io/AceDataCloud/Skills/figma"},{"id":"TheQtCompanyRnD/agent-skills/qt-figma-token-extraction","name":"Qt Figma Token Extraction","publisher":"TheQtCompanyRnD/agent-skills","url":"https://skillfed.io/TheQtCompanyRnD/agent-skills/qt-figma-token-extraction"},{"id":"yonatangross/orchestkit/figma-design-handoff","name":"figma-design-handoff","publisher":"yonatangross/orchestkit","url":"https://skillfed.io/yonatangross/orchestkit/figma-design-handoff"},{"id":"idanbeck/claude-skills/figma-skill","name":"Figma Skill","publisher":"idanbeck/claude-skills","url":"https://skillfed.io/idanbeck/claude-skills/figma-skill"}],"title":"Figma by johnlindquist: Connect and integrate Figma design \u2014 SkillFed","use":{"when":["Yes.","Figma's API lets you read and manipulate design data programmatically\u2014extracting component metadata, design tokens, asset exports."]},"what":{"lead":"Figma connects your design files to automation workflows for extracting tokens and generating code.","rest":"Figma brings your design system into automation by extracting tokens, component specs, and design data through the Figma API. Pull colors, typography, spacing, and component details directly into your workflows, then generate code or sync tokens to your codebase."}},"id":"johnlindquist/claude/figma","install":{"mode":"external","repo":"https://github.com/johnlindquist/claude"},"links":{"html":"https://skillfed.io/johnlindquist/claude/figma","md":"https://skillfed.io/johnlindquist/claude/figma.md","repo":"https://github.com/johnlindquist/claude"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":6,"language":"TypeScript","last_updated":"2025-12-19","license":null,"name":"Figma","publisher":"johnlindquist","stars":24},"relations":{"similar":[{"id":"hoodini/ai-agents-skills/figma"},{"id":"AceDataCloud/Skills/figma"},{"id":"TheQtCompanyRnD/agent-skills/qt-figma-token-extraction"},{"id":"yonatangross/orchestkit/figma-design-handoff"},{"id":"idanbeck/claude-skills/figma-skill"},{"id":"Egonex-AI/Understand-Anything/understand-figma"},{"id":"Aradotso/mcp-skills/huolala-figma-mcp"},{"id":"duc01226/EasyPlatform/figma-design"},{"id":"Aradotso/mcp-skills/figma-mcp-server"},{"id":"oakoss/agent-skills/figma-developer"}]},"slug":{"owner":"johnlindquist","repo":"claude","skill":"figma"},"version":"2d656b7a"}