Diseño receptivo en croquis - Parte 1

Qué hay de nuevo en la función de cambio de tamaño del grupo.

Con la última versión de Sketch (v.44), la función de cambio de tamaño del grupo se ha actualizado. Aunque no hay un cambio fundamental, ahora tenemos un poco más de control sobre la función.

He escrito sobre esta característica antes en detalle. En este artículo, cubriré las actualizaciones y daré algunos consejos nuevos. En la siguiente parte de este artículo, compararé la función de cambio de tamaño del grupo con el complemento de diseño automático de Anima.

Función de cambio de tamaño de grupo en breve

Antes de llegar a los cambios, quiero explicar rápidamente la función de cambio de tamaño del grupo para los principiantes.

Es una función para hacer que las capas respondan al cambio de tamaño del grupo principal o mesa de trabajo. De esa manera, cuando cambia el tamaño de los grupos y todas las capas internas reaccionarían como se supone que deben hacerlo en lugar de simplemente estirarse y, por lo tanto, deformarse.

¿Que ha cambiado?

En términos de capacidad, no hay muchos cambios que hagan una diferencia significativa en la salida. Ahora tenemos más control sobre los detalles, como fijar la capa a los lados que desee. Por otro lado, los controles pueden parecer menos claros para los usuarios nuevos, especialmente cuando se configuran para modos de flotación y estiramiento; pero no te preocupes, ¡descubrirlo es fácil!

Puedo decir que también podrías hacer la mayoría de las cosas en la versión anterior. Tal vez requeriría algunos hacks como usar capas invisibles, pero aún así podría hacerlo. Por lo tanto, esta actualización no debe considerarse como un avance importante en la función de diseño receptivo, así es como se suponía que debía estar en primer lugar.

Un rico ejemplo que cubre la mayoría de las posibilidades

El detalle más importante en este ejemplo es el grupo de la galería en la parte inferior. Para lograr este diseño de cuadrícula, debe usar algunas capas invisibles en el grupo; de lo contrario, el espacio en blanco entre las cuadrículas crecería o se reduciría cuando se cambiara el tamaño.

Hice una tabla que describe algunos de los casos y muestra la configuración correspondiente en la versión anterior. Por supuesto, algunos de ellos no serían aplicables en la versión anterior, ya que no puede seleccionar varias opciones al mismo tiempo, como la quinta.

Descargar los ejemplos

Aquí el archivo Sketch que contiene los ejemplos presentados en este artículo.

consejos y trucos

1. Fije rápidamente a todos los lados

2. Restablecer la configuración de cambio de tamaño del grupo

3. Cómo cambiar el tamaño de los grupos que contienen texto

Para los cambios de texto que provocan un crecimiento vertical, puede usar la función de entrada matemática de Sketch y el valor de altura de línea de la etiqueta. Simplemente seleccione el grupo y cambie la altura a 241 + 24 * 2 y presione enter. 241 es la altura actual, 24 es la altura de la línea y 2 es el nuevo recuento de líneas, ¡sí, necesita contar! Sketch calcularía el resultado y establecería la altura del grupo en el valor correcto.

Para los cambios de texto que provocan un crecimiento horizontal, como los botones, puede usar un complemento de Sketch llamado Relabel (con el complemento Runner para ser más eficiente).

Espero que la función de cambio de tamaño automático venga pronto, ¡calcular los tamaños manualmente parece anticuado!

4. Exploración de la característica "Alineación automática de capas" en símbolos

Hay una pequeña característica de diseño receptivo adicional en los símbolos para facilitar el cambio de tamaño de las instancias de símbolos. Cuando sobrescribe un texto en una instancia de símbolo, Sketch mueve automáticamente cualquiera de las capas ubicadas cerca de esa capa de texto.

Esta característica funciona según la cercanía y el tamaño de la capa. Entonces, si se pregunta por qué no funciona en su caso, debe verificar estos valores.

Crítica

Ha pasado casi un año desde que se introdujo la función de cambio de tamaño del grupo. Fue un movimiento correcto y necesario. Pero esta actualización es como se suponía que debía ser en primer lugar. Por lo tanto, esperaba una mejora importante en lugar de simplemente corregirlo, pero no agregar características muy necesarias como: apilamiento, cambio de tamaño automático, restricciones de capa a capa, cuadrículas y diseños.

Creo que también hay algo muy importante que Bohemian Coding no ha sido lo suficientemente cuidadoso: los cambios en el flujo de trabajo. Las actualizaciones lentas y no bien pensadas en algunas características clave han provocado que los diseñadores encuentren flujos de trabajo temporales insostenibles. Especialmente en estilos de capa y características de símbolos. No es bueno presionar a los diseñadores y equipos para que configuren las cosas desde cero y se adapten tan a menudo. Creo que esto es realmente corrosivo.

En resumen, creo que Bohemian Coding debería tener una mejor hoja de ruta y ser más cauteloso al desarrollar las características clave. ¡Nos encanta Sketch y queremos que sea mejor!

¿Lo que sigue?

En la siguiente parte de este artículo, cubriré el complemento de diseño automático de Anima. Tiene más funciones y también parece más utilizable. También puedes usarlos juntos, así que te explicaré las cosas en detalle y te dejaré la elección.

¡Sígueme para estar actualizado y aplaudir si te gustó!