Boceto: el objeto se mueve en relación con otro objeto / texto en el símbolo

11

¿Cómo hago que un objeto se mueva automáticamente cuando cambio el texto anterior / "adjunto"?

Estoy tratando de descubrir cómo funciona este símbolo predeterminado (gif incluido a continuación) y replicarlo.

Cuando escribo "" en la anulación, el símbolo de wifi se mueve al lado de los puntos de recepción. Cuando escribo una cadena más larga (ver gif), el símbolo wifi se mueve automáticamente en consecuencia después del texto.

Es como si el símbolo wifi estuviera anclado al FIN del cuadro de texto "Transportista" (que no tiene un ancho fijo), y se mueve según la longitud del cuadro de texto. ¿Cómo se hace esto en Sketch?


Demostración de cambio de texto en un símbolo con un objeto en movimiento dependiendo de la longitud del símbolo

La mesa de trabajo real no tiene ningún especial:

Capas de mesa de trabajo

¿Alguna solución? ¡Porfavor gracias!

encadenar
fuente
2
Como se hace Por ejemplo, creo un símbolo con texto y un say, un cuadrado justo al lado del cuadro de texto, cuando edito el texto, el cuadrado no se mueve. Quiero que el cuadrado se mueva automáticamente cuando cambio el texto en las anulaciones.
jess
No se puede reproducir este comportamiento deseado en ninguna de las sugerencias. ¿Todavía hay una manera de lograr esto con la última versión de Sketchapp 51.2? Lamentablemente, también esta publicación no parece ser precisa / funciona para la versión más reciente de Sketchapp. Cheerio
UX Brewer

Respuestas:

4

¡Muchas gracias al usuario de Twitter @kieranpblack!

Debe tener al menos 1 px entre la capa de texto y la segunda capa para que funcione. ¡Funciona en cualquier opción de cambio de tamaño, incluido el estiramiento predeterminado!

(¿Ni siquiera puedo recordar si probé esto antes de la actualización de Sketch 41 o no? Parece tan simple mirarlo ahora).

encadenar
fuente
4

Con un poco de prueba y error, he reducido los requisitos.

  • La alineación del texto debe establecerse en Auto
  • El espacio horizontal entre el texto y la otra capa debe ser ≥ 0 y ≤ 19px
  • La distancia entre la parte superior del marco de texto y la parte superior de la otra capa y la parte inferior del marco de texto y la parte inferior de la otra capa debe ser ≤ 8px

El texto puede estar a la izquierda o derecha de la capa desplazada.

Mark Horgan
fuente
Estas condiciones fueron muy útiles, muchas gracias.
Shravan Veer Kohli
0

No puedo encontrar ninguna documentación sobre esto, pero he descubierto cómo reproducir el comportamiento, si todavía está interesado.

  1. Cree un rectángulo de fondo, un fragmento de texto de ancho automático encima de ese rectángulo y un rectángulo más pequeño de hasta 20 píxeles desde el borde derecho del texto.
  2. Seleccione el texto y el rectángulo más pequeño y cree un grupo. Llamémoslo 'grupo1'
  3. Asegúrese de que el rectángulo pequeño viene después del texto de ancho automático en la lista de capas.
  4. Seleccione el rectángulo de fondo y el grupo1 y cree un símbolo.
  5. En la página de edición de símbolos, seleccione group1 y especifique 'pin to corner' como el método de cambio de tamaño. Verifique que todos sus otros elementos (los dos rectángulos y el texto) tengan 'estirar' como sus métodos de cambio de tamaño.
  6. Cree algunas instancias y anule el texto, debería funcionar.

Es complicado deducir el conjunto de reglas completo de la experimentación. Desearía que hubiera un manual o algo así.

Joshua
fuente
Intenté tus pasos pero lamentablemente no pude replicarlo ... ¡Sin embargo, agradezco tu ayuda! También es frustrante porque en el símbolo real, no hay agrupación ni ningún cambio de tamaño especial de "Pin a la esquina" ... Podría enviarle un mensaje al código de Bohemia para preguntarle al respecto.
jess
¿Has recibido noticias de Bohemian? Puede encontrar detalles sobre cómo funcionan los controles de 'cambio de tamaño de grupo'. Pruebe aquí: medium.com/sketch-app-sources/…
Joshua
No he sabido nada de ellos. Entiendo las características de cambio de tamaño del grupo, pero esto no se siente así, ya que no estoy necesariamente cambiando el tamaño del objeto en general ... solo cambiando el texto en una de las anulaciones. Todas las opciones de cambio de tamaño en el símbolo original se establecen en el "estiramiento" predeterminado.
jess
0

Me topé con esta pregunta en busca de respuestas sin suerte, pero descubrí un flujo de trabajo para que esto suceda:

Pasos:

  1. Cree un campo de texto en el que le gustaría que su objeto ancle.
  2. Alinear objeto con campo de texto (solo he intentado con un objeto a la derecha) .
  3. Agrupe el campo de texto y el objeto.
  4. Establezca la opción de "cambio de tamaño" del campo de texto para estirar y del objeto para pin-to-corner.
  5. Cree un símbolo con el grupo que acaba de crear.
  6. Importante: en la página de símbolos, extienda la mesa de trabajo de su nuevo símbolo a un ancho que acomode todas sus anulaciones que ingresará en su campo de texto.

Ahora debería poder anular su texto y su objeto se anclará a su nuevo texto.

¡Salud!

Andrew Muñoz
fuente