Figma è un potente strumento per la progettazione e la prototipazione di interfacce, ma può anche essere esteso con plug-in per aggiungere funzionalità personalizzate. La creazione di questi plug-in può essere un processo noioso e dispendioso in termini di tempo, ma con l'aiuto di ChatGPT, un modello di linguaggio di grandi dimensioni addestrato da OpenAI, è possibile generare codice per i plug-in utilizzando solo una descrizione del risultato che si desidera ottenere.

In questo articolo, dimostrerò l'uso di ChatGPT per generare codice per tre diversi plugin. Il codice per questi plugin verrà utilizzato così com'è, senza alcuna modifica manuale. Quindi, il primo plug-in comprimerà tutti i livelli espansi nell'elenco dei livelli. Il secondo genererà un codice QR con la possibilità di scaricare il risultato. Il terzo cercherà il vecchio nome del prodotto e lo sostituirà con quello nuovo in ogni blocco di testo della pagina. Interessante? Andiamo avanti!

Plug-in Comprimi nodi

Il primo plug-in che voglio dimostrare è quello che può comprimere tutti i nodi come INSTANCE, FRAME, GROUP, ecc. quando l'utente esegue il plug-in. Naturalmente, Figma ha una scorciatoia (ALT+L) che esegue la stessa azione, ma esploreremo la capacità di ChatGPT di creare semplici plug-in per Figma per vedere come funzionerebbe e quanto tempo ci vorrebbe.

• Mostra un esempio del plug-in Figma che trova frame nella pagina corrente e comprime frame, gruppi e istanze secondari su tutti i livelli di annidamento. Quindi comprimere i fotogrammi principali posizionati sull'area di disegno. Quindi chiudi il plug-in e visualizza una notifica con il testo "Attività completata".
• 30 minuti per ottenere il risultato di lavoro e testarlo in Figma.
• 40 minuti per ottenere il codice ottimizzato.

Come puoi vedere, ChatGPT sta generando una soluzione non ottimale, con molto codice non necessario. Tuttavia, il codice sopra funziona immediatamente e può risolvere problemi specifici in Figma senza ulteriori modifiche.

Come esercizio extra, possiamo anche provare a chiedere all'IA di ottimizzare il codice e, dopo diversi tentativi, il codice avrà questo aspetto:

Il risultato dell'ottimizzazione è fantastico! AI ha rimosso tutte le parti non necessarie del codice e lasciato solo quelle importanti che ti danno lo stesso risultato del codice originariamente generato.

Tuttavia, è importante tenere presente che chiedere all'IA di ottimizzare il codice senza fornire il contesto e lo scopo può portare a un codice che funziona solo parzialmente o non funziona affatto.

Plug-in Generatore QR

Il secondo plug-in è quello che apre la finestra dell'interfaccia utente di Figma e genera un codice QR con la possibilità di scaricare il risultato come file .png dopo che l'utente fa clic sul pulsante "Genera". Questo plugin è un po' più complesso del primo e richiede una chiara comprensione di ciò che si vuole ottenere. In sostanza, se chiedi a ChatGPT di generare codice, in genere proporrà una soluzione complessa che potrebbe richiedere una comprensione più approfondita del processo di sviluppo. Il codice iniziale generato dall'intelligenza artificiale richiedeva la suddivisione del codice in file JS e HTML, l'installazione di pacchetti npm con librerie JavaScript e l'utilizzo di bundler come Webpack o Babel. Se non hai familiarità con questi strumenti, potresti rimanere bloccato e abbandonare l'idea di generare una soluzione funzionante. Quindi, dopo diversi tentativi,

• Mostra un esempio del codice JavaScript per il plug-in Figma che utilizza solo un file ui.html per generare un codice QR dopo che l'utente aggiunge l'URL al campo di input e preme il pulsante "Genera". Il plug-in dovrebbe utilizzare la libreria "qrcodejs" come collegamento al CDN. Il codice QR generato dovrebbe essere mostrato nella stessa finestra dell'interfaccia utente di Figma con la possibilità di scaricare il risultato.
• 2 ore per ottenere un risultato funzionante. Ho passato la maggior parte del tempo a cercare di capire quale libreria avrei dovuto usare per generare il codice QR.

Funziona! Solo wow! Non è vero? Le uniche cose richieste sono una chiara comprensione del risultato desiderato, la capacità di costruire richieste adeguate e tenere conto di tutti gli aspetti importanti che dovrebbero riflettersi nella soluzione finale. Di seguito è riportato un esempio del codice generato da ChatGPT:

Un altro esercizio aggiuntivo. Chiediamo all'intelligenza artificiale di abbellire l'interfaccia utente esistente e applicare alcuni stili CSS al nostro plug-in.

Di seguito è riportato un esempio degli stili CSS generati da ChatGPT:

E questo è il risultato finale con gli stili applicati.

Trova e sostituisci plug-in

Il terzo plug-in cerca le istanze di un vecchio nome di prodotto e le sostituisce con una nuova. Sebbene non sia particolarmente degno di nota dal punto di vista dello sviluppo, funge da esempio di come l'intelligenza artificiale può essere utilizzata per risolvere i problemi e migliorare il codice non funzionante utilizzando la descrizione degli errori dalla console per identificare e risolvere i problemi.

• Mostra un esempio del codice JavaScript senza "richiesta" per il plug-in Figma che farà quanto segue: non utilizzare funzioni asincrone, trova tutti i nodi (frame, gruppo, istanza, simbolo, ecc.) nella pagina corrente con nodi di testo che contengono i caratteri "Acronis Backup", sostituire "Acronis Backup" con "Acronis Cyber ​​Protect", chiudere il plug-in, mostrare la notifica.
• 20 minuti, inclusa la risoluzione dei problemi, per ottenere un risultato funzionante.

Anche il secondo tentativo non ha avuto successo. Ho riscontrato un altro errore in Figma e ho chiesto all'IA di migliorare nuovamente il codice.

Dopo la seconda richiesta, AI ha consigliato di modificare la logica del plug-in incorporando una chiamata Figma UI e una funzione di ascolto di eventi. La funzione listener di eventi implica che un evento specifico deve verificarsi, ad esempio, nel file ui.html prima che la funzione venga eseguita. Questo ha iniziato a sembrare una soluzione inutilmente complessa che probabilmente avrebbe richiesto una notevole quantità di tempo per la risoluzione dei problemi e il raggiungimento del codice funzionale.

Quindi, per non complicare la soluzione, ho chiesto ad AI di non utilizzare la funzione di listener di eventi. E infine, ChatGPT ha generato un codice che funziona come previsto.

Di seguito è riportato un esempio del codice generato da ChatGPT:

Insomma

Lo sviluppo di plug-in per Figma utilizzando ChatGPT può essere un potente strumento per automatizzare attività di basso livello e generare parti specifiche di codice. Tuttavia, è importante avere una chiara comprensione dei tuoi obiettivi e dei passaggi necessari per raggiungerli al fine di utilizzare ChatGPT in modo efficace. È anche importante tenere presente che il codice generato dall'intelligenza artificiale può essere eccessivamente complesso e potrebbe richiedere l'ottimizzazione. Inoltre, la mancanza di contesto fornito all'intelligenza artificiale può portare alla generazione di codice che non funziona come previsto o non funziona affatto.

Inoltre, ChatGPT è ottimo per la risoluzione dei problemi perché può generare rapidamente codice basato su input e requisiti specifici. Inoltre, questo può far risparmiare una notevole quantità di tempo e fatica rispetto alla scrittura o alla riscrittura manuale del codice o alla ricerca su Google delle possibili soluzioni da qualche parte su StackOverflow.

Altre storie sugli strumenti

• Costruttore di email per Figma
• ffmpeg + ImageMagick. Converti video in GIF utilizzando Terminal.app su macOS
• Come creare un plug-in di Sketch che collegherà i simboli della tua libreria con qualsiasi documentazione esterna
• Come ottimizzare le immagini utilizzando macOS Terminal + TinyPNG CLI

• Facebook
• medio