code-connect-impl

Automate Figma Code Connect mapping files for React components.

2|Updated Jun 26, 2026

Search Tags:#automation #React #Figma #mapping #Code Connect

Ready to run

npx skills add https://github.com/bRRRITSCOLD/compainy --skill code-connect-impl

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: code-connect-impl
Source: https://github.com/bRRRITSCOLD/compainy/tree/main/skills/code-connect-impl
Command: npx skills add https://github.com/bRRRITSCOLD/compainy --skill code-connect-impl

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the implementation and publication of Figma Code Connect mappings for React components, streamlining the process of linking Figma designs to code.

Core Features & Use Cases

Automated Mapping: Automates the creation of *.figma.tsx mapping files for React components.
Validation and Publishing: Validates mappings and publishes them to Figma, ensuring accurate code snippets in Dev Mode.
Fallback for Pro Plans: Provides a manual mapping document and token parity check for projects on Figma Pro or lower plans.

Quick Start

Use the code-connect-impl skill to implement and publish Code Connect mappings for your React components.

Frequently Asked Questions about code-connect-impl

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

FAQPage Schema

How do I automate Figma Code Connect mappings for React components?▼

You can automate Figma Code Connect mappings by using a Skill that generates *.figma.tsx mapping files for your React components, validates the mappings, and publishes them directly to Figma for use in Dev Mode.

What is Figma Code Connect used for in a React component library?▼

Figma Code Connect links your design files to your React component library by generating mapping files, ensuring that developers see accurate code snippets and component mappings directly within Figma Dev Mode.

Do I need a Figma Enterprise plan to use Code Connect with React?▼

No, Figma Organization and Enterprise plans are fully supported for automated publishing, but a fallback option provides a manual mapping document and token parity check for projects on Figma Pro plans.

How to validate and publish Code Connect mappings to Figma Dev Mode?▼

To validate and publish Code Connect mappings, the Skill checks your generated React component mappings and pushes them via the Figma API, ensuring accurate code snippets appear in Dev Mode.

What are the limitations of Figma Code Connect for React on Pro plans?▼

Figma Pro plans lack automated publishing support, so the limitation is bypassed by generating a manual mapping document and performing a token parity check instead of using the Figma API directly.

Can I use Code Connect with React without setting up Figma API access?▼

No, Figma API access is required to automate the implementation and publication of Code Connect mappings, unless you are using the manual fallback document approach available for Figma Pro plans.