In che modo DUOTONE risparmia oltre 80 ore per progetto gestendo l'intero flusso di lavoro in Figma

Fondata a Seul nel 2018, DUOTONE è un'agenzia di design digitale composta da 60 persone, specializzata in UX/UI design e sistemi di progettazione. Lo studio collabora con aziende in una vasta gamma di settori, tra cui finanza, commercio, automotive e contenuti, per realizzare progetti digitali.

Da quando Figma è stato implementato in tutta l'azienda cinque anni fa, è diventato parte integrante del loro sistema operativo. Dalla pianificazione e documentazione all'architettura del sistema di progettazione e alla produzione visiva, il team gestisce l'intero flusso di lavoro all'interno dell'ecosistema Figma, con i seguenti vantaggi:

• Riduzione del 90% del tempo per la stesura dei documenti di specifica al momento del passaggio del progetto, con un risparmio di oltre 80 ore su ogni progetto
• 20% di tempo in meno sul lavoro di produzione visiva
• Il tempo necessario per il QA dei report è stato ridotto da ore a 5-10 minuti

Da file sparsi a una singola area di lavoro

In passato, DUOTONE lavorava con diversi stakeholder su numerosi documenti, il che portava a conflitti di versione e interruzione dei passaggi di consegne. Da quando tutto è stato consolidato in Figma, la comunicazione con i clienti è cambiata completamente. Decisioni e discussioni avvengono direttamente nell'area di lavoro e garantiscono una comunicazione e passaggi di consegne più efficienti.

Anche le consegne agli sviluppatori sono diventate molto più efficienti. Prima, completare un design significava creare una guida alle specifiche separata e passarla agli ingegneri. La Dev Mode ha eliminato quel passaggio: gli ingegneri possono fare clic su un elemento qualsiasi e vedere la sua struttura dei componenti, i valori dei token, le specifiche dei font e frammenti di codice pronti all'uso per web, iOS e Android, direttamente all'interno del file di progettazione.

Di conseguenza, il tempo dedicato alla scrittura di documenti di specifiche isolati nella fase di consegna è diminuito del 90%, con un risparmio di oltre 80 ore su ogni progetto. Quando c'è un divario tra ciò che l'UI mostra e come l'elemento viene effettivamente creato, i designer possono anche aggiungere annotazioni accanto alla schermata pertinente per catturare l'intenzione o segnalare casi limite. Con strumenti come Jira, Linear e Storybook collegati, un cambiamento nella fase di progettazione si riversa direttamente sul lavoro del team di sviluppo.

Creare sistemi di progettazione che mantengono i prodotti coerenti su larga scala

Una richiesta comune da parte dei clienti è che DUOTONE crei un sistema di progettazione per gestire i loro prodotti. L'asticella è alta, poiché un sistema deve resistere mentre un prodotto si espande su team, piattaforme e nel tempo. DUOTONE ha creato e gestito sistemi in settori come finanza, commercio, automotive e contenuti, con variabili e architettura dei componenti al centro di ciascuno di essi.

Questo approccio si è rivelato prezioso in un progetto di infotainment per auto. Ogni modello di veicolo aveva una risoluzione del display diversa, e i temi chiaro e scuro dovevano venire alternati in modo fluido con l'ambiente di guida, ad esempio guidare di giorno e di notte, o quando si entra in un tunnel. I requisiti erano complessi.

Definendo tutto come variabili, ad esempio la risoluzione del veicolo (larghezza e altezza), le altezze dei pulsanti, e persino i raggi d'angolo, e dividendo i componenti per dimensione (piccolo, medio, grande), la regolazione di pochi valori di token nella libreria principale aggiorna ogni schermata istantaneamente, invece di ridisegnare ogni schermata da zero nel corso di settimane.

Oltre l'UI: Espandere Figma nella produzione visiva

Con la crescente gamma di strumenti di modifica dell’immagine di Figma basati sull’AI, DUOTONE ha integrato gran parte del lavoro visivo, come illustrazioni e grafica promozionale, in Figma.

Funzionalità come Vectorize, che converte automaticamente un'immagine bitmap in vettori, e Rimuovi sfondo, che isola un soggetto dallo sfondo, hanno eliminato passaggi che costringevano il team a passare continuamente da uno strumento specializzato all'altro. Il tono e l'aspetto finale di una risorsa (esposizione, temperatura colore, ombreggiatura, umore complessivo) ora vengono ottimizzati all'interno dello stesso file Figma in cui si trova il resto della campagna.

Il risultato: un elemento visivo della campagna può essere portato dal concetto alla realizzazione in un'unica area di lavoro, con il 20% di tempo in meno perso tra esportazioni di file e cambi di strumenti.

Con gli elementi visivi e UI che vivono nella stessa area di lavoro, il team collabora più velocemente. Ogni designer lavora da un'unica fonte di verità, condivide il feedback in tempo reale e può esaminare diverse esplorazioni fianco a fianco. Lo stesso vale per la revisione da parte del cliente: il team condivide il lavoro in corso esattamente com'è, riceve feedback immediati e apporta revisioni immediate prima di mostrarlo nuovamente.

Scalare la produttività con i plugin personalizzati

DUOTONE ha costantemente ampliato ciò che è possibile fare all'interno di Figma stratificando i plugin, dalla ricerca risorse alla manutenzione del sistema di progettazione. Quando un plugin della community non si adatta perfettamente, il team crea esattamente ciò di cui ha bisogno con l'API Plugin di Figma, trasformando soluzioni una tantum in funzionalità condivise che aumentano la produttività in tutto lo studio.

Un esempio recente è un correttore ortografico basato sull'AI per le consegne ai clienti. La revisione di una relazione richiedeva il tempo di diversi designer. Ora, il plugin analizza ogni livello di testo sull'area di lavoro in un singolo passaggio e propone correzioni, sostituendo una revisione manuale laboriosa con un solo clic. Di conseguenza, il tempo medio di QA per rapporto è stato ridotto da 3 ore a 5 minuti, e anche le correzioni dell'ultimo minuto prima della consegna sono diminuite.

Chiunque nel team è incoraggiato a creare un plugin quando si imbatte in un compito noioso e ripetitivo. E spesso questo è ciò che avviene, con consegna entro pochi giorni. Un esempio recente: un designer junior ha creato un plugin che compila automaticamente i log degli aggiornamenti, sostituendo ore di copia e incolla manuali e i piccoli errori associati a queste operazioni.

Il risultato è una crescente libreria personalizzata di plugin (correttori ortografici, numerazione automatica delle pagine, generatori di grafici, compilatori di log aggiornati e altro) creati, gestiti ed estesi dai designer a tutto lo studio. Questa cultura di creazione in Figma ha trasformato il modo in cui lo studio opera. Figma non è più solo il luogo dove avviene il design; è la piattaforma che scala il modo in cui DUOTONE lavora.

Dalla manutenzione manuale alla manutenzione basata sull'AI

Un sistema di progettazione richiede più sforzo per la gestione che per la creazione. Mano a mano che una libreria evolve, cresce anche il sovraccarico operativo per organizzare i token, allineare le convenzioni di denominazione e verificare la coerenza tra i file.

DUOTONE ha risolto questo problema trasformando Figma nella fonte di verità che alimenta i suoi agenti AI. Attraverso il server MCP di Figma e l'API Plugin, agenti come Claude e Cursor leggono la libreria di DUOTONE con il contesto completo del sistema di progettazione (componenti, variabili, token e convenzioni di denominazione), quindi rendono note le incoerenze, segnalano i valori che dovrebbero essere tokenizzati e propongono correzioni che seguano le convenzioni del team. Una volta che il team esamina e approva le proposte, gli aggiornamenti ritornano in Figma come variabili, trasformando ciò che era considerato lavoro di sistema ripetitivo in una frazione del tempo.

Il team sta ampliando ulteriormente questo modello, con la sperimentazione di un flusso di lavoro in cui l'AI redige documenti dei requisiti funzionali (FRD) direttamente dalle specifiche e dai dati dei componenti all'interno di un file Figma. Le decisioni visive nell'area di lavoro diventano automaticamente informazioni strutturate che riducono l'attrito nel passaggio tra design, prodotto e ingegneria. Lo stesso flusso di contesto permette anche all'AI di generare nuovi lavori di design che mantengono la coerenza con il sistema fin dall'inizio. Il risultato: gestione e documentazione passano all'AI e i designer si concentrano sul lavoro che solo loro possono fare.

OPENPATH: Dove l'esperienza di DUOTONE diventa il manuale operativo della community

DUOTONE condivide la sua esperienza con la community di design attraverso OPENPATH, una piattaforma formativa interna creata a partire da lavori reali con i clienti. Quello che è iniziato come un'attività interna di ricerca e sviluppo è ora diventato una risorsa pubblica modellata da anni di lezioni relative ai progetti.

Il curriculum va oltre la formazione sugli strumenti. Copre metodologie testate sul campo con lavori per clienti reali, con la creazione di sofisticati sistemi di progettazione basati su variabili, l'ottimizzazione dei processi con plugin e la connessione di agenti AI nei flussi di lavoro di design. Quello che i designer ottengono da OPENPATH non sono solo competenze di design, è ciò che un'agenzia fa effettivamente quando il lavoro deve essere consegnato. I designer junior ricevono una solida base che permette loro di contribuire fin dal primo giorno, con un numero inferiori degli errori che solitamente accompagnano il lavoro all'inizio della carriera. I designer senior apprendono nuovi modi di lavorare adatti all'attuale evoluzione della disciplina e del ruolo stesso del design.

Per DUOTONE, l'obiettivo non è solo essere uno studio di spicco. È alzare il livello del design in tutto il settore. Insieme all'ecosistema in continua espansione di Figma, DUOTONE continuerà ad aprire nuove strade per il lavoro dei designer abbinato all'AI, per consentire loro di dedicarsi maggiormente alle attività proprie del loro ruolo e concentrarsi su ciò che conta veramente.