skills.rest
figma
figmaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

figma-code-connect

Generate .figma.ts code templates from Figma components via MCP server APIs.

1.9k|171|Updated Aug 5, 2025
Search Tags:#template generation#Figma#design-to-code#component mapping#Code Connect
One-click install
npx skills add https://github.com/figma/mcp-server-guide --skill figma-code-connect-figma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-code-connect
Source: https://github.com/figma/mcp-server-guide/tree/main/skills/figma-code-connect
Command: npx skills add https://github.com/figma/mcp-server-guide --skill figma-code-connect-figma

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @figma/code-connect, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenge of mapping Figma components to code, reducing manual coding tasks and speeding up design-to-code translation.

Core Features & Use Cases

  • Component Mapping: Automates the creation of .figma.ts template files that map Figma components to code snippets.
  • Automated Property Extraction: Extracts and maps Figma component properties to corresponding code props.
  • Conditional Branching: Handles complex component structures with conditional logic in the template files.
  • Use Case: When a Figma component is updated, use this Skill to automatically generate or update the corresponding code snippet in your project.

Quick Start

To create a new Code Connect template for a Figma component, run the command: figma-code-connect create-template --file-key <fileKey> --node-id <nodeId>

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 code templates from Figma components automatically?▼

Figma-to-code mapping translates Figma component properties into code props using `.figma.ts` template files. This automated mapping reduces manual coding tasks by ensuring consistent design-to-code translations within your software development workflow.

What is the best way to map Figma component properties to code props?▼

Mapping Figma component properties to code props is handled through automated property extraction. The Skill generates `.figma.ts` templates that map these properties directly, supporting conditional branching to handle complex component structures accurately.

Do I need TypeScript types to use Figma Code Connect for component mapping?▼

Yes, TypeScript types are required for editor support when using Figma Code Connect. The Skill utilizes Figma MCP server APIs and depends on the `@figma/code-connect` package to generate template files within your project environment.

How do I update code snippets when a Figma component changes?▼

To update code snippets when a Figma component changes, run the Skill to automatically regenerate or update the corresponding `.figma.ts` template files. This ensures your code snippets remain synchronized with the latest Figma component updates.

Can I handle conditional logic in Figma-to-code template generation?▼

Yes, you can handle conditional logic in Figma-to-code template generation. The Skill supports conditional branching within the `.figma.ts` template files, allowing you to manage complex component structures during the automated mapping process.

Related Skills

Explore More Software Engineering Skills→
tech-leads-clubtech-leads-club
5.0k

figma-implement-design

Translate Figma designs into production-ready UI code via Figma MCP.

Official
Advanced
calvingitcalvingit
2

figma-code-connect

Generate Figma Code Connect template files from component URLs.

Community
Advanced
IsKenKenYaIsKenKenYa

vue-best-practices

Fix Vue 3 and TypeScript typing, template-checking, and tooling misconfigurations.

Community
Advanced
ahandselahandsel
1

figma-code-connect

Generate Figma Code Connect .figma.ts template files from Figma URLs.

Community
Advanced