Skizze: Objekt bewegt sich relativ zu einem anderen Objekt / Text im Symbol

11

Wie bewege ich ein Objekt automatisch, wenn ich den vorhergehenden / "angehängten" Text ändere?

Ich versuche herauszufinden, wie dieses Standardsymbol funktioniert (GIF unten enthalten) und es zu replizieren.

Wenn ich "" in die Übersteuerung eingebe, bewegt sich das WLAN-Symbol neben den Empfangspunkten. Wenn ich eine längere Zeichenfolge eingebe (siehe GIF), wird das WLAN-Symbol automatisch nach dem Text verschoben.

Es ist, als ob das WLAN-Symbol am ENDE des Textfelds "Träger" (das keine feste Breite hat) verankert ist und sich entsprechend der Länge des Textfelds bewegt. Wie geht das in Sketch?


Demo zum Ändern von Text in einem Symbol mit einem sich bewegenden Objekt in Abhängigkeit von der Länge des Symbols

Die eigentliche Zeichenfläche hat nichts Besonderes:

Zeichenflächenebenen

Irgendwelche Lösungen? Bitte danke!

text sketch-app symbols jess
quelle
2
Wie wird es gemacht? Zum Beispiel erstelle ich ein Symbol mit Text und einem Wort, einem Quadrat direkt neben dem Textfeld. Wenn ich den Text bearbeite, bewegt sich das Quadrat nicht. Ich möchte, dass sich das Quadrat automatisch verschiebt, wenn ich den Text in den Überschreibungen ändere.
Jess
Dieses gewünschte Verhalten kann in keinem der Vorschläge reproduziert werden. Gibt es noch eine Möglichkeit, dies mit der neuesten Sketchapp Version 51.2 zu erreichen? Leider scheint auch dieser Beitrag nicht korrekt zu sein / für die neueste Sketchapp-Version zu funktionieren. Cheerio
UX Brewer

Antworten:

4

Vielen Dank an den Twitter-Nutzer @kieranpblack!

Zwischen der Textebene und der zweiten Ebene muss mindestens 1 Pixel liegen, damit sie funktioniert. Funktioniert mit jeder Größenänderungsoption, einschließlich der Standarddehnung!

(Ich kann mich nicht einmal erinnern, ob ich dies vor dem Sketch 41-Update ausprobiert habe oder nicht? Scheint es jetzt so einfach anzusehen.)

jess
quelle
4

Mit ein wenig Versuch und Irrtum habe ich die Anforderungen eingegrenzt.

  • Die Ausrichtung des Textes muss auf Auto eingestellt sein
  • Der horizontale Abstand zwischen dem Text und der anderen Ebene muss ≥ 0 und ≤ 19px sein
  • Der Abstand zwischen der Oberseite des Textrahmens und der Oberseite der anderen Ebene und der Unterseite des Textrahmens und der Unterseite der anderen Ebene muss ≤ 8 Pixel betragen

Der Text kann sich links oder rechts von der verschobenen Ebene befinden.

Mark Horgan
quelle
Diese Bedingungen waren verdammt hilfreich, vielen Dank.
Shravan Veer Kohli
0

Ich kann keine Dokumentation dazu finden, aber ich habe herausgefunden, wie das Verhalten reproduziert werden kann, wenn Sie immer noch interessiert sind.

  1. Erstellen Sie ein Hintergrundrechteck, ein Stück Text mit automatischer Breite über diesem Rechteck und ein kleineres Rechteck bis zu 20 Pixel vom rechten Rand des Texts entfernt.
  2. Wählen Sie den Text und das kleinere Rechteck aus und erstellen Sie eine Gruppe. Nennen wir es 'Gruppe1'
  3. Stellen Sie sicher, dass das kleine Rechteck nach dem Text mit der automatischen Breite in der Ebenenliste steht.
  4. Wählen Sie das Hintergrundrechteck und die Gruppe1 aus und erstellen Sie ein Symbol.
  5. Wählen Sie auf der Symbolbearbeitungsseite Gruppe1 aus und geben Sie als Größenänderungsmethode "An Ecke anheften" an. Überprüfen Sie, ob alle anderen Elemente (die beiden Rechtecke und der Text) als Größenänderungsmethode "Dehnen" haben.
  6. Erstellen Sie einige Instanzen und überschreiben Sie den Text, es sollte funktionieren.

Es ist schwierig, den vollständigen Regelsatz aus dem Experimentieren abzuleiten. Ich wünschte, es gäbe ein Handbuch oder so.

Joshua
quelle
Ich habe deine Schritte ausprobiert, konnte sie aber leider nicht wiederholen ... Ich schätze deine Hilfe! Es ist auch frustrierend, weil es auf dem eigentlichen Symbol keine Gruppierung oder spezielle Größenänderung für "Pin to Corner" gibt. Ich könnte dem böhmischen Code eine Nachricht senden, in der ich danach gefragt werde.
Jess
Hast du etwas von Bohemian gehört? Sie finden Details dazu, wie Steuerelemente zum Ändern der Gruppengröße überall funktionieren. Versuchen Sie hier: medium.com/sketch-app-sources/…
Joshua
Ich habe nichts von ihnen gehört. Ich verstehe die Funktionen zur Größenänderung von Gruppen, aber das fühlt sich nicht so an, da ich die Größe des Gesamtobjekts nicht unbedingt physisch ändern muss. Ich ändere nur den Text in einer der Überschreibungen. Alle Größenänderungsoptionen für das ursprüngliche Symbol werden nur auf die Standardeinstellung "Strecken" gesetzt.
Jess
0

Ich bin gerade auf diese Frage gestoßen, um Antworten zu finden, ohne Glück, aber ich habe einen Workflow gefunden, um dies zu erreichen:

Schritte:

  1. Erstellen Sie ein Textfeld, in dem Ihr Objekt verankert werden soll.
  2. Objekt an Textfeld ausrichten (ich habe nur Objekt rechts ausprobiert) .
  3. Gruppieren Sie Textfeld und Objekt.
  4. Stellen Sie die Option "Größenänderung" für das zu streckende Textfeld und für das Pin-to-Corner-Objekt ein.
  5. Erstellen Sie ein Symbol mit der gerade erstellten Gruppe.
  6. Wichtig: Erweitern Sie auf der Symbolseite die Zeichenfläche Ihres neuen Symbols auf eine Breite, die alle Ihre Überschreibungen berücksichtigt, die Sie in Ihr Textfeld eingeben.

Sie sollten jetzt in der Lage sein, Ihren Text zu überschreiben, und Ihr Objekt wird in Ihrem neuen Text verankert.

Prost!

Andrew Munoz
quelle