figma-code-connect

Generates Code Connect templates from Figma components for React/TypeScript projects.

3|Updated Mar 28, 2026

Search Tags:#typescript #templates #react #figma #design-to-code #code-connect #nested-components

Ready to run

npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill figma-code-connect-hulusi-tunc

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: figma-code-connect
Source: https://github.com/hulusi-tunc/unicorn-skills/tree/main/.claude/skills/figma-code-connect
Command: npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill figma-code-connect-hulusi-tunc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Automates creating Code Connect templates from Figma components, accelerating designer-to-developer handoffs by providing ready-to-use templates that map design to code.

Core Features & Use Cases

Generate Code Connect templates for Figma components, including nested descendants and swapped slots.
Map Figma properties to code props with exhaustive variant handling and dynamic template generation.
Reference guidance and examples to validate and adapt templates across React/TypeScript projects.

Quick Start

Install the Code Connect tooling, select a Figma component, and generate a template using the steps described.

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 Figma components for React?▼

To generate Code Connect templates from Figma components for React, you select a target component and apply automated mapping to produce ready-to-use TypeScript templates. This process accelerates designer-to-developer handoffs by directly translating Figma properties into code props.

What is Figma Code Connect and when do I need it for design-to-code handoff?▼

Figma Code Connect is a mechanism that maps Figma design components to code components for seamless design-to-code handoff. You need it when you want to provide developers with ready-to-use React or TypeScript templates that accurately reflect design properties.

Does Code Connect support nested components and slot swaps in TypeScript templates?▼

Yes, Code Connect supports nested descendants and swapped slots within TypeScript templates. It handles exhaustive variant mapping to ensure dynamic template generation accurately reflects complex Figma component structures in your React code.

How do I map Figma properties to code props across multiple variants?▼

You map Figma properties to code props across multiple variants by applying automated Code Connect template generation. This ensures exhaustive variant handling, dynamically translating design attributes into the correct React or TypeScript component props.

Do I need a references directory to use Figma Code Connect templates?▼

Yes, a references directory is required to provide guidance and examples for validating and adapting Code Connect templates. This ensures the generated React and TypeScript templates are accurately mapped and correctly applied across your projects.