skills.rest
ahandsel
ahandselCOMMUNITY
Explore all skills by this author →
GitHub

figma-code-connect

Generate Figma Code Connect .figma.ts template files from Figma URLs.

1|Updated May 21, 2020
Search Tags:#automation#typescript#design system#figma#component mapping#code connect
One-click install
npx skills add https://github.com/ahandsel/debugging_log --skill figma-code-connect-ahandsel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-code-connect
Source: https://github.com/ahandsel/debugging_log/tree/main/skills/figma-code-connect
Command: npx skills add https://github.com/ahandsel/debugging_log --skill figma-code-connect-ahandsel

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @figma/code-connect, and 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 that Figma components are accurately mapped to their corresponding code snippets.

Core Features & Use Cases

  • Automated Template Generation: Parses Figma URLs to generate .figma.ts files that link design properties to code props.
  • Dynamic Property Mapping: Automatically handles text, boolean, variant, and slot properties to ensure design-to-code parity.
  • Use Case: When a design system team updates a button component in Figma, this Skill helps developers quickly generate or update the connection file to reflect new variants or props in the codebase.

Quick Start

Use the figma-code-connect skill to generate 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 map Figma components to code automatically?▼

Figma Code Connect template files map design components to code snippets by resolving Figma node IDs and component properties into TypeScript files. This automation ensures design-to-code parity and synchronizes your design system with your React codebase.

Does Figma Code Connect work with TypeScript and React codebases?▼

Yes, Figma Code Connect supports TypeScript and React codebases by generating .figma.ts template files. It translates Figma component properties, such as variants and slots, directly into TypeScript props to maintain design-to-code parity.

How do I generate .figma.ts files from a Figma URL?▼

You generate .figma.ts files by parsing a provided Figma URL. The skill extracts the Figma node ID and dynamically maps text, boolean, variant, and slot properties into the corresponding TypeScript template file.

What are the limitations of automating Figma component mapping?▼

The primary limitation of automating Figma component mapping is its strict dependency on the @figma/code-connect package and React-based codebases. It specifically generates TypeScript template files and may not support other frontend frameworks without manual adjustments.

Related Skills

Explore More Software Engineering Skills→
jscraikjscraik
8

figma

Extract design context and assets from Figma files via MCP.

Community
Advanced
gizixgizix
2

component-patterns

Implement React compound components, render props, and composition patterns with TypeScript.

Community
Intermediate
schalkneethlingschalkneethling
7

css-tokens

Generate a tokens.css file with CSS custom properties for theming and dark mode.

Community
Basic
DevPelumiDevPelumi

figma-code-connect

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

Community
Advanced