Esquisse: l'objet se déplace par rapport à un autre objet / texte du symbole

11

Comment faire bouger un objet automatiquement lorsque je change le texte précédent / "attaché" à lui?

J'essaie de comprendre comment fonctionne ce symbole par défaut (gif inclus ci-dessous) et de le répliquer.

Lorsque je tape "" dans le remplacement, le symbole wifi se déplace à côté des points de réception. Lorsque je tape une chaîne plus longue (voir gif), le symbole wifi se déplace automatiquement en conséquence après le texte.

C'est comme si le symbole wifi était ancré à la FIN de la zone de texte "Carrrier" (qui n'a pas de largeur fixe), et se déplaçait en fonction de la longueur de la zone de texte. Comment cela se fait-il dans Sketch?


Démonstration du changement de texte dans un symbole avec un objet se déplaçant en fonction de la longueur du symbole

Le plan de travail réel n'a pas de spécial:

Couches de plan de travail

Des solutions? Merci & merci!

text sketch-app symbols jess
la source
2
Comment est-il fait? Par exemple, je crée un symbole avec du texte et un mot à dire, un carré juste à côté de la zone de texte, lorsque je modifie le texte, le carré ne bouge pas. Je souhaite que le carré se déplace automatiquement lorsque je modifie le texte des remplacements.
jess
Impossible de reproduire ce comportement souhaité dans aucune des suggestions. Y a-t-il encore un moyen d'y parvenir avec la nouvelle version 51.2 de Sketchapp? Malheureusement, ce post ne semble pas être précis / ne fonctionne pas pour la dernière version de Sketchapp. Cheerio
UX Brewer

Réponses:

4

Un grand merci à l'utilisateur de twitter @kieranpblack!

Vous devez avoir au moins 1 px entre le calque de texte et le deuxième calque pour que cela fonctionne. Fonctionne sur n'importe quelle option de redimensionnement, y compris l'étirement par défaut!

(Vous ne vous souvenez même pas si j'ai testé cela avant la mise à jour de Sketch 41 ou non? Cela semble si simple à regarder maintenant.)

jess
la source
4

Avec un peu d'essais et d'erreurs, j'ai réduit les exigences.

  • L'alignement du texte doit être réglé sur Auto
  • L'espace horizontal entre le texte et l'autre couche doit être ≥ 0 et ≤ 19px
  • La distance entre le haut du cadre de texte et le haut de l'autre calque et le bas du cadre de texte et le bas de l'autre calque doit être ≤ 8px

Le texte peut être à gauche ou à droite du calque déplacé.

Mark Horgan
la source
Ces conditions étaient sacrément utiles, merci une tonne.
Shravan Veer Kohli
0

Je ne trouve aucune documentation à ce sujet, mais j'ai trouvé comment reproduire le comportement, si cela vous intéresse toujours.

  1. Créez un rectangle d'arrière-plan, un morceau de texte à largeur automatique au-dessus de ce rectangle et un rectangle plus petit jusqu'à 20 pixels à partir du bord droit du texte.
  2. Sélectionnez le texte et le petit rectangle et créez un groupe. Appelons-le «groupe1»
  3. Assurez-vous que le petit rectangle vient après le texte de largeur automatique dans la liste des calques.
  4. Sélectionnez le rectangle d'arrière-plan et le groupe 1 et créez un symbole.
  5. Sur la page d'édition des symboles, sélectionnez group1 et spécifiez «épingler au coin» comme méthode de redimensionnement. Vérifiez que tous vos autres éléments (les deux rectangles et le texte) ont "étirer" comme méthodes de redimensionnement.
  6. Créez des instances et remplacez le texte, cela devrait fonctionner.

Il est difficile de déduire l'ensemble de règles de l'expérimentation. Je souhaite qu'il y ait un manuel ou quelque chose.

Joshua
la source
J'ai essayé vos pas mais je n'ai malheureusement pas pu le reproduire… J'apprécie votre aide! C'est aussi frustrant car sur le symbole actuel, il n'y a pas de regroupement ou de redimensionnement spécial "Pin to corner" ... Je pourrais envoyer un code bohème un message à ce sujet.
jess
Avez-vous entendu parler de Bohème? Vous pouvez trouver des détails sur le fonctionnement des contrôles de «redimensionnement de groupe». Essayez ici: medium.com/sketch-app-sources/…
Joshua
Je n'ai pas entendu parler d'eux. Je comprends les fonctionnalités de redimensionnement de groupe, mais cela ne ressemble pas à cela, car je ne redimensionne pas nécessairement physiquement l'objet global ... je change juste le texte dans l'une des substitutions. Toutes les options de redimensionnement sur le symbole d'origine sont simplement définies sur le "stretch" par défaut.
jess
0

Je suis juste tombé sur cette question à la recherche de réponses sans succès, mais j'ai trouvé un workflow pour y arriver:

Pas:

  1. Créez un champ de texte sur lequel vous souhaitez ancrer votre objet.
  2. Aligner l'objet sur le champ de texte (je n'ai essayé l'objet qu'à droite) .
  3. Groupez le champ de texte et l'objet.
  4. Définissez l'option "redimensionnement" du champ de texte pour étirer et de l' objet pour épingler à coin.
  5. Créez un symbole avec le groupe que vous venez de créer.
  6. Important: dans la page des symboles, étendez la planche graphique de votre nouveau symbole à une largeur qui s'adaptera à tous vos remplacements que vous entrerez dans votre champ de texte.

Vous devriez maintenant pouvoir remplacer votre texte et votre objet s'ancrera sur votre nouveau texte.

À votre santé!

Andrew Munoz
la source