Figma Canvas (AI agent canvas)

Cos'è Figma Canvas?

Figma Canvas, come descritto in questo post del blog Figma, è il flusso di lavoro della canvas di Figma aperto agli agenti AI per consentire loro di progettare direttamente all'interno dei file Figma. Lo scopo principale è permettere agli agenti di creare e aggiornare asset di design utilizzando lo stesso contesto di design mantenuto dai team in Figma, come design system, componenti, variabili e convenzioni del team.

Il post introduce anche un server Figma MCP in beta per integrare Figma nei flussi di lavoro degli sviluppatori, consentendo a tool basati su LLM di generare e modificare lavori di design mantenendo il legame con la struttura di design esistente.

Caratteristiche Principali

• Gli agenti AI possono scrivere direttamente nei file Figma sulla canvas così che il lavoro generato possa essere creato o modificato nello stesso luogo in cui i team iterano sui design.
• Un server Figma MCP in beta che integra Figma nel flusso di lavoro developer/LLM per supportare generazione di codice informata dal design e operazioni sugli asset di design.
• Lo strumento use_figma per operazioni sulla canvas che consente ai client MCP (inclusi Claude Code e Codex menzionati nel post) di generare e modificare asset di design legati al design system.
• Contesto condiviso tra codice e canvas così che gli agenti possano passare fluidamente tra l'aggiornamento di UI derivate dal codice e il perfezionamento dei design in Figma.
• Skills per guidare il comportamento degli agenti usando istruzioni in markdown dove le skills definiscono i passaggi del flusso di lavoro, la sequenza e le convenzioni da seguire in Figma.

Come Usare Figma Canvas

1. Usa un client MCP che supporta il server MCP di Figma (il post menziona tool come Claude Code e Codex) per accedere alle capacità di Figma via MCP.
2. Usa lo strumento use_figma per dirigere l'agente a creare o aggiornare componenti e altri asset di design all'interno di Figma utilizzando il contesto del tuo design system.
3. Aggiungi indicazioni tramite skills fornendo istruzioni basate su markdown che l'agente può seguire per eseguire task in Figma (inclusa la skill fondamentale /figma-use citata nel post).
4. Opzionalmente sincronizza da UI live usando generate_figma_design partendo da HTML/codice, poi passa a use_figma per modificare quei design con componenti e variabili esistenti.

Casi d'Uso

• Trasforma un codebase in componenti Figma iniziali: Usa una skill come /figma-generate-library per creare nuovi componenti in Figma da un codebase.
• Genera nuovi schermi usando componenti e variabili esistenti: Usa /figma-generate-design così l'agente costruisce design in Figma basandosi su componenti/variabili anziché layout freeform.
• Applica specifiche di accessibilità da descrizioni UI: Usa create-voice per generare specifiche screen reader (VoiceOver, TalkBack, ARIA) da specifiche UI.
• Impone convenzioni di spaziatura tramite regole consapevoli del system: Usa rad-spacing per applicare pattern di spaziatura gerarchici in Figma.
• Collega o rimappa design esistenti a componenti del system: Usa apply-design-system per allineare design ai componenti del system invece di lasciarli come layer scollegati.

FAQ

È una funzionalità a pagamento?

Il post del blog afferma che il supporto per agenti AI sulla canvas di Figma diventerà eventualmente una funzionalità a pagamento basata sull'uso, ma è disponibile gratuitamente durante il periodo beta.

Quali tool consentono agli agenti di lavorare in Figma?

Il post descrive uno strumento use_figma per consentire agli agenti di operare sulla canvas usando il contesto del design system. Menziona anche uno strumento esistente generate_figma_design per tradurre HTML da app/siti live in layer Figma modificabili.

Cosa sono le “skills” in questo flusso di lavoro?

Nel post, le skills sono insiemi di istruzioni scritte come file markdown che modellano come gli agenti operano in Figma, coprendo passaggi del flusso di lavoro, sequenza, convenzioni e conoscenze di dominio necessarie per produrre design durevoli e allineati al brand.

Devo creare un plugin per authoring di skills?

No. Il post dice che chiunque può creare una skill, e che scriverne una non richiede la creazione di un plugin o la scrittura di codice.

Gli strumenti menzionati sono solo per agenti specifici (es. Claude Code)?

Il post nomina Claude Code e Codex come client MCP che possono usare use_figma, e descrive anche “altri client MCP”. Non elenca una matrice di compatibilità completa.

Alternative

• Workflow di traduzione design-to-code (senza modifica diretta della canvas da parte dell'agente): Puoi generare design al di fuori di Figma o trattare Figma come target di sola lettura, quindi ricostruire manualmente gli asset in Figma. Questo differisce per la mancanza di modifiche dirette dell'agente legate al tuo design system all'interno della canvas.
• Usa automazione o plugin solo Figma esistenti: Se hai bisogno di componenti e variabili consistenti senza agenti AI, puoi affidarti a plugin Figma o approcci basati su template. Questo scambia l'autonomia dell'agente per un comportamento più deterministico.
• Workflow di agenti che generano artefatti di design al di fuori di Figma: Alcune toolchain LLM possono produrre file di design o specifiche per un designer da implementare. Rispetto all'approccio descritto qui, gli agenti non modificheranno direttamente gli stessi componenti/variabili Figma tramite use_figma.
• Solo traduzione HTML-to-Figma: Se il tuo focus è importare UI esistenti in Figma (tramite la capability di tipo generate_figma_design) senza il loop di modifica della canvas dell'agente, ciò può ridurre la complessità ma potrebbe richiedere più follow-up manuale per allinearsi al design system.