{"enrichment":{"faq":[{"a":"Figma Code Connect is a skill that generates Code Connect template files bridging Figma components and code repositories. It extracts component properties from Figma, identifies matching code components, and builds .figma.ts templates with property mappings\u2014enabling seamless design-to-code synchronization for teams on Organization or Enterprise plans.","q":"What is Figma Code Connect and how does it work?"},{"a":"Figma Code Connect connects Figma design files to code repositories by automating design-to-code workflows. The skill maps Figma components to their corresponding code implementations, creating templates that keep design and development in sync without manual handoff processes.","q":"How does Figma Code Connect connect Figma designs to code?"},{"a":"Figma Code Connect generates or syncs code from Figma components and design systems. It creates .figma.ts template files that map component properties and enable automated code generation, reducing manual work in translating designs into functional code implementations.","q":"Can Figma Code Connect generate code from components?"},{"a":"Figma Code Connect improves collaboration by automating design handoff processes and creating a bridge between design and development teams. By mapping design tokens and components directly to code, it reduces miscommunication and accelerates the design-to-development workflow.","q":"How does Figma Code Connect improve designer-developer collaboration?"},{"a":"Figma Code Connect is available for teams on Organization or Enterprise plans. The skill requires access to both Figma design files and code repositories to extract component properties and build the necessary template mappings for design-to-code synchronization.","q":"What are the requirements for using Figma Code Connect?"},{"a":"Figma Code Connect creates .figma.ts template files in your code repositories. These templates contain property mappings that link Figma components to their code counterparts, enabling automated synchronization and serving as documentation for how designs map to code implementations.","q":"What does Figma Code Connect create in code repositories?"}],"shadow_tags":["design-to-code","developer-handoff","component-mapping","design-automation","code-generation","figma-integration","workflow-bridge","design-system-sync"],"summary_rewrite":"Generate Code Connect template files that bridge Figma components and code repositories. This skill extracts component properties from Figma, identifies matching code components, and builds .figma.ts templates with property mappings\u2014enabling seamless design-to-code synchronization for teams on Organization or Enterprise plans."},"gist":{"api_url":"https://skillfed.io/api/skills/Devin-AXIS/iPolloWork/figma-code-connect.json","as_of":"2026-07-27","description":"Figma Code Connect creates template files that map Figma components to code snippets for design-to-code.","install":{"manual":["git clone https://github.com/Devin-AXIS/iPolloWork","cp -r iPolloWork ~/.claude/skills/figma-code-connect"],"primary":"npx skillfed install Devin-AXIS/iPolloWork/figma-code-connect","version":"a8b317e6"},"kind":"skill","mirror_url":"https://skillfed.io/Devin-AXIS/iPolloWork/figma-code-connect.md","similar":[{"id":"Devin-AXIS/iPolloWork/figma-generate-design","name":"Figma Generate Design","publisher":"Devin-AXIS/iPolloWork","url":"https://skillfed.io/Devin-AXIS/iPolloWork/figma-generate-design"},{"id":"Devin-AXIS/iPolloWork/figma-generate-library","name":"Figma Generate Library","publisher":"Devin-AXIS/iPolloWork","url":"https://skillfed.io/Devin-AXIS/iPolloWork/figma-generate-library"},{"id":"daffy0208/ai-dev-standards/figma-developer","name":"Figma Developer","publisher":"daffy0208/ai-dev-standards","url":"https://skillfed.io/daffy0208/ai-dev-standards/figma-developer"},{"id":"openai/skills/figma-generate-library","name":"Figma Generate Library","publisher":"openai/skills","url":"https://skillfed.io/openai/skills/figma-generate-library"},{"id":"openai/skills/figma-implement-design","name":"Figma Implement Design","publisher":"openai/skills","url":"https://skillfed.io/openai/skills/figma-implement-design"}],"title":"Figma Code Connect by Devin-AXIS \u2014 SkillFed","use":{"when":["Figma Code Connect connects Figma design files to code repositories by automating design-to-code workflows.","Figma Code Connect generates or syncs code from Figma components and design systems."]},"what":{"lead":"Figma Code Connect creates template files that map Figma components to code snippets for design-to-code automation.","rest":"Generate Code Connect template files that bridge Figma components and code repositories. This skill extracts component properties from Figma, identifies matching code components, and builds .figma.ts templates with property mappings\u2014enabling seamless design-to-code synchronization for teams on Organization or Enterprise plans."}},"id":"Devin-AXIS/iPolloWork/figma-code-connect","install":{"mode":"external","repo":"https://github.com/Devin-AXIS/iPolloWork"},"links":{"html":"https://skillfed.io/Devin-AXIS/iPolloWork/figma-code-connect","md":"https://skillfed.io/Devin-AXIS/iPolloWork/figma-code-connect.md","repo":"https://github.com/Devin-AXIS/iPolloWork"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":266,"language":"TypeScript","last_updated":"2026-07-27","license":"NOASSERTION","name":"Figma Code Connect","publisher":"Devin-AXIS","stars":1925},"relations":{"similar":[{"id":"figma/mcp-server-guide/figma-code-connect"},{"id":"figma/mcp-server-guide/figma-generate-design"},{"id":"Devin-AXIS/iPolloWork/figma-generate-design"},{"id":"figma/mcp-server-guide/figma-generate-library"},{"id":"Devin-AXIS/iPolloWork/figma-generate-library"},{"id":"daffy0208/ai-dev-standards/figma-developer"},{"id":"openai/skills/figma-generate-library"},{"id":"openai/skills/figma-implement-design"},{"id":"foryourhealth111-pixel/Vibe-Skills/figma-implement-design"},{"id":"tech-leads-club/agent-skills/figma-implement-design"}]},"slug":{"owner":"Devin-AXIS","repo":"iPolloWork","skill":"figma-code-connect"},"version":"a8b317e6"}