skills.rest
xleliberty
xlelibertyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma-code-connect

Generate TypeScript .figma.ts mapping files from Figma component properties.

Updated Nov 3, 2016
Search Tags:#automation#typescript#design system#developer experience#figma#code connect
One-click install
npx skills add https://github.com/xleliberty/mydotfiles --skill figma-code-connect-xleliberty
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-code-connect
Source: https://github.com/xleliberty/mydotfiles/tree/main/.config/.claude/plugins/cache/claude-plugins-official/figma/2.1.3/skills/figma-code-connect
Command: npx skills add https://github.com/xleliberty/mydotfiles --skill figma-code-connect-xleliberty

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill bridges the gap between design and development by automating the creation of Code Connect template files, ensuring your Figma design system stays perfectly synced with your codebase.

Core Features & Use Cases

  • Automated Template Generation: Automatically generates .figma.ts files that map Figma component properties to your actual code props.
  • Intelligent Discovery: Uses Figma MCP tools to identify unmapped components and fetch their property definitions directly from the design file.
  • Use Case: When a designer updates a button variant in Figma, use this Skill to quickly update the corresponding Code Connect mapping, ensuring developers see the correct code snippet in Dev Mode.

Quick Start

Use the figma-code-connect skill to create a template for the button component located at the provided Figma URL.

Frequently Asked Questions about figma-code-connect

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

FAQPage Schema
How do I sync Figma components to code automatically?▼

Figma Code Connect maps design component properties to source code snippets by generating .figma.ts template files. This ensures your design system stays synced with your codebase automatically.

How do I generate Code Connect files for unmapped Figma components?▼

You can generate Code Connect files by fetching component properties directly from the Figma design file using the Figma MCP server. The Skill intelligently identifies unmapped components and creates the corresponding TypeScript mapping files.

Do I need a Figma MCP server to use Code Connect?▼

Yes, an active Figma MCP server integration is required. The Skill uses MCP tools to fetch component property definitions directly from the design file and generate the necessary mapping templates.

Can I update Figma Dev Mode code snippets when a designer changes a variant?▼

Yes, when a designer updates a component variant, you can use this Skill to update the corresponding Code Connect mapping. This ensures developers see the correct code snippet in Dev Mode.

What format do Code Connect mapping files use for TypeScript projects?▼

Code Connect mapping files use the .figma.ts format for TypeScript projects. These files explicitly map Figma component properties to your actual code props to facilitate design-to-code translation.

Are there limitations when automating Figma design-to-code translation?▼

The main limitation is the strict requirement for an active Figma MCP server and adherence to project-specific configuration files. Without this server integration, the Skill cannot fetch properties or generate mapping templates.

Related Skills

Explore More Software Engineering Skills→
Moliboy5000Moliboy5000

figma

Generates Tailwind-CSS-based React components from Figma designs and user stories.

Community
Intermediate
mkatoguimkatogui
3

figma-handoff

Sync Figma tokens with design-tokens.json and validate DTCG structure.

Community
Advanced
PallepadehatPallepadehat
1

tailwind-v4-shadcn

Automate Tailwind v4 and shadcn/ui setup in Vite React projects.

Community
Advanced
figmafigma
1.9k

code-connect-components

Map Figma components to code implementations using Code Connect.

Official
Advanced