figma-code-connect

Generate Figma Code Connect template files from component URLs.

2|Updated Mar 26, 2026

Search Tags:#automation #templates #frontend #figma #design-to-code #code-connect

Ready to run

npx skills add https://github.com/calvingit/skills --skill figma-code-connect-calvingit

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: figma-code-connect
Source: https://github.com/calvingit/skills/tree/main/external-skills/Design/figma-code-connect
Command: npx skills add https://github.com/calvingit/skills --skill figma-code-connect-calvingit

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Creates and maintains Figma Code Connect template files that map Figma components to code snippets. This enables engineers to quickly generate ready-to-use code templates from design components, accelerating design-to-code workflows.

Core Features & Use Cases

Generate Code Connect template files (.figma.ts or .figma.js) that link Figma components to code snippets.
Parse Figma URLs to derive fileKey and nodeId, fetch component context, and produce context-aware templates.
Support integration with MCP tooling and documentation references to enable scalable design-to-code pipelines.

Quick Start

Provide a Figma file URL and run the Code Connect workflow to generate the corresponding template files.

Frequently Asked Questions about figma-code-connect

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate Figma Code Connect templates from a component URL?▼

Figma Code Connect templates are configuration files (.figma.ts or .figma.js) that map published Figma library components to ready-to-use code snippets, enabling engineers to quickly bridge design-to-code workflows without manual code recreation.

Do I need an MCP server to map Figma components to code?▼

To maintain Figma Code Connect templates, you update the mapping between Figma library components and code snippets by re-running the template generation workflow with updated component URLs, ensuring the .figma.ts or .figma.js files stay synchronized with design changes.

What is the best way to automate design-to-code workflows for Figma libraries?▼

Figma Code Connect supports generating templates in both TypeScript (.figma.ts) and JavaScript (.figma.js) formats, allowing you to map design components to code snippets according to your project's frontend language requirements.

Can I use Figma Code Connect to maintain existing template files?▼

To set up design-to-code pipelines with Figma Code Connect, integrate MCP tooling and documentation references to automate the extraction of component context from Figma URLs, producing scalable and reusable code templates for your frontend workflow.