Diseño automático: Presentación de pilas - Flexbox for Sketch

Stacks cambia todo lo que sabías sobre el diseño receptivo en Sketch

Actualización: Exportar HTML y CSS receptivos desde Sketch con Anima ToolKit.
Cree prototipos interactivos e interactivos de alta fidelidad, todo dentro del boceto

Al igual que Flex Box en CSS, UIStackView en iOS y FlexboxLayout en Android, el diseño automático con su nueva función Stacks está, una vez más, cambiando el juego.

Por primera vez, los usuarios de la aplicación Sketch pueden aplicar la tecnología Flexbox directamente en Sketch, sin usar CSS.

Creemos que hacer que los poderosos conceptos de diseño sean accesibles para los diseñadores es clave para avanzar en el ecosistema de diseño.

Flexbox ha cambiado el juego y, aunque ha existido hace unos años, para usarlo debes usar CSS en un navegador y, por lo tanto, inaccesible para muchos diseñadores.

Stacks es una versión muy simple e intuitiva de Flexbox a la vez que potente. Permite a los diseñadores pensar y diseñar en términos de columnas, filas y cuadrículas, haciendo que los diseños sean más consistentes.

¿Qué es una pila?

Una pila es un tipo especial de grupo que define el diseño de sus capas secundarias.

Un ícono de grupo de pila tiene un color azul especial y un indicador de su dirección.Para apilar capas: selecciónelas y haga clic en el botón Apilar en el panel Diseño automático.
Consejo profesional:
- El uso de pilas conduce a la coherencia.
- La consistencia conduce a la claridad.
- El uso de pilas conduce a la claridad.

Una pila tiene 3 propiedades:

  • Dirección: define si el apilamiento de capas secundarias es horizontal o vertical.
Dirección
  • Alineación: puede ser superior / central / inferior / extendida
Alineación
  • Espaciado: define el espacio entre cada capa secundaria.
¡Las pilas se pueden anidar!
Pilas anidadas

¡Resuelve este rompecabezas!

¡9 de cada 10 diseñadores se equivocan la primera vez!
Cuántas pilas hay en esta imagen:
Desplácese hacia abajo para revelar la respuesta

La respuesta correcta es 3:

Un icono de pila tiene un color azul especial y un indicador de su dirección.
  1. Pequeña pila horizontal roja con 2 elementos internos: estrellas y recuento de reseñas.
  2. Pila vertical azul de tamaño mediano con 4 elementos internos: nombre de la aplicación, autor, categoría y grupo de pila 1.
  3. La pila horizontal verde más grande con 2 elementos internos: icono de la aplicación y grupo de pila 2.

Algunos datos interesantes sobre las pilas:

  • Las pilas son una excelente manera de definir las restricciones de diseño entre las capas entre hermanos.
  • Agregar o quitar capas dentro de una pila realinea sus capas secundarias.
  • La capa de texto puede empujar capas de hermanos cuando se expande. Descargar
  • Arrastrar y soltar es una manera fácil de reorganizar las capas secundarias.

Tutorial en video tutorial de Pablo Stanley

Flex Grid usando Pila

️ Alan Roy, un miembro prolífico de nuestro programa beta, ha creado un sistema Flex Grid usando Stack.

Escribió una explicación detallada que incluye un video de 10 minutos. Recomendamos encarecidamente leer y ver este gran tutorial. Es abrir la mente.

Nuestra misión en Anima es capacitar a los diseñadores para que sean dueños de su diseño. Estamos creando un flujo de trabajo que permite a los diseñadores definir, especificar y diseñar todos los bits y piezas que abarcan la interfaz / experiencia de usuario y, al final, generar automáticamente código nativo que es 1: 1 a la definición original. Esto permite a los diseñadores ser independientes de otras partes del equipo, como la ingeniería, que a veces tienen prioridades diferentes que el equipo de diseño.

Obtener Anima Plugin (Auto-Layout ahora es Anima Layout)

Guía y documentación

Cree prototipos interactivos e interactivos de alta fidelidad, todo dentro del boceto

De tus amigos en Anima App

Para debate, siéntase libre de unirse a nuestro grupo de Facebook