La prima volta che Claude Code ha disegnato qualcosa nel mio file Figma ho pensato: questo mi aprirà tantissime possibilità. Ed è andata così. Oggi Figma è il posto in cui si svolge la maggior parte del lavoro del mio agente: in due mesi, la sua skill per Figma rappresentava 480 su 528 chiamate a skill. Del mio setup parlo più a fondo in Claude Code non è per il codice.
Perché Figma e non la generazione di immagini
Perché mi serve in vettoriale. Un'immagine generata è una figura piatta. Un file Figma è qualcosa su cui posso continuare a lavorare:
- Livelli e testo vero. Posso correggere un refuso, cambiare un numero o tradurre una slide senza ridisegnare niente.
- Il mio design system. Colori, tipografia e componenti vengono dai miei token, così ogni nuovo elemento si abbina ai precedenti.
- Stampa e web da un'unica fonte. Gli stessi frame si esportano come file di stampa per gli stand fieristici e come SVG per il mio sito.
- Ci metto ancora mano io. Posso aprire il file e cambiare qualsiasi cosa da sola.
Cosa c'è nel mio Figma
- Il mio negozio di template Notion. Il suo design system ha 55 variabili, 13 stili di testo e 6 set di componenti, oltre alle copertine e ai diagrammi della prima ondata di 28 articoli del blog, ognuno con la versione per smartphone.
- Presentazioni aziendali in tre lingue. Una presentazione sui data center container ha 15 slide in inglese, russo e turco, tenute allineate.
- Stand fieristici e stampa. Pannelli per gli stand, banner, un pieghevole a tre ante, voucher e certificati, esportati per la stampa.
- Questo sito. Le icone delle sezioni nella home page di zoyak.tech sono nate in Figma.
Il negozio di template è il lavoro di cui vado più fiera. È ottimo non solo dal punto di vista del design ma anche dei contenuti, e conto di riutilizzarne i testi per i miei studi.
Il ciclo: l'agente abbozza, io modifico, sul sito va la mia versione
L'agente non pubblica mai un design direttamente sul sito. Disegna nel mio file, io guardo, modifico a mano, e solo allora il risultato viene esportato.
Le icone della home page sono un buon esempio. L'agente ha disegnato diverse direzioni affiancate, io ne ho scelta una e ho rifinito i dettagli da sola, fino ad assottigliare il blocco delle pagine sul libro di Studies. Gli SVG del sito sono stati esportati dai miei frame modificati, quindi ogni ritocco fatto a mano è andato online esattamente come l'avevo lasciato.
Cosa ha dovuto imparare l'agente su Figma
Lavorare tramite l'API di Figma non è come lavorare in Figma a mano. Oggi la memoria del mio agente contiene 17 note solo su Figma. Alcune delle lezioni:
- La larghezza del testo va misurata. Non si può indovinare dal numero di lettere.
- I frame ritagliano il contenuto. Un elemento che «c'è» può essere invisibile.
- L'opacità sta in due posti. L'opacità del riempimento e quella del livello sono cose diverse.
- Gli ID dei nodi scadono. Un riferimento che ieri funzionava oggi può non puntare a niente.
- I loghi non passano da un file all'altro via API, quindi si ricostruiscono o si copiano a mano.
- L'export SVG ha le sue stranezze, quindi gli export vengono controllati prima di andare online.
- Le animazioni non si possono creare tramite l'API.
Le mie regole per il lavoro di design
L'agente segue anche le regole che gli ho dato per tutto ciò che è visivo:
- Prima mostralo in Figma, non sul sito live.
- Set di icone veri, mai emoji, in tutto ciò che va pubblicato.
- Quando il soggetto è uno strumento specifico, usa il suo vero logo, ridisegnato nel mio stile, non una metafora.
- Le infografiche restano chiare e ariose: sfondi tenui, gradienti morbidi, un solo colore d'accento.
Perché conta
Vettoriale significa che il lavoro resta mio. L'agente mi porta a una prima versione in pochi minuti, e tutto ciò che viene dopo resta modificabile, da lui o da me. Per una persona che pensa per immagini ma non ha mai avuto un team di design a disposizione, è proprio l'opportunità che ho visto il primo giorno.