Construcción y escalado de un sistema de diseño en Figma: un estudio de caso

Determinar cómo construir un sistema de diseño para una empresa multinacional significa catalogar cada componente y patrón con meticuloso detalle. Es una empresa enorme que requiere tanto una visión general como un enfoque en los detalles. Así es como lo logró un líder de equipo de sistemas de diseño.

Cuando el holding ABB, con sede en Suiza, se dispuso a crear un sistema de diseño, el objetivo era unir una apariencia uniforme para cientos de productos de software, muchos de los cuales alimentan los sistemas mecánicos que mantienen en funcionamiento las fábricas, las minas y otros sitios industriales. . No fue una tarea fácil para una empresa con casi dos docenas de unidades de negocio y casi 150.000 empleados en todo el mundo. Para Abdul Sial, quien se desempeñó como diseñador principal de productos en el equipo de sistemas de diseño de 10 personas de ABB, escalar la biblioteca de componentes y patrones dependía de mantener la apertura y la transparencia, con énfasis en la documentación extensa.

El papel de un diseñador de sistemas de diseño

Cada vez más, las grandes empresas como ABB cuentan con equipos dedicados exclusivamente a crear y mantener sistemas de diseño. “Un sistema de diseño permite la consistencia, salir al mercado en un tiempo justo y no permitir que la producción se estanque en personalizaciones que no generan valor”, dice el diseñador madrileño Alejandro Velasco. O, como explica Alexandre Brito, un diseñador en Lisboa, Portugal, “Los sistemas de diseño vienen a proporcionar estructura cuando hay muchas personas que utilizan el mismo conjunto de herramientas. Es como si todos tuvieran el mismo idioma”.

Si una guía de estilo tradicional cubre los conceptos básicos de diseño (fuentes y colores, por ejemplo), un sistema de diseño tiene un alcance mucho mayor. “Un sistema de diseño es una combinación de una guía de estilo, además de componentes de diseño, patrones de diseño, componentes de código y, además, documentación”, dice Sial. Cuando trabajaba en el sistema de diseño de ABB, unos 120 diseñadores lo usaban regularmente. El esfuerzo representó la versión 4.8 del sistema, y ​​el equipo lo denominó "Evolución del diseño".

Los diseñadores de sistemas de diseño juegan un papel diferente al de aquellos que se enfocan únicamente en productos individuales. “Tienes una vista panorámica de todos los diferentes productos que usa una empresa”, dice Sial.

Trabajar en operaciones de diseño también requiere comunicarse con las partes interesadas en toda la empresa. “Los diseñadores de sistemas de diseño tienen que ser sociales”, dice Velasco. “A un diseñador de sistemas de diseño realmente le tiene que gustar trabajar y hablar con personas que tienen diferentes roles dentro de una organización. Deben poder distinguir qué comentarios incluir para construir el sistema de diseño en torno a las necesidades de la empresa”.

El ciclo de vida de un componente

Al trabajar en el sistema de diseño de ABB, Sial se guió por una filosofía general: "Documentación, documentación, documentación". Para cada elemento reutilizable en los sitios web de ABB, pantallas móviles o pantallas independientes grandes, Sial quería mostrar lo que él llama el ciclo de vida de un componente. Eso significó un extenso mantenimiento de registros para todos los componentes y patrones: migas de pan, encabezados, entradas o botones, por nombrar solo algunos. “¿Cuáles son los viajes por los que pasó? ¿Qué decisiones tomaron? De esa manera no siempre estamos recreando todo. Antes de probar algo, puedes leer y ver que alguien ya lo probó”, dice Sial.

En su experiencia, esta filosofía es una desviación del enfoque típico de la documentación. En el acelerado mundo del desarrollo de productos, por ejemplo, la documentación a menudo se escribe al final del proyecto o se abandona por completo. Pero para los sistemas de diseño, dice Sial, la documentación debe ser más que una ocurrencia tardía. “Un sistema de diseño nunca se termina; necesita una mejora continua”, dice. “Los creadores y consumidores de sistemas de diseño quieren comprender los procesos de pensamiento y las decisiones para seguir mejorándolo”.

La documentación es especialmente importante para un sistema de diseño tan grande como el de ABB. “Con un equipo tan grande, tienes que poder escalar”, dice. “¿Cómo podemos asegurarnos de que todos los que se unan al equipo puedan ir rápidamente a cualquier componente y comprender cómo comenzó, cómo se editó y qué versión están usando?”

Encontrar la herramienta adecuada

Existen muchas herramientas para construir sistemas de diseño, incluidas Figma, Sketch y Adobe XD. Sial experimentó con varias, probando una combinación de herramientas de diseño y gestión de proyectos antes de decidirse por Figma, que ofrece un amplio espacio para la documentación.

Sial y su equipo determinaron que cada componente debería ubicarse dentro de su propio archivo. “La mayor parte del tiempo, estás trabajando en un componente a la vez. Si coloca todos los componentes en un archivo, ralentiza Figma. Al darle a cada componente su propio archivo, es más rápido de abrir y tiene todo el historial y la documentación en un solo lugar”, dice.

Configuración de la jerarquía

Sial configuró el sistema de diseño de ABB para que el archivo de cada componente y patrón tenga las mismas páginas. Las imágenes que siguen detallan lo que hay en cada página.

Cubrir

Sial recomienda configurar una portada simple para cada componente. En Figma, esto permite una vista previa en miniatura de todos los componentes y ayuda con la navegabilidad de los archivos. En la configuración de ABB, la portada incluye el nombre del componente y en qué fase se encuentra: diseño, desarrollo o lanzamiento. El estado se puede actualizar fácilmente cuando el componente progresa.

Inventario, casos de uso y solicitudes

Esta página contiene ejemplos de las numerosas formas en que un componente aparece en el producto digital de una empresa. En el caso de un componente de campo de texto, por ejemplo, la página de inventario mostraría cómo se ve el campo de texto en abb.com en comparación con cómo aparece en un iPhone en comparación con cómo aparece en un dispositivo Android. “El inventario nos permite comprender con claridad lo que ya existe”, dice Sial.

Esta página también debe mostrar las formas en que el componente se usa incorrectamente. “Esto le permite mirar sus productos y ver dónde hay alineaciones y desalineaciones”, dice Sial. Aconseja a los equipos que inician un proyecto de sistema de diseño que comiencen por catalogar lo que ya existe. “Comience con el inventario y lo guiará mientras crea el diseño”, dice.

Referencias, mejores prácticas y análisis competitivo

Sial aconseja crear una sección de cada archivo de componente similar a un tablero de visión, que muestre cómo otras empresas diseñan piezas comparables. “Al igual que con cualquier otra cosa, la mejor práctica es realizar un análisis competitivo y ver cómo lo están haciendo otras personas”, dice. “Observe otros productos y vea sus aprendizajes”.

Pruebas y datos

La página de datos de resultados de la prueba agrega todos los datos relacionados con la prueba de un componente, incluidos los resultados de las pruebas A/B y los comentarios de los usuarios y las partes interesadas. En resumen, Sial dice: "Es la historia completa de un componente". ¿Quizás el equipo de diseño probó una nueva variación hace dos años y descubrió que no funcionaba? “Tal vez trabajamos en esa variación y la descartamos por alguna razón”, dice. Si es así, este tipo de historial puede ahorrar mucho tiempo al asegurarse de que los diseñadores no vuelvan a intentarlo.

Alcance

La página siguiente establece el alcance de un componente para que los diseñadores puedan llevar a cabo un diseño. Cuando llegan a la página de alcance, Sial dice: “Tienes una historia. Entiendes el inventario de todos los productos. Sabe lo que necesita construir y conoce los requisitos. Ahora es el momento de escribirlo y hacer un resumen de ello”. Agrega que la creación del alcance debe ser un proceso de colaboración con los propietarios, desarrolladores y diseñadores del producto.

Versiones

Las imágenes de las versiones finales del componente se encuentran aquí, con la última iteración anclada en la parte superior. Otros diseñadores deberían poder revisarlo y comentarlo.

Salvadera

El sandbox permite a los diseñadores experimentar con diferentes iteraciones de un componente o patrón directamente en Figma. “Puede ser complicado y no hay estandarización”, dice Sial. “Es solo un patio de recreo donde un diseñador tiene la libertad de hacer cualquier cosa”.

Componente Figma

El archivo también contiene una página para el componente Figma, un elemento de la interfaz de usuario que se puede repetir fácilmente en todo el sistema de diseño. El diseñador puede realizar cambios en el componente, y ese cambio se completará en todas las instancias de ese componente en toda la empresa, manteniendo todo coherente. Esta página se exportará a la biblioteca del sistema de diseño de Figma, y ​​cualquier diseñador individual puede arrastrar y soltar el componente de Figma en su diseño. Si el equipo de diseño del sistema necesita realizar un cambio en el componente, puede hacerlo una vez e implementarlo en toda la empresa.

Reglas de estilo

A continuación, los diseñadores y desarrolladores del sistema de diseño crean la página de reglas de estilo, una especie de cajón de sastre para los elementos que, dice Sial, “no son visibles en el diseño”. Por ejemplo, ¿cómo se representará el componente cuando se desplace hacia abajo en la página? También es donde el equipo del sistema de diseño realiza un seguimiento de las preguntas o problemas no resueltos. Dice que se sorprendió de lo integral que resultó ser esta página: "Al principio, pensamos que esta página no era tan importante, pero ahora nos damos cuenta de que pasamos la mayor parte de nuestro tiempo aquí".

Entregar

Las notas de entrega son las instrucciones para los desarrolladores sobre cómo escribir el código para el componente. El documento de entrega comienza con la anatomía del componente y luego incluye sus variaciones.

Los documentos de traspaso del sistema ABB también incluyen fichas de diseño. Cada vez más populares en los sistemas de diseño a gran escala como los de ABB, los tokens de diseño son piezas de información de estilo independiente de la plataforma sobre los elementos de la interfaz de usuario, como el color, el tipo de letra o el tamaño de fuente. Con tokens de diseño, un diseñador puede cambiar un valor (indicar que un botón de llamada a la acción debe ser naranja en lugar de azul, por ejemplo) y ese cambio se completará en todos los lugares donde se use el token, ya sea en un sitio web, iOS, o plataforma Android.

Sial también creó un complemento de token de Figma para ampliar el alcance de los tokens que los diseñadores pueden crear en Figma. “Figma admite colores, tipografía, sombras y estilos de cuadrícula”, dice. El complemento generará tokens para más variables, como la opacidad y el ancho del borde. También crea una convención de nomenclatura estandarizada, por lo que los diseñadores no tienen que realizar un seguimiento manual de los nombres de los tokens. “El complemento cierra la brecha entre desarrolladores y diseñadores. Permite que ambos trabajen en una única fuente de verdad para el diseño; si uno hace un cambio en un lugar, ese cambio tiene efecto en todo el diseño y el código”, dice.

Sial destaca que en su sistema, los desarrolladores toman un papel activo durante la creación de un componente. “Al principio, involucrábamos a nuestros desarrolladores cuando teníamos algo listo para mostrarles”, dice. “Luego nos dimos cuenta de que eso no funcionaba y ahora comenzamos literalmente las sesiones de lanzamiento con ellos”.

Página web de documentación

La última página de cada archivo contiene una página web con el diseño final, que muestra cómo se ve el componente como producto terminado. “Creamos una página que muestra cómo se verá el ejemplo en vivo para que los usuarios, en este caso nuestros diseñadores, puedan ver cómo se verá al final del día en un sitio web real”, dice Sial.

La colaboración es clave

El papel de un diseñador de sistemas de diseño es multifacético. Como dice Alejandro Velasco, “Diseñar un sistema de diseño implica tantos roles, y si estoy liderando eso, soy el pegamento para el proyecto”.

Es una empresa enorme y no necesariamente la decisión correcta para todas las empresas. Las empresas emergentes, por ejemplo, podrían comenzar mejor con un sistema listo para usar, como Google Material Design o IBM Carbon Design System, en lugar de dedicar muchos recursos a crear uno. Aún así, podría llegar el momento en que eso no sea suficiente, dice Alexandre Brito: “Tan pronto como tienes varios diseñadores trabajando juntos, comienzas a darte cuenta de que es necesario que alguien construya reglas que estén más en línea con el producto o marca que estás construyendo”.

Construir un sistema de diseño requiere trabajo y dedicación; también se necesita colaboración. Sial destaca que la participación de todas las partes interesadas en el desarrollo del sistema de ABB durante todo el proceso fue una prioridad. “Fue realmente un trabajo iterativo con todo mi equipo. Se trataba de escucharlos y nos tomamos el tiempo para aprender y probarlo a fondo y desarrollar esta estructura”, dice.

Tener una estructura que incluya una extensa documentación, incluyendo la historia y las mejores prácticas, es el núcleo del sistema de diseño de Figma. “Es un éxito porque la gente puede leer toda la documentación en un solo lugar”, dice Sial. “Pueden verlo todo, desde el caso de uso hasta el diseño y pasando a la entrega y la página del componente final. La gente puede ver todo el ciclo de vida de un componente”.

Puede explorar el archivo Figma de Abdul Sial en su totalidad aquí: Plantilla de componentes .

Lecturas adicionales en el blog de diseño de Toptal:

• La consistencia es clave: cómo construir un sistema de diseño de Figma
• El poder de la estructura: una guía para diseñar modelos de sistemas
• Comprender los sistemas y patrones de diseño
• El poder de Figma como herramienta de diseño
• Mini tutorial: aprovechar las funciones de Figma para todo el proceso de diseño