Detrás de escena :)

Elementos de texto adaptativo en croquis

¡Dulce!

Actualización: Ayer, el equipo de Sketch anunció que una de sus funciones más solicitadas está disponible en la versión beta de la aplicación.
Lo llaman "Diseño inteligente" y parece A M A Z I N G.
Lo que también significa es que el método en esta publicación se volverá obsoleto (¡finalmente!).

Algunos ejemplos de la web para lo que es posible:
twitter.com/mds/status/1167145339457069062
twitter.com/svorklab/status/1167350673857482752
twitter.com/gaddafirusli/status/1167157688867835904

Ve y échale un vistazo> www.sketch.com/beta

Esta publicación se pensó por primera vez el 19 de agosto de 2016, pero nunca vio la luz del día (debido a la pereza / la dilación / lo que sea). A medida que pasaba el tiempo, noté que las personas están hablando (e incluso escribiendo publicaciones de Medium) sobre el comportamiento del que hablaré. Así que decidí terminar de editar el borrador y publicarlo. Yay para mí ...

Todo comenzó con una simple pregunta ...

Hace poco encontré un problema pequeño pero tedioso que me molestó desde entonces. Diseñé una interfaz de tablero para uno de mis clientes, y era un componente de interfaz de usuario bastante común; Mostró información sobre un usuario específico con elementos tales como: imagen de avatar, día de publicación y una marca de tiempo. Se veía algo así:

Mientras me entrometía con la interfaz de usuario, cambiando la longitud del componente varias veces, me preguntaba si había una manera más fácil de cambiar el contenido, el relleno y la longitud de todo el componente sin necesidad de cambiar cada elemento una y otra vez.

La función de cambio de tamaño ayudó un poco cuando necesitaba cambiar la longitud de la fila. Hay muchos tutoriales y publicaciones sobre esta increíble característica, como esta o esta que recomiendo leer si aún no lo ha hecho.

Lo que realmente quería lograr era un elemento de texto dinámico que se empujara entre sí cuando cambiara su tamaño. Entonces, por ejemplo, si uso un complemento como Craft by InVision (o cualquier otro complemento que complete automáticamente los datos), el elemento de nombre de usuario empujará el elemento de fecha junto a él y así sucesivamente, como en un producto real de trabajo.

Mientras discutía un problema similar con Eran Lahav (un colega mío que también es un diseñador increíble ), estaba decidido a encontrar una solución para el problema. Recordé haber leído un artículo sobre la posibilidad de crear tablas dinámicas con la nueva función de cambio de tamaño (presentada en la versión 39). La forma en que Reony Tonneyck lo hizo fue usando elementos gráficos ocultos que se usaron para rellenar el contenido de la tabla. Esto me dio la idea de poner un elemento gráfico oculto entre dos objetos de texto. ¿Y adivina qué?

¡Jodidamente funcionó!
Así que en realidad estaba siguiendo el método de Reony para crear una fila dinámica, pero cuando envié el archivo a Eran, me dijo que funcionaba con cualquier opción de cambio de tamaño que elija para los elementos.

Eso me sorprendió porque estaba seguro de que este comportamiento está vinculado a la función de cambio de tamaño. Después de profundizar un poco en la documentación oficial de Sketch, descubrí que es un comportamiento vinculado a la función de anulación de símbolos:

Y esa es la publicación original sobre esta característica:

La cuestión es que usaron un objeto gráfico junto a un objeto de texto, no dos objetos de texto uno al lado del otro. Y cuando probé este método solo con objetos de texto, no funcionó ...

Después de un montón de pruebas que Eran y yo hicimos, estamos bastante seguros de que al usar símbolos con varios objetos de texto uno al lado del otro con objetos gráficos entre ellos, el comportamiento gráfico es como un "guardián" que evita que los objetos de texto toquen cada uno de ellos. otro (ver actualización a continuación).

Actualizar:
Parece que esta característica todavía funciona en la versión 44. También me di cuenta de que cuando la distancia entre dos elementos de texto que se encuentran al lado de cada uno es menor o igual a 20px, el cambio de tamaño automático funcionará. Si la distancia es más de 20 px, las cosas comenzarán a romperse. No hay "guardianes" :)

Los experimentos de Eran

Ahora, el problema con las anulaciones es que los complementos de contenido reales (como Craft) no siempre funcionarán. Excepto por uno (hasta donde yo sé, gracias Eran): Sketch Data Populator por el precioso estudio de diseño. Cuando se utiliza el complemento, afecta la sección de anulación en lugar del contenido del símbolo original, y resuelve perfectamente el problema de anulación de datos de relleno.

EDITAR: Aparentemente, el complemento Craft admite anulaciones de texto, por lo que pido disculpas por el error (cuando comencé a escribir esta publicación en agosto, Craft no admitía anulaciones de texto, de ahí el error)

Conclusión

Esta característica es, con mucho, una de las más poco intuitivas que encontré en Sketch, pero bueno, todavía es mejor que Illustrator.
En resumen, lo importante que debes considerar antes de usar este método es que si intentas cambiar el ancho o la altura del componente principal, todo el infierno se desatará.
Sé que los chicos geniales de Anima App están trabajando para mejorar su complemento para que funcione de manera similar, y hará que el componente responda completamente (aunque al probar mi método con su complemento hoy, 30 de enero, Sketch se estrelló).

Espero que esta publicación haya ayudado, es la primera que he tenido y me tomó un tiempo adaptarme y escribirla. Que tengas un día maravilloso .