Cuadrícula flexible receptiva en croquis con AutoLayout y grupos de apilamiento

Mejora de los sistemas de diseño de estructura, modularidad y escala.

Herramientas como FlexBox en CSS, UIStackView en iOS y FlexboxLayout en Android han brindado a los desarrolladores los flujos de trabajo necesarios para manejar las múltiples vistas adaptativas y receptivas que existen hoy en día.

Sin embargo, para los diseñadores, el proceso de diseño del diseño en algunas de nuestras herramientas de diseño favoritas siempre ha sido más manual, más estático, más tedioso y, en general, menos matemáticamente preciso. Pero gracias al increíble trabajo de la gente de Anima, pronto podremos tener la estructura y la flexibilidad que necesitamos para cerrar esa brecha.

Con la nueva función Pilas que se incluye en el último complemento de diseño automático, ahora tenemos un flujo de trabajo que se adapta mejor a la salida de la interfaz de usuario y nos permite lograr una mayor coherencia y facilidad de mantenimiento en todos nuestros sistemas de diseño. (Descargo de responsabilidad: este concepto aún se encuentra en una etapa temprana. No todos los tipos de diseño se beneficiarán de este sistema, por lo tanto, mezcle y combine como mejor le parezca).

La demo

En el video a continuación, he reunido un diseño de cuadrícula flexible de prueba de concepto para mostrar la genialidad de las pilas. Es una mesa de trabajo que refleja la estructura de una página web básica.

Si bien aún se encuentra en las primeras etapas exploratorias, la siguiente funcionalidad se integra en la plantilla:

  • Escritorio a móvil en unos pocos clics.
  • Las mesas de trabajo son redimensionables y la alineación / distribución de la cuadrícula no se rompe
  • Rejilla estructurada por:
  • Cuerpo
     - Encabezado
     - Principal
     - —secciones
     - - - grupos de filas (tiene una capa de tamaño de cuadro hermano)
     - - - - filas
     - - - - - columnas
     - - - - - - módulos
     - - - - - - - componentes (símbolos anidados con lógica interna)
     - Pie de página
  • Utilice símbolos anidados, definidos por una combinación de propiedades de cambio de tamaño de boceto, fijación de Autolayout y grupos de pila para crear un sistema modular de componentes intercambiables.
  • El diseño se ajusta al ancho de la mesa de trabajo (el contenido tiene un ancho máximo de 1200 px y el dispositivo móvil tiene canales incorporados).
  • Variedad de distribuciones de columnas y fácil colapso / modificación de canalones.
  • y
    crecen y se reducen independientemente de
    .
  • Los cambios de altura a
    empujan el
    hacia abajo en la mesa de trabajo, manteniendo los márgenes y los rellenos intactos como lo haría una página web.
  • La altura de se puede ajustar para afectar la altura de las columnas secundarias
  • La alineación de las columnas (superior, media, inferior, estirada) se puede definir a nivel de fila.
  • Agregar una nueva columna (o eliminar una) de la fila ajusta automáticamente el ancho de las columnas hermanas para que se ajusten en consecuencia.
  • Agregar un nuevo módulo secundario dentro de la columna hará que esa columna crezca verticalmente (los módulos contienen cualquier cantidad de tipos de contenido, como imágenes, texto, listas, tablas, grupos y símbolos)
  • La alineación de los módulos (izquierda, centro, derecha, estiramiento) se puede definir a nivel de columna.
  • componentes de intercambio de símbolos para reemplazar contenido o fijar nuevas capas al componente existente.
  • La mesa de trabajo de escritorio se configuró para usar una cuadrícula de referencia de 8 puntos.

The Sketch File

Aquí está. Siéntase libre de mejorarlo de cualquier manera y hágamelo saber.
* IMPORTANTE *: el archivo NO funcionará a menos que tenga la última versión de Auto Layout with Stacks Support (.0.2.0 a partir de este escrito).

https://cl.ly/2v2I373P2E1f

Algunas reflexiones finales

Espero que haya sido útil para algunas personas. Sé que exploraré las posibilidades de Autolayout y Stacks más profundamente. A partir de esta versión, he notado algunas pequeñas peculiaridades con el redondeo matemático, pero espero que se solucionen a tiempo. Entre algunas de las solicitudes que he sugerido a los desarrolladores, creo que podrían ser valiosas.

  • La capacidad de agregar un fondo a un grupo apilado (fila principal de las columnas) sin afectar la lógica de la pila. En HTML / CSS, esto simplemente se haría en el nivel o "div", pero Sketch no permite una forma de hacerlo a partir de ahora.
    Hay un enfoque para hacer esto ahora que implica agrupar una capa de fondo con un grupo apilado y fijar el bg a la parte superior / izquierda / 100% de ancho y alto, y aunque el fondo crece para acomodar el contenido, no se reduce cuando el se elimina el contenido Creo que la reducción ya está en la lista de tareas pendientes del equipo.
  • La introducción de puntos de interrupción en la mesa de trabajo y el intercambio de símbolos basados ​​en la mesa de trabajo (intercambiando un navegador de 4 elementos con un icono de hamburguesa cuando la mesa de trabajo <400px, o mejor aún, usando un enfoque de consultas de contenedor.
  • Con dichos puntos de interrupción, la capacidad de alternar entre grupos apilados horizontales a verticales, de modo que las columnas se apilan unas encima de otras cuando no hay suficiente espacio. Y para que las columnas se envuelvan si se especifica.
  • La capacidad de especificar el ancho porcentual por columna.
    (Actualización: se acaba de implementar una versión de esta idea en el complemento mediante la función Pesos)
  • Aunque esto no necesariamente recaería en el equipo de Anima, Sketch también debería introducir soporte para variables, especialmente ahora con propiedades como espaciado, alturas mínimas y máximas, y otros valores que deben mantenerse consistentes en varias capas. Estas variables también podrían usarse para asignar a los colores y ayudar en el proceso de transferencia de Sass.

Bueno, eso es todo lo que tengo! Solo quería darle un saludo al equipo de Anima una vez más. Son increíblemente talentosos, receptivos y acogedores, ¡así que asegúrese de apoyar su arduo trabajo! Únete a su página de Facebook.

Si tiene alguna pregunta o comentario (¡agradable!), No dude en publicar a continuación o comunicarse en Twitter.