Grillas

[camilembo]

Grillas

Nombre en Obelisco Grillas

Tipo de componente Guía de estilo

Referencias de Bootstrap Containers

¿Qué tenemos en Obelisco actualmente? Grillas en Estándares | UI Kit | Excel con especificaciones de breakpoints de Desarrollo

Requerimiento: actualizar las grillas del sistema de diseño

Descripción Existen inconsistencias entre las grillas actuales del UI Kit que utilizan los diseñadores y las que se usan en desarrollo. Diseño no cuenta con documentación suficiente para entender cuál fue la lógica constructiva de las grillas. Desarrollo basa sus grillas y breakpoints en las que trae de Bootstrap 4.6. Teniendo en cuenta el análisis de estilos de cara a la V2 y la futura migración a Bootstrap, necesitamos definir grillas nuevas que coincidan entre diseño y desarrollo.

Alcance

• Tener grillas establecidas para Desktop, Tablet y Mobile en el UI Kit

[camilembo]

Tenemos este link de XD que nos pasó Lauti para usar de base si lo necesitamos: https://xd.adobe.com/view/c5e691f2-0643-4e9e-a769-f2252af77984-90b5/grid/

[marusaad]

Durante la revisión de tipografía se anotaron cuestiones a tener en cuenta sobre grillas.

Cambios en la page de Grillas del UI Kit Parecería que los estilos de grillas se copiaron y pegaron de otra librería de Figma, por lo que no coinciden con lo que dispone Bootstrap y evidentemente esta decisión se tomó arbitrariamente. Esto se vió, por ejemplo, en la descripción del componente "grilla Columnas" que está en otros idiomas.

La decisión de crear este componente no está documentada, pero lo que sí sabemos es que las grillas son estilos, no componentes, por lo cual no debería existir. A su vez, la división de las columnas ya está documentada para desarrolladores en Storybook y no es relevante para diseñadores en Figma que utilizan los estilos. Por todas estas razones, se eliminó el componente.

El único lugar donde estaba en uso era en el UI Kit realizado para TAD, en el archivo de entregas al área. Ya se avisó al equipo correspondiente.

Además, se eliminaron frames ilustrativos de la page porque no coinciden con las grillas actuales. Y se colocó la nueva plantilla etiquetada con "en revisión".

Cuestones del componente

• El estilo de grilla de 412px debería eliminarse. No es utilizado por el equipo, ya que los frames que proponemos (en estándares y en la diaria) son de 360px.
• Hay que ver las grillas con desarrollo, por cómo vienen de Bootstrap, para poder empatarnos.
• También hay que considerar los breakpoints, y crear grillas responsivas.
• Evaluar si es necesario crear una grilla para Tablet

[marusaad]

📢 Nuevo requerimiento

Qué

Actualizar los estilos de grilla del sistema de diseño.

Por qué

Para estandarizar la modulación y la visualización y la responsividad de los componentes en las interfaces de productos digitales del gobierno, empatando diseño y desarrollo según Bootstrap 5.

Quién lo va a trabajar

Diseñadores

Quién lo va a revisar

PM + SGOs

Criterios de aceptación

• [x] El estilo debe basarse en la grilla 4x4.
• [x] El estilo debe alinearse con las capacidades técnicas que provee Bootstrap 5.
• [x] El estilo debe tener sus variantes desktop, tablet y mobile en Figma, con dimensiones de viewports establecidas.
• [x] El estilo debe cubrir los 5 breakpoints de Boostrap 5.
• [x] El estilo está documentado en la ficha.
• [x] Se mergeó la branch de Figma al UI Kit

✏️ Notas

Comenzamos con una etapa de análisis donde tomamos en cuenta las grillas que teníamos en el UI Kit y las grillas que tenía desarrollo hasta el momento. Llegamos a la conclusión de que las grillas no eran las mismas. La razón es que desarrollo utilizaba las grillas predeterminadas de Bootstrap 4.6, y diseño había elaborado grillas personalizadas. A partir de esto, sumado a la migración a Bootstrap 5, se hizo crucial rever las capacidades técnicas que traía la librería antes de diseñar un estilo de grilla desde diseño.

Esta etapa incluyó:

• Un archivo de excel conjunto donde se especificaron cuáles son los breakpoints que traen Bootstrap 5 incluyendo tamaños de viewports, márgenes/padding y el área diseñable.
• Un benchmark de qué viewports predeterminados para cada dispositivo utilizan otros sistemas de diseño.
• Un análisis sobre los comportamientos de grillas fluídas y fijas, con ventajas y desventajas de cada una y posibilidades de aplicación.

Principales conclusiones del análisis

• El estilo de grillas en Figma debe tener 3 variantes de grilla: mobile, tablet y desktop. La dimensión de los viewports debe estar alineada a los breakpoints presentes en el excel, utilizando o no medidas de algún dispositivo que trae Figma.
• Vamos trabajar con variables de Figma para poder brindar medidas estándar de viewport que trae cada grilla, y así estandarizar en qué medida se diseñan las interfaces permitiendo un handoff fluído.
• Identificamos una nueva forma de describir el comportamiento de la grilla basándonos en la teoría de comportamiento fijo y fluído.

Luego pasamos a la ideación del estilo donde validamos contínuamente con desarrollo los avances que se realizaron.

• Creamos variables del estilo de grilla para cada dispositivo, incluyendo la cantidad de columnas, los márgenes, las calles, el breakpoint (que sería el ancho del viewport) y el alto del viewport. De esta forma, el diseñador puede aplicar la variable ancho y alto del viewport al frame con el que está trabajando y luego aplicarle el estilo único de "grilla responsiva" para el dispositivo que se quiera. Esto permite que al seleccionar, por ejemplo, otro dispositivo dentro de las opciones de la variable, las grillas y el ancho y el alto del viewport cambien automáticamente. Además, creamos una variable de entorno que toma el dispositivo de cada componente y cambia la variante al cambiar de viewport. Esto agiliza el diseño para múltiples dispositivos, haciendo que, por ejemplo, los componentes pasen a la variable mobile al cambiar el viewport a mobile. Si bien esto es un gran avance, hay que tener en cuenta que no aplica a los componentes que no tengan variantes de dispositivo, y para que funcione al 100% los diseñadores tienen que tener el frame completamente en autolayout con las variables asignadas, representando una curva de aprendizaje más compleja.
• Creamos una branch de grillas en el archivo del UI Kit donde volcamos las variables de grilla y fuimos cambiando componente a componente, marcándo cada uno como ready for dev.

Finalmente, pasamos a la etapa de documentación donde creamos la ficha de documentación que previsoriamente se mostrará dentro de la url de Obelisco V2. Para crear la grilla utilizamos estrategias de content framing y nos apoyamos en un benchmark extenso de documentación de otros sistemas de diseño. Además, sumamos ejemplos de usos correctos e incorrectos que ayuden a las personas a usuarias a comprender cómo utilizar las grillas y garantizar la menor cantidad de inconsistencias posibles.

✏️ Archivos relevantes

Grillas 2.0 | Análisis Excel con Breakpoints Informe de Guía de estilos

[marusaad]

📢 Nuevo requerimiento

Qué

Actualizar los estilos de color del componente aplicando las variables correspondientes a la v2 de Obelisco.

Por qué

Porque posiciona al sistema en un nivel de calidad superior al cumplir con los criterios de accesibilidad de la WCAG, y facilita la adopción, la personalización y la escalabilidad a nivel global.

Quién lo va a trabajar

Diseñadores

Quién lo va a revisar

PM + SGOs

Criterios de aceptación

• [x] El componente aplica las variables semánticas y funcionales para los elementos del mismo.
• [x] El componente cumple con los criterios de contraste y legibilidad de la WCAG (Criterios de accesibilidad AAA)

✏️ Notas

Actualizamos los colores de la plantilla de la page del estilo en el UI Kit con las nuevas variables de Obelisco v2.