skills.rest
bitovi
bitoviOFFICIAL
Explore all skills by this author →
WebsiteGitHub

figma-connect-shadcn

Generate .figma.tsx files for unconnected shadcn/ui components via Code Connect.

1|6|Updated Dec 22, 2025
Search Tags:#automation#frontend#figma#design-system#shadcn#ui-components#code-connect
One-click install
npx skills add https://github.com/bitovi/carton-case-management --skill figma-connect-shadcn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-connect-shadcn
Source: https://github.com/bitovi/carton-case-management/tree/main/.github/skills/figma-connect-shadcn
Command: npx skills add https://github.com/bitovi/carton-case-management --skill figma-connect-shadcn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Bridges shadcn/ui components with their Figma design counterparts to keep code and design in sync automatically.

Core Features & Use Cases

  • Code-Driven Synchronization: Uses Code Connect to attach React components to corresponding Figma components.
  • Incremental & Safe: Scans only unconnected components and avoids touching already-connected mappings.
  • CI/CD Readiness: Designed to run in automated pipelines to keep design-system alignment.

Quick Start

Run the Code Connect workflow to generate Figma-compatible files for all shadcn UI components.

Frequently Asked Questions about figma-connect-shadcn

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

FAQPage Schema
How do I sync shadcn/ui components with Figma designs?▼

You can sync shadcn/ui components with Figma designs by running the Code Connect workflow, which automatically generates .figma.tsx files to attach React components to their corresponding Figma design elements.

What is Figma Code Connect for shadcn/ui?▼

Figma Code Connect is a mechanism that bridges shadcn/ui components with their Figma design counterparts. It automatically attaches React code to Figma components to keep design-system alignment synchronized across both artifacts.

Do I need a Figma access token to connect shadcn/ui components?▼

Yes, connecting shadcn/ui components requires a valid Figma access token. You also need a local environment with Code Connect scripts and a discovered components.json file to generate the necessary .figma.tsx files.

Can I automate Figma Code Connect in a CI/CD pipeline?▼

Yes, this Skill is designed for CI/CD readiness, allowing you to run the Code Connect workflow in automated pipelines to continuously maintain design-system alignment between shadcn/ui code and Figma artifacts.

How does Code Connect handle already connected shadcn/ui components?▼

Code Connect handles already connected shadcn/ui components safely by scanning only unconnected components and avoiding touching already-connected mappings, ensuring incremental updates without disrupting existing design-system synchronization.

What are the limitations of automating shadcn/ui Figma synchronization?▼

Limitations of automating shadcn/ui Figma synchronization include strict environment requirements: a valid Figma access token, a discovered components.json, and local Code Connect scripts are all mandatory to generate or update .figma.tsx files successfully.

Related Skills

Explore More Design & Creative Skills→
bitovibitovi
1

figma-connect-component

Generate .figma.tsx Code Connect mappings from Figma component properties.

Official
Advanced
ThanapatJuthaThanapatJutha

component-spec-layer

Generate .figma.tsx wrapper components that render UI library components without business logic.

Community
Intermediate
HuynhLy230296HuynhLy230296

verify-ui

Verify UI implementation against Figma designs and GitHub ticket requirements.

Community
Advanced
DevPelumiDevPelumi

figma-code-connect

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

Community
Advanced