Szkic: Obiekt porusza się względem innego obiektu / tekstu w symbolu

11

Jak sprawić, by obiekt poruszał się automatycznie po zmianie tekstu poprzedzającego / „dołączonego”?

Próbuję dowiedzieć się, jak działa ten domyślny symbol (gif zawarty poniżej) i powielić go.

Kiedy wpisuję „” w zastąpieniu, symbol Wi-Fi przesuwa się obok kropek odbiorczych. Kiedy wpisuję dłuższy ciąg znaków (patrz gif), symbol Wi-Fi automatycznie przesuwa się odpowiednio po tekście.

To tak, jakby symbol Wi-Fi był zakotwiczony do KONIEC pola tekstowego „Przewoźnik” (który nie ma stałej szerokości) i przesuwa się zgodnie z długością pola tekstowego. Jak to się robi w Sketch?


Demo zmiany tekstu w symbolu, gdy obiekt porusza się w zależności od długości symbolu

Rzeczywisty obszar roboczy nie ma na nim żadnego specjalnego:

Warstwy obszaru roboczego

Jakieś rozwiązania? Proszę i dziękuję!

pęto
źródło
2
Jak to jest zrobione? Na przykład tworzę symbol z tekstem i powiedzmy, kwadrat obok pola tekstowego, gdy edytuję tekst, kwadrat się nie porusza. Chcę, aby kwadrat poruszał się automatycznie po zmianie tekstu w przesłonięciach.
jess
Nie można odtworzyć tego pożądanego zachowania w żadnej z sugestii. Czy jest jeszcze sposób na osiągnięcie tego dzięki najnowszej wersji Sketchapp 51.2? Niestety, również ten post nie wydaje się być dokładny / działa w najnowszej wersji Sketchapp. Cheerio
UX Brewer

Odpowiedzi:

4

Ogromne podziękowania dla użytkownika Twittera @kieranpblack!

Musisz mieć co najmniej 1 piksel między warstwą tekstową a drugą warstwą, aby działała. Działa z dowolną opcją zmiany rozmiaru, w tym domyślnym rozciąganiem!

(Nie pamiętam nawet, czy wypróbowałem to przed aktualizacją Sketch 41, czy nie? Wydaje się to takie proste, patrząc na to teraz.)

pęto
źródło
4

Przy odrobinie prób i błędów zawęziłem wymagania.

  • Wyrównanie tekstu musi być ustawione na Auto
  • Pozioma przestrzeń między tekstem a drugą warstwą musi wynosić ≥ 0 i ≤ 19 pikseli
  • Odległość między górą ramki tekstowej a górną krawędzią drugiej warstwy oraz dolną krawędzią ramki tekstowej i dolną krawędzią drugiej warstwy musi wynosić ≤ 8 pikseli

Tekst może znajdować się po lewej lub prawej stronie przesuniętej warstwy.

Mark Horgan
źródło
Te warunki były cholernie pomocne, dzięki tonie.
Shravan Veer Kohli
0

Nie mogę znaleźć żadnej dokumentacji na ten temat, ale wymyśliłem, jak odtworzyć to zachowanie, jeśli nadal jesteś zainteresowany.

  1. Utwórz prostokąt w tle, kawałek tekstu o automatycznej szerokości na górze tego prostokąta i mniejszy prostokąt do 20 pikseli od prawej krawędzi tekstu.
  2. Wybierz tekst i mniejszy prostokąt i utwórz grupę. Nazwijmy to „grupą 1”
  3. Upewnij się, że mały prostokąt występuje po tekście o automatycznej szerokości na liście warstw.
  4. Wybierz prostokąt tła i grupę 1 i utwórz symbol.
  5. Na stronie edycji symbolu wybierz grupę 1 i jako metodę zmiany rozmiaru określ „przypnij do rogu”. Sprawdź, czy wszystkie pozostałe elementy (dwa prostokąty i tekst) mają „rozciąganie” jako metodę zmiany rozmiaru.
  6. Utwórz kilka instancji i zastąp tekst, powinien działać.

Trudno jest wydedukować pełny zestaw reguł z eksperymentów. Chciałbym, żeby była instrukcja lub coś takiego.

Jozuego
źródło
Próbowałem twoich kroków, ale niestety nie mogłem tego powtórzyć… Doceniam twoją pomoc! Jest to również frustrujące, ponieważ w rzeczywistym symbolu nie ma grupowania ani specjalnych zmian rozmiaru „Przypnij do rogu”… Mogę wysłać czeski kod z pytaniem o to.
jess
Czy usłyszałeś od Czecha? Możesz znaleźć szczegółowe informacje o tym, jak działają formanty „zmiany rozmiaru grupy”. Spróbuj tutaj: medium.com/sketch-app-sources/…
Joshua
Nie otrzymałem od nich wiadomości. Rozumiem funkcje zmiany rozmiaru grupy, ale nie jest tak, ponieważ niekoniecznie fizycznie zmieniam rozmiar całego obiektu… po prostu zmieniam tekst w jednym z przesłonięć. Wszystkie opcje zmiany rozmiaru oryginalnego symbolu są ustawione na domyślny „rozciąg”.
Jess
0

Natknąłem się na to pytanie w poszukiwaniu odpowiedzi bez powodzenia, ale wymyśliłem przepływ pracy, aby tak się stało:

Kroki:

  1. Utwórz pole tekstowe, do którego chcesz zakotwiczyć obiekt.
  2. Wyrównaj obiekt do pola tekstowego (próbowałem tylko obiektu po prawej stronie) .
  3. Grupuj pole tekstowe i obiekt.
  4. Ustaw opcję „zmiany rozmiaru” pola tekstowego, aby rozciągnąć, a obiektu do przypięcia do narożnika.
  5. Utwórz symbol za pomocą właśnie utworzonej grupy.
  6. Ważne: na stronie symboli rozszerz tablicę graficzną nowego symbolu do szerokości, która pomieści wszystkie przesłonięcia wprowadzone w polu tekstowym.

Powinieneś być w stanie przesłonić tekst, a obiekt zakotwicza się w nowym tekście.

Twoje zdrowie!

Andrew Munoz
źródło