Figma MCP (e Dev Mode), Console MCP, Figma Skills, CLI: sono 4 cose diverse!

Ho ricevuto decine di DM con la stessa domanda: "Ma Figma MCP cos'è esattamente? È la stessa cosa di Console MCP?"

No. Per niente. E ci sono anche altri due strumenti che dovresti conoscere.

Prima di tutto: cos'è un MCP?

MCP (Model Context Protocol) è il protocollo che permette a un AI come Claude di parlare con strumenti esterni, tipo Figma. Esistono due modalità:

• MCP locale (stdio): gira sul tuo computer. Più veloce, i dati non escono dalla tua macchina, nessuna chiave API necessaria.
• MCP remoto (server HTTP/SSE): è ospitato su un server cloud. Accessibile da ovunque, ma i dati passano per internet.

Figma MCP ufficiale usa il server remoto. Figma Console MCP usa un bridge locale. La differenza non è solo tecnica, cambia cosa l'AI può fare fisicamente.

1. Figma MCP, il coltellino svizzero ufficiale

Fatto da Figma. L'AI legge i tuoi design, genera codice e ora scrive anche direttamente sul canvas tramite use_figma.

• ✅ Setup facile, integrato, supportato ufficialmente
• ✅ Code Connect integration, export framework-specifici (React, CSS, ecc.)
• ⚠️ 13 tool totali. Rate limit dipendente dal piano. Closed source.
• ⚠️ Fino a ieri: solo lettura. Oggi: scrittura limitata via skills.

Caso d'uso ideale: Design → codice. "Prendi questo componente e scrivimi il React."

1.2 Approfondimento: Figma MCP - Dev Mode

Fa parte della versione desktop e locale del Figma MCP ufficiale. Setup instantaneo per dev. Niente cloud, niente configurazioni complesse. È letteralmente uno switch. È a pagamento, sorry.

Come funziona:

• Apri Figma Desktop, entra in Dev Mode con Shift+D, e nel pannello di destra trovi la sezione MCP server, un pulsante per abilitarlo. Fatto.
• Apri Cursor (o un altro tool analogo) e crea un prompt esplicativo e conciso per collegarti correttamente a questa modalità, chiedendo direttamente all'agente di fare tutto in autonomia e installando tutte le dipendenze necessarie, informandosi riguardo le documentazioni online più aggiornate.
• Done!

Il superpower: la selezione in tempo reale. Il server è selection-based: l'AI capisce quale layer hai selezionato dentro Figma in quel momento. Selezioni un componente, scrivi il prompt nel tuo IDE, e lui lavora esattamente su quello. Nessun link da copiare, nessun export. Puoi interrogare l'AI, hai solo permessi di lettura in questo caso specifico.

Il requisito che fa storcere il naso: gli utenti sul piano Starter o con seat View/Collab sui piani pagati sono limitati a 6 chiamate MCP al mese. Chi ha un Dev seat o Full seat su Professional, Organization o Enterprise ha rate limit per minuto. Quindi sì: per usarlo in modo serio serve un Dev seat su un piano pagato.

In una frase: è il modo più rapido per connettere Figma al tuo IDE, ma rimane uno strumento di lettura pensato per i developer che devono tradurre design in codice. Non crea, non modifica, non gestisce token in bulk. Per quello serve Console MCP.

2. Figma Console MCP, la cassetta degli attrezzi completa

Fatto dalla community (Southleft, TJ Pitre). Open source MIT. Gira dentro Figma tramite un plugin Desktop Bridge.

• ✅ 57+ tool dedicati (variabili, componenti, token, audit, real-time selection)
• ✅ Crea 100 token in una chiamata. Nessun rate limit.
• ✅ L'AI sa cosa stai selezionando in tempo reale via WebSocket.
• ⚠️ Setup più tecnico. Richiede Figma Desktop.

Caso d'uso ideale: design system a scala. "Crea tutti i token Tailwind in Light e Dark mode." Qualche minuto, 242 token colore. A mano ci vorresti ore.

3. Figma Skills, le istruzioni per il tuo agente

Non è un tool separato. Sono file JSON (o markdown) che insegnano all'AI come comportarsi sul canvas Figma: nomi dei layer, naming convention, workflow specifici del tuo progetto. Pensa a loro come al CLAUDE.md del tuo design system: l'agente li legge e sa esattamente come lavorare nel tuo file.

4. Figma CLI, senza MCP, senza plugin, senza API key

È il meno conosciuto dei quattro, ma forse il più interessante per chi vuole semplicità. Si connette direttamente a Figma Desktop via Chrome DevTools Protocol (come un debugger).

• ✅ Zero API key. Zero plugin da installare.
• ✅ Funziona con Claude Code in linguaggio naturale.
• ✅ Meno token bruciati rispetto all'MCP.
• ✅ Gratis, anche con account Figma free.
• ⚠️ Richiede terminale. Per i non-tecnici, può sembrare intimidatorio.

Caso d'uso ideale: designer che lavora con Claude Code, vuole controllo diretto e vuole "addestrare" il proprio agente con un CLAUDE.md personalizzato. Basta un'installazione assistita: il sistema chiede solo di creare un token del proprio account Figma e di dargli l'url del progetto.

Quale usare?

La risposta onesta: dipende da dove sei nel tuo workflow.

• Focalizzato sull'estrazione di dati per gli sviluppatori (Code Connect)? → Figma MCP
• Vuoi manipolare Figma direttamente con capacità di scrittura e gestione avanzata di un design system con decine di token? → Console MCP
• Vuoi automazione tramite terminale con Claude Code o Cursor e controllo massimo? → Figma CLI
• Vuoi un assistente personale che rispetti le tue convenzioni di naming? → Figma Skills (in combo con qualsiasi degli altri)

Sono complementari, non competitivi.

Il mio take: siamo ancora agli inizi. Questi tool fanno cose che 6 mesi fa sembravano fantascienza. Il salto di produttività è reale, ma solo se capisci cosa stai usando.

#figma #mcp #ai #design