Poradnik wideo: synchronizacja wariantów komponentów w Figmie za pomocą arkusza kalkulacyjnego
Ten film pokazuje, jak synchronizować warianty komponentów w Figmie za pomocą arkusza kalkulacyjnego i wtyczki CopyDoc.
1. krok: przygotowanie wariantów warstwy komponentu w Figmie
Zanim zsynchronizujesz arkusz, aby przełączać warianty komponentów, musisz najpierw przygotować w Figmie zestaw komponentów z wariantami jako warstwę. Wykonaj kilka poniższych kroków (pokazanych też na filmie powyżej).
- Utwórz nową warstwę komponentu w Figmie i nadaj jej nazwę zgodną z nagłówkiem arkusza (na przykład #Tag).
- Kliknij warstwę komponentu prawym przyciskiem myszy, najedź na Main component i kliknij Add variant, aby utworzyć nowy zestaw komponentów w Figmie.
- Dodaj tyle nowych wariantów, ile potrzebujesz, klikając przycisk z ikoną + u dołu zaznaczonej warstwy zestawu komponentów, i zmień styl każdego nowego wariantu (na przykład tło lub kolory).
- Po utworzeniu wariantów komponentu możesz dostosować nazwy właściwości i wariantów, zmieniając domyślne nazwy z Figmy na łatwiejsze do rozpoznania i użycia w arkuszu (na przykład „Property 1” na „Genre”, a „Variant 1” na „Synthwave”).
- Przejdź do panelu Assets w Figmie, przeciągnij i upuść nowy komponent (na przykład #Tag) do pliku Figmy i przenieś go do ramek, które chcesz synchronizować z arkusza.
- Wykonaj instrukcje z 2. kroku poniżej, aby automatycznie przełączać wariant komponentu, synchronizując wiersze arkusza z ramkami w Figmie.
2. krok: przełączanie wariantów przez synchronizację arkusza
Podobnie jak przy synchronizacji zwykłego tekstu, aby przełączać warianty z arkusza, dodaj najpierw nazwę warstwy komponentu (na przykład Tag) jako nową wartość nagłówka kolumny w pierwszym wierszu arkusza.
Następnie w kolejnych wierszach tej samej kolumny wklej nazwę właściwości i wariantu, którą widać po dwukrotnym kliknięciu warstwy wariantu na pasku bocznym Figmy. Zawiera ona znak równości = (na przykład Genre=Synthwave), który oddziela nazwę właściwości od nazwy wariantu – jak w przykładzie poniżej (i na filmie powyżej).
| #Tag |
|---|
| Genre=Synthwave |
| Genre=Outrun |
| Genre=Vaporwave |
| Genre=Darksynth |
Gdy zsynchronizujesz arkusz z Figmą, wszystkie pasujące warstwy komponentów (na przykład #Tag) automatycznie zmienią wariant na wartość podaną w wierszach arkusza.
W tym samym arkuszu możesz nadal normalnie synchronizować teksty lub obrazy dla innych warstw – wystarczy dodać dla nich osobne kolumny.