Componentes Atomic Design
Como Líder de Diseño de Producto en uPlanner, nos embarcamos en un viaje transformador para mejorar nuestro proceso de diseño mediante la transición de la creación de interfaces de usuario (UI) a medida en Adobe XD a la implementación de un sólido sistema de componentes en Figma basado en los principios de Atomic Design. Este cambio fue impulsado por la necesidad de agilizar nuestro flujo de trabajo de diseño, mejorar la colaboración entre los equipos y garantizar la coherencia en todos nuestros productos digitales.
Desafío
Inicialmente, nuestro equipo de diseño dependía en gran medida de Adobe XD para el diseño de la interfaz de usuario, produciendo interfaces muy personalizadas para varios proyectos. Aunque este enfoque permitía libertad creativa, conllevaba varios retos:
- Incoherencia: Cada interfaz tenía diferencias de diseño, lo que daba lugar a una experiencia de usuario fragmentada en todo nuestro conjunto de productos.
- Ineficacia: La falta de componentes reutilizables dio lugar a un trabajo repetitivo, ya que los diseñadores recreaban elementos similares desde cero para cada proyecto.
- Cuellos de botella en la colaboración: A medida que nuestro equipo crecía, la colaboración en archivos de diseño en Adobe XD se volvió engorrosa, con múltiples versiones de archivos y dificultades para mantener una única fuente de verdad.
Objetivo
Nuestro objetivo era pasar a un enfoque más sistemático del diseño que permitiera la coherencia, la escalabilidad y la colaboración eficaz. Decidimos implantar un sistema de componentes en Figma, estructurado en torno a los principios del diseño atómico. Esto nos permitiría construir un sistema de diseño compuesto por componentes reutilizables, garantizando una experiencia de usuario cohesiva en todos nuestros productos digitales.
Proceso
1. Auditoría de los diseños existentes
El primer paso fue realizar una auditoría exhaustiva de nuestras interfaces de usuario existentes diseñadas en Adobe XD. Identificamos patrones comunes, componentes recurrentes y elementos de diseño únicos en diferentes proyectos. Esta auditoría nos ayudó a comprender el alcance del trabajo necesario para la transición a un sistema de diseño basado en componentes.
2. Construir el sistema de diseño en Figma
Con la auditoría completada y el equipo alineado con los principios del Diseño Atómico, comenzamos a construir nuestro sistema de diseño en Figma:
- Atoms: Creamos una biblioteca de componentes fundamentales como botones, estilos de color, estilos de texto, iconos y campos de entrada. Cada átomo se diseñó pensando en la flexibilidad, permitiendo variaciones de tamaño, color y estado.
- Moléculas: A partir de los átomos, desarrollamos componentes de interfaz de usuario más complejos, como campos de formulario, tarjetas y elementos de lista. Cada molécula se diseñó para que pudiera reutilizarse en distintos proyectos.
- Organismos: Combinamos moléculas para crear estructuras más grandes, como encabezados, pies de página y secciones de contenido. Estos organismos proporcionaron un marco coherente para la interfaz de usuario de nuestros productos.
- Plantillas y páginas: Por último, creamos plantillas y páginas que utilizaban nuestros organismos para definir el diseño general de nuestros productos. Estas plantillas sirvieron como puntos de partida para nuevos proyectos, garantizando la coherencia en todos nuestros productos digitales.
3. Colaboración y transferencia
Una de las principales ventajas de pasar a Figma fue la mejora de las capacidades de colaboración. Integramos nuestros archivos Figma con herramientas como Jira y Slack para agilizar el proceso de transferencia del diseño. Los diseñadores, desarrolladores y partes interesadas ahora podían acceder a los mismos archivos Figma, ver las actualizaciones en tiempo real y proporcionar comentarios directamente dentro del entorno de diseño.
4. Pruebas e iteraciones
Siempre se recogen comentarios que se utilizan para perfeccionar el sistema y garantizar que satisfacía las necesidades de todas las partes interesadas. También mantenemos un documento vivo de directrices de diseño para acompañar a nuestra biblioteca de componentes Figma, lo que ayuda a garantizar la coherencia entre los equipos.
Resultados
La implementación de un sistema de componentes en Figma basado en Atomic Design dio lugar a mejoras significativas:
- Coherencia: Nuestros productos digitales tienen ahora un aspecto cohesionado, con patrones de diseño coherentes aplicados en todos los ámbitos.
- Eficacia: Los diseñadores ya no tienen que recrear elementos desde cero, lo que agiliza los ciclos de diseño y deja más tiempo para la innovación.
- Escalabilidad: La naturaleza modular del sistema Atomic Design nos permite escalar fácilmente nuestros esfuerzos de diseño, añadiendo nuevos componentes o modificando los existentes sin interrumpir todo el sistema.
- Colaboración mejorada: Las funciones de colaboración de Figma permitieron una comunicación fluida entre diseñadores y desarrolladores, reduciendo la fricción en el proceso de traspaso del diseño al desarrollo.
Conclusión
La transición de interfaces de usuario a medida en Adobe XD a un sistema de componentes en Figma supuso un cambio radical para nuestra empresa. Al adoptar los principios de Atomic Design, creamos un sistema de diseño escalable y eficaz que garantiza la coherencia en todos nuestros productos y permite a nuestro equipo colaborar de forma más eficaz.