Ant Design: UX/UI más ágil, integración con devs, y menos costos

Cuando comenzamos el desarrollo de un producto digital, uno de los elementos clave es lo que sucede desde el usuario.

¿Cómo va a ver el usuario cada flujo de navegación o cada pantalla?

Hemos hablado anteriormente sobre estos puntos, con foco en procesos de sketching y wireframing o en herramientas colaborativas como Figma.

Siguiendo esta línea, hoy nos enfocaremos en Ant, un sistema de diseño open source.

Ant, al igual que sistemas como Material Design, Tailwind CSS, o Human Interface Guidelines, es una herramienta abierta que le permite a cualquier persona utilizarla como base fundamental para el desarrollo de un producto.

Estos sistemas de diseño traen una base de guidelines o guías sobre cómo implementarlos a nivel visual, junto con componentes pre construidos que se apoyan en esas guías.

Analicemos cómo impacta positivamente en el desarrollo de un producto el uso de estas herramientas, y cómo agiliza el proceso y mejora la integración entre las partes.

El diferencial de Ant

Ant.design fue desarrollado por Ant Financial, una empresa creada por Aliplay (Alibaba Group) con el objetivo de contar con una base de fundamentos de diseño y desarrollo para todos sus productos digitales.

Esto surgió a partir de la necesidad de responder rápido desde UX y desarrollo ante las necesidades del mercado y los clientes.

Con foco en generar una solución validada, que sirva como base para crear productos que sigan buenas prácticas, Ant busca uniformar o unificar las interfaces y reducir los altos costos de desarrollo y producción, ayudando a diseñadores y desarrolladores a enfocarse en una mejor experiencia de usuario para sus productos.

Empresas como Ant Financial, Alibaba y Tencent se apoyan en Ant.Design para sus productos digitales.

Integración a Figma

Gracias a las comunidades abiertas de Ant y Figma, Ant For Figma es una herramienta en constante actualización que nos permite trabajar con Ant directo desde Figma.

Esta herramienta se basa en archivos fuente de Figma (tanto en Dark Mode como en Light Mode), que contienen todos los elementos de Ant atomizados y componentizados, junto con los estilos definidos en escala, como la paleta de colores y las tipografías.

¿Qué significa esto?

Que fácilmente podemos crear un elemento, como un bloque de texto, y asignarle una escala tipográfica y un color, ambos definidos por Ant previamente.

Con el archivo de Ant abierto, podemos ver cómo “Texto de prueba” tiene a su derecha propiedades predefinidas.

Esto nos permitirá construir interfaces en escala utilizando todos los componentes y estilos pre construidos de Ant, manteniendo la consistencia visual que eso genera.

Este dashboard viene de ejemplo en Ant For Figma, y está construido a partir de componentes individuales de Ant.

Integración con desarrolladores: Figma y prototipos

Entendiendo las ventajas de trabajar con Ant y con Figma, el primer punto interesante a tener en cuenta para integrar a diseño y desarrollo son los componentes.

Con las herramientas de componentización y estilización de Figma, Ant for Figma contiene todos los componentes de Ant.design ya estilizados y atomizados.

Por lo que los botones se verán exactamente igual en todas las pantallas, y el equipo de desarrollo puede tomarlos desde la guía de estilos que contiene todos los componentes listados.

A su vez, desde Figma podemos rápidamente crear interfaces como el dashboard que vimos anteriormente, conectarlas y generar un prototipo interactivo.

De esta forma nos permitimos validar los distintos flujos del producto entre equipo y cliente, y trabajar de forma más ágil.

Integración con desarrolladores: Componentes y React

Hasta aquí entendimos las ventajas de trabajar con los componentes pre construidos por Ant.design.

¿Pero qué sucede cuando nuestro producto debe tener un diseño particular? Con sus tipografías, paletas de colores, estilos visuales, etc.

En este punto es donde los estilos y componentes de Ant y Figma brillan. Como diseñadores, podemos adaptar los componentes ya creados y generar nuevas versiones que impacten en todo el producto.

Rápidamente, nuestras nuevas tipografías, paletas de colores, y estilos en general, impactarán en todas las pantallas creadas previamente, y sólo será cuestión de hacer un pequeño refactor o refinamiento a cada una para acomodar los elementos.

A su vez, el equipo de desarrollo puede implementar el front de este producto en React (con la versión oficial de Ant), o en VueJS y Angular gracias al aporte de la comunidad.

De esta forma, podemos como desarrolladores construir el front del producto utilizando themes dinámicos que nos permitan hacer cambios que impacten en todo el producto, como por ejemplo de tipografías o colores.

Lo mismo sucede para los componentes. Se construyen una vez (o se importan desde Ant), y se reutilizan por todo el producto. Basta con modificarlos una sóla vez para que impacten en escala.

Conclusión: agilidad, colaboración y ahorros

Ant no sólo nos permite ahorrar inversión y recursos, pero por sobre todas las cosas tiempo.

Con la agilidad que brinda, podemos pasar del análisis funcional a un borrador o prototipo realista de forma muy rápida, pudiendo validar entre todo el equipo cada pantalla o flujo.

Sumado a eso, grandes empresas se apoyan en esta herramienta, y la comunidad abierta que tiene de fondo nos permite confiar a largo plazo y darle uso en nuestros productos en escala.