DUOTONE économise plus de 80 heures par projet dans Figma

Fondée à Séoul en 2018, DUOTONE est une agence de design numérique employant 60 personnes et spécialisée dans le UX/UI design et les design systems. Le studio s'associe à des entreprises de divers secteurs, y compris la finance, le commerce, l'automobile et le contenu, pour réaliser des projets numériques.

Depuis sa mise en œuvre dans l'entreprise il y a cinq ans, Figma fait partie intégrante du système d'exploitation de DUOTONE. De la planification et de la documentation à l'architecture du design system et à la production visuelle, l'équipe gère l'intégralité de son workflow au sein de l'écosystème Figma, avec pour résultats :

• Une réduction de 90 % du temps d'écriture des documents de spécification lors du transfert de projet, permettant d'économiser plus de 80 heures sur chaque projet
• 20 % de temps en moins consacré au travail de production visuelle
• Une réduction du temps de QA, qui passe de quelques heures à 5-10 minutes

Des fichiers dispersés à un plan de travail unique

Dans le passé, DUOTONE travaillait avec plusieurs parties prenantes sur de multiples documents, ce qui se traduisait par des conflits de versions et des défaillances dans les transferts. Consolider l'intégralité des données dans Figma a entièrement changé la communication avec les clients. Les discussions et les décisions ont lieu directement sur le plan de travail, d'où une communication et des transferts plus efficaces.

Les transferts vers les développeurs ont aussi considérablement gagné en efficacité. Auparavant, terminer un design signifiait élaborer un guide de spécifications séparé et le transmettre aux ingénieurs. Dev Mode a éliminé cette étape : les ingénieurs peuvent cliquer sur un élément et voir sa structure de composant, les valeurs des tokens, les spécifications de police et des extraits de code prêts à l'emploi pour le web, iOS et Android, directement dans le fichier de design.

En conséquence, le temps passé à rédiger des documents de spécifications autonomes au stade du transfert a chuté de 90 %, d'où une économie de plus de 80 heures sur chaque projet. Lorsqu'il existe un écart entre ce que montre l'interface et la façon dont elle est réellement développée, les designers peuvent également ajouter des annotations à côté de l'écran concerné pour capturer l'intention ou signaler des cas particuliers. Grâce à des outils tels que Jira, Linear et Storybook connectés, une modification au stade de la conception se répercute directement sur le travail de l'équipe de développement.

Concevoir des design systems qui maintiennent la cohérence des produits à grande échelle

Une demande courante des clients est que DUOTONE conçoive un design system pour gérer leurs produits. Le niveau d'exigence est élevé, car un système doit rester performant lorsqu'un produit évolue à travers les équipes et les plateformes et dans le temps. DUOTONE a conçu et géré des systèmes dans les secteurs de la finance, du commerce, de l'automobile et du contenu, avec des variables et une architecture de composants au cœur de chacun de ces systèmes.

Cette approche s’est avérée précieuse dans un projet d'infodivertissement embarqué. Chaque modèle de véhicule présentait une résolution d'affichage différente et les thèmes de lumière et d'obscurité devaient s'adapter parfaitement à l'environnement de conduite (par exemple, conduite de jour ou de nuit ou entrée dans un tunnel). Les exigences étaient complexes.

En définissant toutes les données (résolution du véhicule (largeur et hauteur), hauteurs des boutons et même rayons d'angle) comme des variables et en scindant les composants par taille (petite, moyenne, grande), ajuster quelques valeurs de token dans la bibliothèque principale mettrait chaque écran à jour instantanément, au lieu de le redessiner de A à Z en plusieurs semaines.

Au-delà de l'interface utilisateur : étendre Figma à la production visuelle

Avec la boîte à outils d'édition d'images IA en pleine expansion de Figma, DUOTONE a intégré une grande partie du travail visuel (par exemple, l'illustration et les graphiques promotionnels) dans Figma.

Des fonctionnalités telles que Vectoriser, qui convertit automatiquement une image bitmap en vecteurs, et Supprimer le fond, qui isole un sujet de son fond, ont éliminé des étapes qui renvoyaient l'équipe d'un outil spécialisé à un autre. Le rendu final d'un actif (exposition, température de couleur, ombres, ambiance générale) se définit désormais directement dans le fichier Figma où réside le reste de la campagne

Résultat : un visuel de campagne peut être mené du concept à la finition sur un seul plan de travail, avec 20 % de temps en moins perdu dans l'exportation de fichiers et le passage d'un outil à l'autre.

Parce que le travail visuel et l'UI existent sur le même plan de travail, l'équipe collabore plus rapidement. Chaque designer travaille à partir d'une source unique de vérité, partage le feedback en temps réel et peut revoir plusieurs explorations côte à côte. Il en va de même pour l'examen par le client : l'équipe partage le travail en cours exactement en l'état, obtient un feedback immédiat et révise sur place avant de montrer de nouveau son travail.

Faire évoluer la productivité avec des plugins personnalisés

DUOTONE a progressivement élargi ses possibilités dans Figma en intégrant des plugins – de la recherche d'actifs à la maintenance du design system. Quand un plugin communautaire ne s’intègre pas entièrement, l’équipe crée exactement ce dont elle a besoin avec l'API Plugin de Figma, transformant des solutions ponctuelles en fonctionnalités partagées qui font évoluer la productivité dans tout le studio.

Un exemple récent est un correcteur orthographique piloté par IA pour les livrables des clients. La relecture d'un rapport prenait auparavant le temps de plusieurs designers. Désormais, le plugin balaie chaque calque de texte sur le plan de travail en un seul passage et propose des corrections, remplaçant un examen manuel fastidieux par un seul clic. Ainsi, le temps moyen de QA par rapport est passé de 3 heures à 5 minutes et les corrections de dernière minute avant livraison ont également diminué.

Les membres de l'équipe sont encouragés à créer un plugin lorsqu'ils rencontrent une tâche fastidieuse et répétitive. Et ils le font souvent, livrant en quelques jours. Un exemple récent : un designer junior a créé un plugin qui compile automatiquement les journaux de mise à jour, éliminant des heures de copier-coller manuel et les erreurs mineures associées.

Il en résulte une bibliothèque personnalisée croissante de plugins (correcteurs orthographiques, numérotation automatique des pages, générateurs de graphiques, compilateurs de journaux de mise à jour et plus encore) conçue, gérée et développée par les designers dans tout le studio. Cette culture de conception sur Figma a transformé la façon dont le studio fonctionne. Figma n'est plus seulement l'endroit où est créé le design : c'est la plateforme qui permet à DUOTONE de travailler à grande échelle.

De l'entretien manuel à la maintenance pilotée par IA

La maintenance d'un design system nécessite plus d'efforts que sa conception. Une bibliothèque évolue en même temps que la charge opérationnelle de l'organisation des tokens, de l'alignement des conventions d'appellation et de la vérification de la cohérence entre les fichiers.

DUOTONE a résolu ce problème en faisant de Figma la source de vérité qui alimente ses agents IA. Grâce au serveur MCP et à l'API Plugin de Figma, des agents tels que Claude et Cursor lisent la bibliothèque de DUOTONE avec un contexte complet du design system (ses composants, variables, tokens et conventions d'appellation) puis mettent en évidence les incohérences, signalent les valeurs à transformer en tokens et proposent des corrections reflétant les conventions de l'équipe. Une fois les propositions examinées et approuvées par l'équipe, les mises à jour retournent dans Figma sous forme de variables, transformant ce qui représentait auparavant des jours de travail répétitif en une fraction du temps.

L'équipe va encore plus loin avec ce modèle et teste un workflow où l'IA rédige directement des cahiers des charges fonctionnels (FRD) à partir des spécifications et des données des composants dans un fichier Figma Les décisions visuelles prises sur le plan de travail deviennent automatiquement des informations structurées, réduisant les frictions survenant entre la conception, le produit et le transfert à l'ingénierie. Le même flux contextuel permet également à l'IA de générer de nouveaux travaux de conception qui demeurent cohérents avec le système dès le début. Résultat : la maintenance et la documentation passent à l'IA et les designers restent concentrés sur le travail qu'eux seuls peuvent faire.

OPENPATH : là où l'expertise de DUOTONE devient le manuel de la communauté

DUOTONE partage son expertise avec la communauté du design à travers OPENPATH, une plateforme d'éducation interne créée à partir de travaux réels de clients. Ce qui a commencé comme un effort interne de R&D est aujourd'hui une ressource publique façonnée par des années de leçons de projet.

Le programme va au-delà de la formation sur les outils. Il couvre des méthodologies éprouvées sur le travail réel des clients – concevoir des design systems sophistiqués basés sur des variables, rationaliser les processus avec des plugins et connecter les agents IA aux workflows de conception. Avec OPENPATH, les designers n'acquièrent pas que des compétences en design : ils obtiennent ce que fait réellement une agence quand le travail doit être livré. Les designers juniors quittent la formation avec une base solide qui leur permet de contribuer dès le premier jour et évitent une bonne partie des erreurs qui accompagnent généralement les débuts de carrière. Les designers seniors adoptent de nouvelles méthodes de travail adaptées à l'évolution de la discipline – et au rôle du design lui-même.

Pour DUOTONE, l'objectif n'est pas seulement d'être un studio d'exception. Il s'agit de relever le niveau du design dans toute l'industrie. Parallèlement à l'écosystème en constante expansion de Figma, DUOTONE continuera à offrir aux designers de nouvelles méthodes pour travailler aux côtés de l'IA, en faisant davantage ce qu'ils sont censés faire et en se concentrant sur les tâches qui comptent vraiment.