Skills
.Work. You
Rest

figma.create-connect

Official

Generate Figma Code Connect mappings

Design & Creative#automation#react#design system#figma#component mapping#code connect
Authorcoinbase
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the creation of Figma Code Connect mapping files, streamlining the process of connecting design components to their code implementations.

Core Features & Use Cases

  • Automated Mapping File Generation: Creates *.figma.tsx files based on Figma component properties and React component source code.
  • Code Connect Integration: Facilitates seamless integration between Figma designs and React components using the Code Connect API.
  • Use Case: A designer needs to connect a new button component in Figma to its React implementation. This Skill can generate the necessary mapping file, saving developer time and ensuring consistency.

Quick Start

Use the figma.create-connect skill to generate a Code Connect mapping file for the Button component using the provided Figma URL.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: figma.create-connect
Download link: https://github.com/coinbase/cds/archive/main.zip#figma-create-connect

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.