Poradnik wideo: automatyczne porządkowanie warstw i zmiana ich nazw
Karta Tidy zamienia nieuporządkowaną grupę warstw w Figmie w uporządkowane płótno i listę warstw. Tidy potrafi wykryć wizualny układ zaznaczenia, wyrównać warstwy do siatki odstępów, dopasować kolejność warstw do ich położenia na płótnie, nadać ramkom kolejne numery w nazwach i zaktualizować tekst numeracji slajdów w prezentacji.
Przygotowanie zaznaczenia
- W pliku Figma Design zaznacz warstwy, które chcesz uporządkować.
- Upewnij się, że zaznaczone warstwy są rodzeństwem, czyli mają ten sam element nadrzędny.
- Otwórz TinyImage i wybierz kartę Tidy.
Stan zaznaczenia pokazuje, ile warstw jest gotowych i w jakim elemencie nadrzędnym się znajdują. Tidy nie przesuwa ani nie zmienia kolejności warstw wewnątrz elementu nadrzędnego z Auto Layout; zamiast tego zaznacz warstwy na płótnie lub w zwykłej ramce.
Wybór działań Tidy
Otwórz Actions i włącz dowolne połączenie tych opcji:
Wyrównanie do siatki
Wykrywa najwyraźniejszy układ w wierszach lub kolumnach i wyrównuje zaznaczone warstwy z poziomymi i pionowymi odstępami ustawionymi w Preferences. Tidy toleruje niewielkie przesunięcia i warstwy o różnych rozmiarach, jeśli mają wspólną krawędź lub środek. To jedyne działanie włączone domyślnie.
Zmiana nazw
Dodaje kolejne numery na podstawie położenia każdej warstwy na płótnie. Przy domyślnym numerze początkowym 000 warstwy otrzymują nazwy 000, 001, 002 i tak dalej.
Kolejność warstw
Zmienia kolejność zaznaczonych warstw w panelu Layers w Figmie tak, aby odpowiadała ich wizualnej kolejności na płótnie. Zaznaczone warstwy pozostają razem na górze stosu warstw elementu nadrzędnego.
Numeracja slajdów w prezentacji
Znajduje pasujące warstwy tekstowe w każdej zaznaczonej warstwie i zastępuje ich tekst numerem zgodnym z kolejnością na płótnie, liczonym od jedynki: 1, 2, 3 i tak dalej. Włącz Leading zero w Preferences, aby używać 01, 02, 03 i tak dalej.
Konfiguracja preferencji Tidy
Otwórz Preferences, aby ustawić, jak działają włączone działania.
| Preferencja | Co ustawia |
|---|---|
| Grid spacing | Poziomy i pionowy odstęp między wyrównanymi warstwami. Oba domyślnie wynoszą 100 px. |
| Layout | Auto wykrywa układ wizualny. Wybierz Rows lub Columns, aby go wymusić. |
| Wrap component instances | Umieszcza zaznaczone instancje w ramkach o tym samym rozmiarze, gdy działa wyrównanie do siatki. |
| Pager variable | Dokładna nazwa warstwy tekstowej z numeracją do aktualizacji. Domyślnie {current}. |
| Pager number | Dodaje zero wiodące do numerów, dając 01, 02, 03 i tak dalej. |
| Starting frame number | Pierwsza wartość {n} i liczba cyfr używana przez {n} i {total}. Domyślnie 000. |
| Rename strategy | Zastępuje istniejące nazwy, łączy numer z każdą nazwą lub stosuje własny wzorzec. |
Automatyczne wykrywanie układu
Domyślny układ Auto porównuje istniejące poziome i pionowe pasy wizualne w zaznaczeniu. Poziomą listę lub szeroką siatkę układa w wierszach, a pionową listę lub wysoką siatkę – w kolumnach. Tidy rozpoznaje warstwy wyrównane do góry, środka lub dołu, więc lekkie przesunięcia i ramki o różnych rozmiarach pozostają naturalnie pogrupowane.
Wybierz Rows lub Columns, gdy chcesz wymusić określoną kolejność czytania zamiast wykrytego układu.
Strategie zmiany nazw
- Replace używa kolejnego numeru jako całej nazwy warstwy, na przykład
000. - Merge łączy numer z istniejącą nazwą, na przykład
000_Home. - Custom pattern łączy Twój własny tekst z opcjonalnymi zmiennymi nazewnictwa. Dzięki temu dokładnie określisz, gdzie pojawią się numery i istniejące nazwy warstw.
Zmienne nazewnictwa
Wpisz dowolny tekst w polu Name pattern, a następnie dodaj zmienne tam, gdzie mają pojawić się ich wartości. Zmienne są opcjonalne, więc możesz też nadać tę samą stałą nazwę wszystkim zaznaczonym warstwom.
| Zmienna | Co dodaje |
|---|---|
{n} | Kolejny numer zgodny z kolejnością na płótnie, uzupełniony zerami do długości Starting frame number. |
{total} | Liczbę zaznaczonych warstw, uzupełnioną zerami do tej samej długości co {n}. |
{name} | Istniejącą nazwę warstwy. |
{parent} | Nazwę wspólnej warstwy nadrzędnej. Dla warstw najwyższego poziomu jest to nazwa strony w Figmie. |
{type} | Typ warstwy, na przykład Frame, Instance lub Component Set. |
{page} | Nazwę bieżącej strony w Figmie. |
{row} | Numer wiersza wizualnego warstwy, liczony od jedynki. |
{column} | Numer kolumny wizualnej warstwy, liczony od jedynki. |
Na przykład przy ustawieniu Starting frame number na 001:
| Wzorzec nazwy | Przykładowy wynik |
|---|---|
{n} Client Name | 001 Client Name |
Client Name {n} | Client Name 001 |
{n} {name} | 001 Home |
{n} of {total} {name} | 001 of 024 Home dla zaznaczenia 24 warstw |
{parent} — {n} {name} | Client Screens — 001 Home |
{page} / {type} / {name} | Presentation / Frame / Home |
{n} Row {row}, Column {column} | 001 Row 1, Column 1 |
Client Name | Client Name dla każdej zaznaczonej warstwy |
Uruchamianie Tidy
Po sprawdzeniu ustawień Actions i Preferences wybierz Tidy n Layers. TinyImage zastosuje wszystkie włączone działania do bieżącego zaznaczenia i poda, ile warstw uporządkowano.
Użyj zwykłego polecenia Undo w Figmie, jeśli chcesz przywrócić poprzednie położenie, nazwy, kolejność warstw, ramki opakowujące i wartości numeracji.
Tryb Auto działa najlepiej, gdy zaznaczenie już sugeruje jakiś układ wizualny. Jeśli celowo nieregularny układ zostanie wykryty inaczej, niż oczekujesz, wybierz Rows lub Columns w Preferences.
Czcionka używana przez pasujące warstwy tekstowe z numeracją musi być dostępna w Figmie, aby TinyImage mógł zaktualizować ich znaki.