·code-connect-components
*

code-connect-components

✓
figma/mcp-server-guideGitHub: figma/mcp-server-guideFonte: figma/mcp-server-guide

Collega i componenti di progettazione Figma ai componenti di codice utilizzando Code Connect. Utilizzare quando l'utente dice "connetti codice", "connetti questo componente al codice", "connetti Figma al codice", "mappa questo componente", "collega il componente al codice", "crea mappatura connessione codice", "aggiungi connessione codice", "connetti il ​​progetto al codice" o desidera stabilire mappature tra i progetti Figma e le implementazioni del codice. Richiede la connessione al server Figma MCP.

figma·code·connect·components
579Installazioni·21Tendenza·@figma

Installazione

GitHub: figma/mcp-server-guide
$npx skills add https://github.com/figma/mcp-server-guide --skill code-connect-components

Come installare code-connect-components

Installa rapidamente la skill AI code-connect-components nel tuo ambiente di sviluppo tramite riga di comando

  1. Apri il terminale: Apri il tuo terminale o strumento da riga di comando (Terminal, iTerm, Windows Terminal, ecc.)
  2. Esegui il comando di installazione: Copia ed esegui questo comando: npx skills add https://github.com/figma/mcp-server-guide --skill code-connect-components
  3. Verifica l'installazione: Dopo l'installazione, la skill verrà configurata automaticamente nel tuo ambiente AI di coding e sarà pronta all'uso in Claude Code, Cursor o OpenClaw

Fonte: figma/mcp-server-guide.

SKILL.md

Visualizza raw

This skill helps you connect Figma design components to their corresponding code implementations using Figma's Code Connect feature. It analyzes the Figma design structure, searches your codebase for matching components, and establishes mappings that maintain design-code consistency.

When the user provides a Figma URL with file key and node ID, first run getmetadata to fetch the node structure and identify all Figma components.

IMPORTANT: When extracting the node ID from a Figma URL, convert the format:

Collega i componenti di progettazione Figma ai componenti di codice utilizzando Code Connect. Utilizzare quando l'utente dice "connetti codice", "connetti questo componente al codice", "connetti Figma al codice", "mappa questo componente", "collega il componente al codice", "crea mappatura connessione codice", "aggiungi connessione codice", "connetti il ​​progetto al codice" o desidera stabilire mappature tra i progetti Figma e le implementazioni del codice. Richiede la connessione al server Figma MCP. Fonte: figma/mcp-server-guide.

Fatti (pronti per citazione)

Campi e comandi stabili per citazioni AI/ricerca.

Comando di installazione
npx skills add https://github.com/figma/mcp-server-guide --skill code-connect-components
Fonte
figma/mcp-server-guide
Categoria
*Creatività
Verificato
✓
Prima apparizione
2026-02-01
Aggiornato
2026-03-10
URL
https://www.learn-skills.dev/it/skills/figma/mcp-server-guide/code-connect-components

Browse more skills from figma/mcp-server-guide

Risposte rapide

Che cos'è code-connect-components?

Collega i componenti di progettazione Figma ai componenti di codice utilizzando Code Connect. Utilizzare quando l'utente dice "connetti codice", "connetti questo componente al codice", "connetti Figma al codice", "mappa questo componente", "collega il componente al codice", "crea mappatura connessione codice", "aggiungi connessione codice", "connetti il ​​progetto al codice" o desidera stabilire mappature tra i progetti Figma e le implementazioni del codice. Richiede la connessione al server Figma MCP. Fonte: figma/mcp-server-guide.

Come installo code-connect-components?

Apri il tuo terminale o strumento da riga di comando (Terminal, iTerm, Windows Terminal, ecc.) Copia ed esegui questo comando: npx skills add https://github.com/figma/mcp-server-guide --skill code-connect-components Dopo l'installazione, la skill verrà configurata automaticamente nel tuo ambiente AI di coding e sarà pronta all'uso in Claude Code, Cursor o OpenClaw

Dov'è il repository sorgente?

https://github.com/figma/mcp-server-guide

Dettagli

Categoria
*Creatività
Fonte
skills.sh
Prima apparizione
2026-02-01

Skills correlate

implement-design
4.1K Installazioni
create-design-system-rules
853 Installazioni