Figma Code Connect Components

nexu-io/figma-code-connect-components

| Connect Figma design components to code components using Code Connect so design-system updates flow into the codebase automatically.

301 tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

83386

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/nexu-io/open-design --skill figma-code-connect-components

4 sections, as written by the author

> Curated from Figma's MCP server guide.

Connect Figma design components to code components using Code Connect so design-system updates flow into the codebase automatically.

This catalogue entry advertises the skill in Open Design so the agent

discovers it during planning. To run the full upstream workflow with

its original assets, scripts, and references, install the upstream

bundle into your active agent's skills directory:

# Inspect the upstream README for exact paths
open https://github.com/figma/skills

Then ask the agent to invoke this skill by name (figma-code-connect-components) or with

one of the trigger phrases listed in this skill's frontmatter.

Copy the folder

Take nexu-io/figma-code-connect-components from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.