Cómo DUOTONE ahorra más de 80 horas por proyecto al gestionar todo su flujo de trabajo en Figma

Fundada en Seúl en 2018, DUOTONE es una agencia de diseño digital con una plantilla de 60 personas especializada en diseño UX/IU y sistemas de diseño. El estudio colabora con empresas de una amplia variedad de sectores, como el financiero, el comercial, el automovilístico y el de contenidos, para llevar a cabo proyectos digitales.

Desde que implantaron Figma en toda la empresa hace cinco años, se ha convertido en parte de su sistema operativo. Desde la planificación y la documentación hasta la arquitectura del sistema de diseño y la producción visual, el equipo gestiona todo su flujo de trabajo dentro del ecosistema de Figma, con los siguientes resultados:

• Una reducción del 90 % en el tiempo dedicado a redactar los documentos de especificaciones al entregar los proyectos, lo que supone un ahorro de más de 80 horas en cada proyecto
• Un 20 % menos de tiempo dedicado al trabajo de producción visual
• El tiempo de control de calidad de los informes se ha reducido de horas a entre 5 y 10 minutos

De archivos dispersos a un único lienzo

En el pasado, DUOTONE trabajaba con varias partes interesadas en múltiples documentos, lo que provocaba conflictos de versiones y entregas fallidas. Desde que lo consolidamos todo en Figma, la comunicación con los clientes ha cambiado por completo. Las decisiones y discusiones se producen directamente en el lienzo, lo que hace que la comunicación y las entregas sean más eficientes.

Las entregas a los desarrolladores ahora también son mucho más eficientes. Antes, terminar un diseño significaba crear una guía de especificaciones por separado y pasársela a los ingenieros. Dev Mode eliminó ese paso: los ingenieros podían hacer clic en cualquier elemento y ver su estructura de componentes, valores de los tokens, especificaciones de las fuentes y fragmentos de código listos para usar para web, iOS y Android, directamente dentro del archivo de diseño.

Como resultado, el tiempo dedicado a redactar documentos de especificaciones independientes en la fase de entrega se ha reducido en un 90 %, lo que supone un ahorro de más de 80 horas en cada proyecto. Cuando hay una brecha entre lo que muestra la IU y cómo está realmente diseñada, los diseñadores también pueden añadir anotaciones junto a la pantalla correspondiente para explicar la intención o señalar casos extremos. Con herramientas como Jira, Linear y Storybook conectadas, cualquier cambio en la fase de diseño se traslada directamente al trabajo del equipo de desarrollo.

Creación de sistemas de diseño que mantienen la coherencia de los productos a gran escala

Una solicitud habitual de los clientes es que DUOTONE cree un sistema de diseño para gestionar sus productos. Las expectativas son altas, ya que el sistema tiene que funcionar a medida que el producto crece y se expande por diferentes equipos, plataformas y a lo largo del tiempo. DUOTONE ha creado y mantenido sistemas en los sectores financiero, comercial, automovilístico y de contenidos, con las variables y la arquitectura de componentes como eje central de cada uno de ellos.

Este enfoque resultó muy útil en un proyecto de infoentretenimiento para coches. Cada modelo de vehículo tenía una resolución de pantalla diferente, y los temas claros y oscuros tenían que adaptarse a la perfección al entorno de conducción, por ejemplo, si conducías de día o de noche, o al entrar en un túnel. Los requisitos eran complejos.

Al definirlo todo como variables —la resolución del vehículo (anchura y altura), las alturas de los botones e incluso los radios de las esquinas— y dividir los componentes por tamaño (pequeño, mediano, grande), con solo ajustar unos cuantos valores de los tokens en la biblioteca principal se actualizarían todas las pantallas al instante, en lugar de tener que volver a dibujarlas desde cero durante semanas.

Más allá de la IU: cómo ampliar Figma a la producción visual

Con el conjunto de herramientas de edición de imágenes con IA de Figma, en constante expansión, DUOTONE ha trasladado gran parte de su trabajo visual, como la ilustración y los gráficos promocionales, a Figma.

Funciones como Vectorizar, que convierte automáticamente una imagen de mapa de bits en vectores, y Eliminar fondo, que aísla un sujeto de su fondo, han eliminado los pasos que antes obligaban al equipo a ir y venir entre herramientas especializadas. El tono y la sensación finales de un recurso —la exposición, la temperatura del color, las sombras, el ambiente general— ahora se ajustan dentro del mismo archivo de Figma en el que se encuentra el resto de la campaña.

El resultado: el diseño de una campaña se puede llevar desde el concepto hasta el acabado en un único lienzo, perdiendo un 20 % menos de tiempo en exportar archivos y cambiar de herramienta.

Con el trabajo visual y de IU viviendo en el mismo lienzo, el equipo colabora más rápido. Cada diseñador trabaja a partir de una única fuente de verdad, comparte comentarios en tiempo real y puede revisar varias propuestas una al lado de la otra. Lo mismo pasa con la revisión del cliente: el equipo comparte el trabajo en curso tal y como está, recibe comentarios al instante y lo revisa en el momento antes de volver a mostrarlo.

Escalar la productividad con plugins personalizados

DUOTONE ha ido ampliando poco a poco sus posibilidades dentro de Figma mediante la incorporación de plugins, desde la búsqueda de recursos hasta el mantenimiento del sistema de diseño. Cuando un plugin de la comunidad no se adapta del todo, el equipo crea exactamente lo que necesita con la API de plugins de Figma, convirtiendo soluciones puntuales en capacidades compartidas que aumentan la productividad en todo el estudio.

Un ejemplo reciente es un corrector ortográfico basado en IA para los trabajos que entregamos a los clientes. Antes, la revisión de un informe solían hacerla varios diseñadores. Ahora, el plugin escanea todas las capas de texto del lienzo de una sola vez y propone correcciones, reemplazando una revisión manual laboriosa por un simple clic. Como resultado, el tiempo medio de control de calidad por informe se redujo de 3 horas a 5 minutos, y también disminuyeron las correcciones de última hora antes de la entrega.

Se anima a cualquier miembro del equipo a crear un plugin cuando se encuentre con una tarea tediosa y repetitiva. Y suelen hacerlo, en cuestión de días. Un ejemplo reciente: un diseñador junior creó un plugin que compila automáticamente los registros de actualizaciones, eliminando así horas de copiar y pegar a mano y los pequeños errores que eso conllevaba.

El resultado es una biblioteca personalizada de plugins que no para de crecer —correctores ortográficos, numeración automática de páginas, generadores de gráficos, compiladores de registros de actualizaciones y mucho más—, creada, mantenida y ampliada por los diseñadores de todo el estudio. Esta cultura de crear sobre la base de Figma ha transformado la forma de trabajar del estudio. Figma ya no es solo el lugar donde se diseña; es la plataforma que permite escalar el funcionamiento de DUOTONE.

Del mantenimiento manual al mantenimiento basado en IA

Mantener un sistema de diseño requiere más esfuerzo que crearlo. A medida que una biblioteca evoluciona, también lo hace la carga de trabajo que supone organizar los tokens, armonizar las convenciones de nomenclatura y verificar la coherencia entre los archivos.

DUOTONE resolvió esto convirtiendo Figma en la fuente de verdad que utilizan sus agentes de IA. A través del servidor MCP de Figma y la API de plugins, agentes como Claude y Cursor leen la biblioteca de DUOTONE con todo el contexto del sistema de diseño —sus componentes, variables, tokens y convenciones de nomenclatura— y, a continuación, detectan inconsistencias, señalan los valores que deberían convertirse en tokens y proponen soluciones que siguen las convenciones del equipo. Una vez que el equipo revisa y aprueba las propuestas, las actualizaciones vuelven a Figma en forma de variables, reduciendo a una fracción del tiempo lo que antes suponía días de trabajo repetitivo en el sistema.

El equipo está ampliando aún más este modelo y está probando un flujo de trabajo mediante el cual la IA redacta documentos de requisitos funcionales (FRD) directamente a partir de las especificaciones y los datos de los componentes que hay dentro de un archivo de Figma. Las decisiones visuales que se toman en el lienzo se convierten automáticamente en información estructurada, reduciendo la fricción entre el diseño, el producto y la ingeniería a la hora de entregarlos. Este mismo flujo contextual también permite que la IA genere nuevos trabajos de diseño que sean coherentes con el sistema desde el principio. El resultado: el mantenimiento y la documentación pasan a manos de la IA, y los diseñadores se centran en el trabajo que solo ellos pueden realizar.

OPENPATH: donde la experiencia de DUOTONE se convierte en el manual de estrategia de la Comunidad

DUOTONE comparte su experiencia con la comunidad de diseño a través de OPENPATH, una plataforma formativa propia basada en proyectos reales de clientes. Lo que empezó como una iniciativa interna de I+D se ha convertido ahora en un recurso público que se ha ido moldeando gracias a las lecciones aprendidas a lo largo de años de proyectos.

El currículo abarca mucho más que aprender a usar herramientas. Incluye metodologías probadas en proyectos reales de clientes: crear sistemas de diseño sofisticados basados en variables, optimizar procesos con plugins e integrar agentes de IA en los flujos de trabajo de diseño. Lo que los diseñadores obtienen de OPENPATH no son solo habilidades de diseño; es lo que hace realmente una agencia cuando hay que entregar el trabajo. Los diseñadores junior salen con una base sólida que les permite contribuir desde el primer día, con menos errores de los que suelen cometer al principio de su carrera. Los diseñadores sénior aprenden nuevas formas de trabajar adaptadas a cómo está evolucionando la disciplina y el propio papel del diseño.

Para DUOTONE, el objetivo no es solo ser un estudio que destaque. Se trata de elevar el listón del diseño en todo el sector. Junto con el ecosistema en constante expansión de Figma, DUOTONE seguirá abriendo nuevas vías para que los diseñadores trabajen codo a codo con la IA, dedicándose más a lo que realmente les corresponde y centrándose en lo que de verdad importa.