skills.rest
zniihgnexy
zniihgnexyCOMMUNITY
Explore all skills by this author →
GitHub

figma-code-connect

Creates parserless Figma Code Connect template files mapping Figma components to code snippets.

Updated Apr 1, 2026
Search Tags:#React#MCP#figma#template generation#design-to-code#component mapping#code connect
One-click install
npx skills add https://github.com/zniihgnexy/vid_tokenizer --skill figma-code-connect-zniihgnexy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-code-connect
Source: https://github.com/zniihgnexy/vid_tokenizer/tree/main/.ds/codex-home/plugins/cache/openai-curated/figma/314574a046f21938025ae443f9c6dbbd0c2c9b7a/skills/figma-code-connect-components
Command: npx skills add https://github.com/zniihgnexy/vid_tokenizer --skill figma-code-connect-zniihgnexy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Manually writing Figma Code Connect mappings requires parsing Figma URLs, fetching component properties, matching them to code components, and correctly using the template API — a repetitive, error-prone process. This Skill automates the creation and maintenance of parserless .figma.js template files that connect published Figma components to their code counterparts. ## Core Features & Use Cases - Automated Template Generation: Parses a Figma URL, discovers unmapped published components via the Figma MCP server, fetches property definitions, and generates a complete .figma.js template with correct property mappings (TEXT, BOOLEAN, VARIANT, INSTANCE_SWAP). - Code Component Matching: Searches the codebase using figma.config.json paths and prop-interface comparison to identify the right code component, confirming the match with the user before writing. - Validation & Pitfall Guarding: Validates generated templates against property coverage, interpolation rules, and common mistakes like string-concatenating template results or missing hasCodeConnect() guards. - Use Case: Given a Figma design URL for a Button component, the Skill produces a Button.figma.js file mapping Figma variant, size, disabled, and icon properties to the React Button component's props, ready for Dev Mode. ## Quick Start Provide a Figma component URL containing a node-id and ask to create a Code Connect template for it.

Frequently Asked Questions about figma-code-connect

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

FAQPage Schema
How do I create a Figma Code Connect template for a component?▼

Provide a Figma URL containing a node-id parameter. The workflow parses the fileKey and nodeId, discovers unmapped published components via the Figma MCP server, fetches property definitions, matches a code component, and writes a .figma.js template file.

What is the difference between parserless .figma.js and parser-based .figma.tsx files?▼

Parserless templates are .figma.js files that use MCP tools to fetch component context and export an example snippet with tagged templates like figma.tsx. Parser-based files use figma.connect() and are published via the CLI. This Skill covers parserless templates only.

Does Figma Code Connect work on the Free or Professional plan?▼

No, Code Connect requires an Organization or Enterprise Figma plan. Components must also be published to a Figma team library, and the Figma MCP server must be connected before templates can be created.

Why does my Code Connect template show [object Object] in Figma?▼

This happens when template results are string-concatenated or joined with .map().join(). executeTemplate().example is a ResultSection[] object, so always interpolate it inside tagged templates like figma.tsx`${snippet}` instead of using + or join().

How do I map Figma variant properties to code props?▼

Use instance.getEnum with a mapping object, for example instance.getEnum('Size', { Small: 'sm', Medium: 'md', Large: 'lg' }). Text properties use getString, booleans use getBoolean, and instance swap slots use getInstanceSwap.

Why is my nested child component not found by the parent template?▼

The child template must set nestable: true in both its metadata export and in templateDataJson when registering via add_code_connect_map. Without nestable in templateDataJson, the child is not loaded into the parent's evaluation context.

Related Skills

Explore More Software Engineering Skills→
calvingitcalvingit
2

figma-code-connect

Generate Figma Code Connect template files from component URLs.

Community
Advanced
LedgerHQLedgerHQ
23

code-connect

Creates and maintains Figma Code Connect files mapping Figma components to React code.

Official
Intermediate
DevPelumiDevPelumi

figma-code-connect

Generate .figma.ts Code Connect templates mapping Figma components to code snippets.

Community
Advanced
EmpoweredHouseEmpoweredHouse

speckit-implement

Execute tasks.md and plan.md to implement software end-to-end.

Official
Advanced