skills.rest
Charitablebusinessronin
CharitablebusinessroninCOMMUNITY
Explore all skills by this author →
GitHub

figma-code-connect

Maps Figma components to Code Connect templates via .figma.ts generation.

Updated Mar 18, 2026
Search Tags:#automation#typescript#template#figma#design-to-code#code-connect
One-click install
npx skills add https://github.com/Charitablebusinessronin/Allura_Memory --skill figma-code-connect-charitablebusinessronin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-code-connect
Source: https://github.com/Charitablebusinessronin/Allura_Memory/tree/main/.opencode/skills/figma-code-connect
Command: npx skills add https://github.com/Charitablebusinessronin/Allura_Memory --skill figma-code-connect-charitablebusinessronin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Code-to-template pairing for Figma components to automate the creation of Code Connect templates that map designs to code.

Core Features & Use Cases

  • Discover and map Figma components to predefined Code Connect templates.
  • Generate TypeScript/JavaScript templates (.figma.ts) based on component properties, including strings, booleans, enums, and instance swaps.
  • Support multi-component workflows by generating templates for each unmapped component in a selection, with appropriate source mappings and metadata.

Quick Start

Provide a Figma component URL and let the tool generate a Code Connect template for the selected component.

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?▼

Figma Code Connect templates map design components to code by parsing a Figma URL, extracting component properties like strings and booleans, and emitting a .figma.ts template with correct metadata for automated design-to-code generation.

What is the best way to map unmapped Figma components to code?▼

Mapping unmapped Figma components to code involves discovering them via get_code_connect_suggestions, extracting their properties, and emitting individual .figma.ts templates with appropriate source mappings and metadata for each component.

Does Figma Code Connect support TypeScript template generation for instance swaps and enums?▼

Figma Code Connect supports TypeScript template generation by extracting component properties including strings, booleans, enums, and instance swaps, and emitting structured .figma.ts files with the correct metadata for code generation.

Can I generate Code Connect templates for multiple Figma components at once?▼

You can generate Code Connect templates for multiple Figma components by discovering unmapped components in a selection with get_code_connect_suggestions and emitting individual .figma.ts templates with appropriate source mappings and metadata for each one.

How do I start automating design-to-code workflows with Figma URLs?▼

Automating design-to-code workflows starts by parsing a Figma component URL to extract its properties and emitting a .figma.ts Code Connect template with correct metadata, ensuring consistent component mappings across projects.

Why are my Figma Code Connect templates missing component properties?▼

Figma Code Connect templates may miss component properties if the Figma URL parsing fails to extract strings, booleans, enums, or instance swaps, requiring you to rediscover unmapped components with get_code_connect_suggestions and regenerate the .figma.ts file.

Related Skills

Explore More Software Engineering Skills→
coinbasecoinbase
493

code-connect-best-practice

Provide guidelines for writing Figma Code Connect property mappings.

Official
Basic
saajunaidsaajunaid

design-system-tokens

Generate and validate design tokens as CSS variables across three-layer architectures.

Community
Intermediate
ahandselahandsel
1

figma-code-connect

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

Community
Advanced
DevPelumiDevPelumi

figma-code-connect

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

Community
Advanced