Figma Code Connect Components

What This Skill Does

This skill connects Figma design components to code implementations using Figma's Code Connect. It analyzes the design structure, searches the codebase for matching components, and establishes mappings to maintain design-code consistency. This skill is for users who want to link their Figma designs to their codebase.

When to Use

• Connect a button component in Figma to its React code.
• Map a UI component to its corresponding code.
• Maintain consistency between design and code.
• Identify unmapped components in a Figma file.
• Update Code Connect mappings after code changes.
• Link a component set to its code implementation.

Key Features

• Fetches component info from the Figma scenegraph.
• Identifies published components in the selection.
• Checks existing Code Connect mappings.
• Filters out already-connected components.
• Returns component names and properties.
• Suggests code connect mappings.