skills.rest
winetree94
winetree94COMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma-code-connect

Parse Figma URLs and generate .figma.ts templates for code components.

Updated Aug 23, 2026
Search Tags:#typescript#templates#frontend#figma#design-to-code#code-connect
One-click install
npx skills add https://github.com/winetree94/dotfiles --skill figma-code-connect-winetree94
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-code-connect
Source: https://github.com/winetree94/dotfiles/tree/main/default/.agents/skills/figma-code-connect
Command: npx skills add https://github.com/winetree94/dotfiles --skill figma-code-connect-winetree94

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create Code Connect template files that map Figma components to code snippets, enabling faster handoff from design to implementation.

Core Features & Use Cases

  • Generate and maintain .figma.ts templates that map Figma components to TypeScript/Code Connect snippets.
  • Parse Figma URLs to extract fileKey and node-id, resolve components, and fetch their context for template generation.
  • Works with published components in Figma libraries and MCP-enabled workflows to streamline code generation.

Quick Start

Provide a Figma URL and request a Code Connect template for the target component.

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 Connect templates from a Figma design URL?▼

To generate Code Connect templates, provide a Figma URL so the system can parse the fileKey and node-id, query the MCP server for unmapped components, and emit a .figma.ts file with matching TypeScript snippets and metadata.

What are Figma Code Connect templates and how do they map design to code?▼

Figma Code Connect templates are .figma.ts files that map Figma components to TypeScript code snippets. They fetch component property definitions to guide template generation, enabling faster handoff from design to implementation.

Does Figma Code Connect work with published components in Figma libraries?▼

Yes, Figma Code Connect works with published components in Figma libraries. It queries the MCP server to surface unmapped components within your selection and fetches their context to generate the corresponding code templates.

How do I convert Figma node IDs to the MCP-friendly format for template generation?▼

Converting Figma node IDs to the MCP-friendly format happens automatically during URL parsing. The system extracts the fileKey and node-id from your Figma URL, converts the node-id, and uses it to query the MCP server for component properties.

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

The best way to map Figma component properties to TypeScript code is to fetch property definitions via the MCP server, match them to your code component's props, and emit a .figma.ts template containing imports, metadata, and an example snippet.

Why are my Figma components not showing up when generating Code Connect templates?▼

Figma components may not show up if they are not published in a Figma library or if the MCP server cannot surface them as unmapped. Ensure the target components are published and that the node-id from the design URL is correctly parsed.

Related Skills

Explore More Software Engineering Skills→
HellKaiser45HellKaiser45

figma-code-connect-components

Create Figma Code Connect mappings linking design components to code implementations.

Community
Intermediate
artosetrovartosetrov

figma-code-connect

Generate parserless .figma.js Code Connect templates from Figma component selections.

Community
Intermediate
OpenCovenOpenCoven
20

figma

Extract design context and specifications from Figma files via MCP.

Official
Intermediate
coinbasecoinbase
493

figma.create-connect

Generate Figma Code Connect mapping files for React components.

Official
Intermediate