Eksportowanie tokenów systemu projektowego z Figma do WordPress

Jednym z kluczowych wyzwań związanych z prowadzeniem witryny lub serii witryn na dużą skalę jest zapewnienie spójności projektu i zgodności z systemem projektowania. Często definicja systemu projektowego znajduje się w Figma, ale jest ręcznie implementowana w kodzie. W przypadku jakichkolwiek zmian w systemie podczas opracowywania lub wymiany na dużą skalę w retheming, definicja i implementacja przestają być zsynchronizowane.

Aby sprostać temu wyzwaniu, stworzyliśmy narzędzie do synchronizacji systemów projektowania w Figma z motywami WordPress. Używaliśmy go na naszej własnej stronie, wpvip.com, i stwierdziliśmy, że znacznie upraszcza ten proces, zapewniając jednocześnie spójność.

Naszym celem jest posiadanie jednego źródła prawdy dla systemu projektowego, aby nie było rozbieżności między projektem a wdrożeniem. Korzystając z wtyczki Figma Tokens, tworzymy to pojedyncze źródło prawdy, przechowujemy wszystkie nasze tokeny projektowe w systemie kontroli wersji i automatyzujemy aktualizacje systemu projektowego w kodzie motywu.

Proces działa w następujący sposób:

1. System projektowy jest zdefiniowany w dokumencie Figma.
2. Używamy wtyczki Figma Tokens do definiowania tokenów projektowych używanych w Figma.
3. Korzystając z magazynu GitHub firmy Figma Token, eksportujemy tokeny do repozytorium.
4. Za pomocą narzędzia vip-design-system-bridge wstawiamy tokeny projektowe do WordPressa za pośrednictwem niestandardowej sekcji theme.json.
5. W kodzie i CSS używamy generowanych przez WordPress klas –-wp–custom, aby odwoływać się do tokenów projektu.

Dzięki temu zmiany w systemie projektowym i ponowne motywy są łatwe do wprowadzenia do kodu. Kiedy zmiany są wprowadzane w Figma, są one synchronizowane z Figma Tokens, a my uruchamiamy narzędzie vip-design-system-bridge. Tokeny projektowe są następnie aktualizowane w konfiguracji naszego motywu bez wprowadzania innych zmian w kodzie lub CSS.

Przygotowaliśmy przykładowy system projektowania i motyw, aby zademonstrować proces od Figma do WordPress. W tym poście omówimy kroki, które należy wykonać, aby:

1. Wykonaj kopię przykładowego systemu projektowego.
2. Użyj wtyczki Figma Tokens, aby dodać tokeny projektowe.
3. Zmień token koloru w Figma i wyeksportuj nowe tokeny projektu.
4. Uruchom lokalną kopię WordPress z lokalnym menedżerem środowiska VIP, aby zobaczyć przykładowy motyw WordPress.
5. Użyj narzędzia vip-design-system-bridge, aby zaktualizować motyw WordPress o nowe tokeny projektowe.

Te zasoby są również dostępne, aby pomóc Ci zacząć:

• Prosty system dokumentów projektowych w Figma oparty na szablonie Material 3 Design Kit.
• Zestaw tokenów projektowych służących do integracji z Figma Tokens.
• Przykładowy motyw WordPress skonfigurowany do używania kolorów i typografii dostarczonych przez system projektowania.

Ustaw żetony Figmy

Zaczniemy od przepływu pracy projektanta, korzystając z systemu projektowania w Figma i eksportując tokeny projektu.

Aby zainstalować Figma Tokens, zaloguj się do Figma i odwiedź stronę wtyczki Figma Tokens. W prawym górnym rogu kliknij przycisk „Wypróbuj”. Na następnej stronie kliknij przycisk „Uruchom”. Po zainstalowaniu wtyczki będzie można jej używać w dokumentach Figma.

1. Zdobądź kopię systemu projektowego

W naszym przykładzie użyjemy małego systemu projektowego w Figma, opartego na szablonie Material 3 Design Kit.

1. Otwórz przykładowy system projektowy Figma. Zrobimy lokalną kopię tego dokumentu do użycia z wtyczką Figma Tokens.

2. Po prawej stronie tytułu dokumentu kliknij strzałkę w dół i wybierz „Duplikuj do swoich wersji roboczych”:

3. W wyskakującym okienku na dole strony kliknij przycisk „Otwórz”:

2. Połącz żetony Figmy z żetonami projektów

Stworzyliśmy zestaw tokenów projektowych, które są gotowe do zaimportowania do dokumentu systemu projektowego za pomocą Tokenów Figma. Te tokeny projektowe zostały utworzone bezpośrednio w Figma przy użyciu wtyczki Figma Tokens. Oto jak podłączyć wtyczkę Figma Tokens do istniejących tokenów projektowych:

1. Otwórz dokument Figma z poprzedniego kroku. W lewym górnym rogu strony kliknij przycisk menu głównego i wybierz Wtyczki -> Tokeny Figma.

2. Po uruchomieniu Figma Tokens wybierz przycisk „Rozpocznij”. Na następnej stronie powinieneś zobaczyć pusty zestaw tokenów:

3. U góry wtyczki kliknij kartę „Ustawienia”. W sekcji „Przechowywanie tokenów” kliknij przycisk „URL”:

Kliknij przycisk „Dodaj nowe dane uwierzytelniające”. W polu „Nazwa” wpisz dowolną nazwę (np. Przykładowe Tokeny). W polu adresu URL wpisz ten adres URL:

 https://raw.githubusercontent.com/Automattic/vip-design-system-bridge/trunk/docs/design-tokens-example/tokens.json

4. Wynik powinien wyglądać mniej więcej tak:

5. W sekcji „Przechowywanie tokenów” kliknij przycisk „Dokument lokalny”. W wyskakującym okienku potwierdzenia kliknij „Tak, ustaw lokalnie”.

6. Ze względu na mały błąd w Figma Tokens, strona wymaga odświeżenia, aby umożliwić edycję tokenów zaimportowanych z adresu URL. Zwróć uwagę, że w prawdziwym procesie projektowania tokeny mogą być synchronizowane za pomocą opcji przechowywania tokenów GitHub — ten krok jest konieczny tylko w przypadku tego samouczka.

• Po zmianie opcji przechowywania tokenów na „Dokument lokalny”, ponownie załaduj stronę.
• Otwórz ponownie Figma Tokens za pomocą menu wtyczki.

7. W Figma Tokens przejdź do zakładki „Tokeny”, aby wyświetlić wszystkie tokeny. Za pomocą pól wyboru po lewej stronie wybierz zestawy żetonów „globalny”, „materiał-3-kolor” i „materiał-3-tekst”. Powinieneś teraz móc przeglądać tokeny projektu typu i koloru w panelu głównym:

Zestaw „globalny” reprezentuje pełną paletę kolorów i opcji typograficznych dostępnych w systemie projektowym. Zestaw „materiał-3-kolor” zawiera nazwane kolory żetonów projektu używane przez system projektowania, na przykład „motyw/światło/podstawowy” i „motyw/światło/tło”. „Materiał-3-tekst” zawiera opcje typografii używane przez system projektowania.

Uwaga: ten samouczek używa magazynu tokenów URL, aby uprościć konfigurację. W prawdziwym dokumencie projektowym należy zamiast tego użyć wersjonowanego systemu przechowywania tokenów, takiego jak „GitHub” lub „GitLab”. Umożliwiają one bezpośrednie pobieranie tokenów i publikowanie ich w repozytorium z Figma.

3. Zmień token projektu i wyeksportuj

W tej sekcji omówiono zmianę tokena projektu dla tła na nową wartość oraz eksportowanie zaktualizowanego pliku tokenu do użycia w systemie projektowania.

1. W Figma Tokens kliknij zestaw kolorów „materiał-3-kolor”. Następnie w dokumencie Figma w sekcji „Light Theme” wybierz blok „Tło” i zobacz, czy pasujący token projektu jest wybrany w tokenach Figma:

2. W Figma Tokens kliknij prawym przyciskiem myszy token koloru tła i wybierz „Edytuj token”. Zmień wartość na {color.error.70} (lub inny token koloru palety do wyboru) i kliknij „Aktualizuj”:

Jak pokazano powyżej, wybrany blok koloru tła powinien się zmienić, aby pasował do nowego tokena koloru.

3. W prawym dolnym rogu wtyczki Figma Tokens kliknij „Eksportuj”. Zaznacz „Wszystkie zestawy tokenów”, a następnie przejdź na dół okna dialogowego i kliknij przycisk „Eksportuj”.

Uwaga: W przypadku korzystania z wersjonowanego systemu przechowywania tokenów, takiego jak „GitHub”, zmiany tokenów można przesyłać bezpośrednio do gałęzi repozytorium zamiast pobierania przez przeglądarkę.

Narzędzia konfiguracyjne dla WordPress

W kolejnych dwóch krokach użyjemy wyeksportowanych tokenów projektowych z Figmy do aktualizacji działającego lokalnie motywu WordPress. Korzystanie z tych narzędzi wymaga pewnego doświadczenia z usługą GitHub, uruchamianiem poleceń terminala i npm. Postępuj zgodnie z poniższymi narzędziami:
Pobierz lub sklonuj kopię repozytorium vip-design-system-bridge. Klienci WordPress VIP mogą również bezpośrednio korzystać z istniejącego kodu WordPress z dołączoną kopią motywu tokena.

1. Zainstaluj narzędzie terminalowe vip dev-env, które służy do uruchamiania kopii WordPress i przeglądania zmian tokena:

 $ npm install -g @automattic/vip

Uwaga: może być również konieczne zainstalowanie Node.js i Docker Desktop jako wymagań wstępnych dla vip dev-env. Zobacz sekcję wymagania wstępne na tej stronie dokumentów, aby uzyskać więcej informacji.

4. Uruchom lokalną kopię WordPressa

Aby zobaczyć aktualizację naszych tokenów projektowych, uruchom lokalną kopię WordPress przy użyciu npm i vip dev-env. Upewnij się, że zainstalowano interfejs VIP CLI i pobrano lokalnie kopię repozytorium vip-design-system-bridge.

1. Po pobraniu lokalnie folderu repozytorium vip-design-system-bridge uruchom następujące polecenia, aby utworzyć lokalną witrynę WordPress:

 cd vip-design-system-bridge/docs/design-tokens-example vip dev-env create --multisite=false --php=8.0 --wordpress=6.1 --mu-plugins=demo --elasticsearch=false --phpmyadmin=false --xdebug=false --app-code=token-site/ --slug=token-site --title=Tokens

2. Po zakończeniu instalacji uruchom to polecenie, aby uruchomić środowisko

 vip dev-env start --slug=token-site

Wynik powinien wyglądać tak:

3. Następnie aktywuj motyw tokena, uruchamiając:

 vip dev-env exec --slug=token-site -- wp theme activate token-theme

Lokalna wersja WordPressa powinna teraz działać z włączonym motywem tokena.

4. Odwiedź instancję WordPress działającą lokalnie pod adresem http://token-site.vipdev.lndo.site/. Powinieneś zobaczyć stronę WordPress używającą uproszczonego motywu Material 3 UI:

5. Użyj tokenów, aby zaktualizować motyw WordPress

Teraz, gdy domyślny motyw jest widoczny, możemy zaktualizować nasz motyw na miejscu i wyświetlić wyniki zmian tokena.

Przejdź do pobranego repozytorium vip-design-system-bridge w terminalu i zainstaluj zależności npm dla skryptu przetwarzania tokena:

 cd vip-design-system-bridge/ npm install

Następnie uruchom następujące polecenie. Zaktualizuj –tokenPath, aby odpowiadała ścieżce pliku tokens.json pobranego w kroku 3:

 node ingest-tokens.js --tokenPath=~/Downloads/tokens.json --themePath=./docs/design-tokens-example/token-site/themes/token-theme --sourceSet=global --layerSets=material-3-color,material-3-text --overwrite

Oto zestawienie flag używanych w tym poleceniu:

 –tokenPath=~/Downloads/tokens.json # The path to the tokens.json file downloaded from Figma Tokens. Change # this to match the path of the tokens.json file downloaded in step 3. --themePath=./docs/design-tokens-example/token-site/themes/token-theme # The path to the WordPress theme folder that'll receive the updated tokens --sourceSet=global # Use the tokens in the “global” set as a source. Source sets are excluded # from the output, but can still be referenced by other token sets. This # option is used to avoid including the whole color palette and typography # choices in the resulting tokens. --layerSets=material-3-color,material-3-text # Use the “material-3-color” and “material-3-text” token sets to produce the # final output. All tokens included in these sets will be available to # WordPress.

Po uruchomieniu powyższego polecenia powinno ono wygenerować następujące dane wyjściowe:

 Using source and layer sets for tokens (source: global, layers: material-3-color, material-3-text) ︎ Processed with token-transformer wordpress-theme-json ︎ src/build/tokens.json ︎ Processed with Style Dictionary ︎ Wrote theme file: ~/vip-design-system-bridge/docs/design-tokens-example/token-theme/theme.json

Teraz, gdy tokeny zostały zaktualizowane w WordPress, odwiedź http://token-site.vipdev.lndo.site/ lub odśwież stronę. Powinieneś zobaczyć, że kolor tła zmienił się na wartość tokena przypisaną w Figma:

Podsumowując

Zademonstrowaliśmy kompleksowy proces tworzenia jednego źródła prawdy dla systemu projektowego i umieszczania go w motywie WordPress. Istnieją jednak ważne i złożone tematy, które nie zostały omówione w tym poście, takie jak proces tworzenia tokenów dla tokenów Figma i projektowania motywu blokowego WordPress, który może wykorzystać te tokeny.

To powiedziawszy, mamy nadzieję, że jest to przydatny proces dla tych, którzy zmagają się z implementacją systemu projektowania w WordPress, i że przykładowy kod może być użyty jako punkt wyjścia.

Aby zapoznać się z powiązanymi tematami związanymi z systemem projektowania, zobacz następujące zasoby:

Wtyczka Figma Tokens – Pierwsze kroki.

Autorski

Alec Geatches, starszy programista w firmie Automattic

Programista Enterprise WordPress i entuzjasta systemów projektowych mieszkający w Tajpej na Tajwanie.

Gopal Krishnan, starszy programista w firmie Automattic

Gopal pracuje na oddzielonej ofercie WordPress VIP, interesując się systemami projektowymi i Gutenbergiem. Mieszka w Sydney w Australii i niedawno przeniósł się z Kanady.