Mengekspor Token Sistem Desain Dari Figma ke WordPress

Salah satu tantangan utama dalam menjalankan situs atau serangkaian situs dalam skala besar adalah memastikan konsistensi dan kepatuhan desain dengan sistem desain. Seringkali definisi sistem desain ada di Figma, tetapi diimplementasikan secara manual dalam kode. Jika ada perubahan pada sistem selama pengembangan atau penggantian besar-besaran dalam retheming, definisi dan implementasi tidak sinkron.

Untuk mengatasi tantangan ini, kami telah membuat alat untuk menjaga agar sistem desain di Figma tetap sinkron dengan tema WordPress. Kami telah menggunakannya di situs kami sendiri, wpvip.com, dan ternyata sangat menyederhanakan proses ini sekaligus memastikan konsistensi.

Tujuan kami adalah memiliki satu sumber kebenaran untuk sistem desain sehingga tidak ada keterputusan antara desain dan implementasi. Dengan memanfaatkan plugin Token Figma, kami membuat satu sumber kebenaran ini, menyimpan semua token desain kami dalam sistem kontrol versi, dan mengotomatiskan pembaruan sistem desain dalam kode tema.

Prosesnya bekerja seperti ini:

1. Sistem desain didefinisikan dalam dokumen Figma.
2. Kami menggunakan plugin Token Figma untuk menentukan token desain yang digunakan di Figma.
3. Menggunakan penyimpanan GitHub Figma Token, kami mengekspor token ke repositori.
4. Dengan alat vip-design-system-bridge, kami memasukkan token desain ke WordPress melalui bagian kustom theme.json.
5. Dalam kode dan CSS, kami menggunakan kelas –-wp–kustom yang dihasilkan WordPress untuk mereferensikan token desain.

Hal ini membuat perubahan sistem desain dan tema ulang mudah dimasukkan ke dalam kode. Saat perubahan dilakukan di Figma, perubahan tersebut disinkronkan dengan Token Figma, dan kami menjalankan alat vip-design-system-bridge. Token desain kemudian diperbarui dalam konfigurasi tema kita tanpa membuat perubahan kode atau CSS lainnya.

Kami telah mengumpulkan contoh sistem dan tema desain untuk mendemonstrasikan proses dari Figma ke WordPress. Dalam posting ini, kami akan membahas langkah-langkah untuk:

1. Buat salinan contoh sistem desain.
2. Gunakan plugin Token Figma untuk menambahkan token desain.
3. Ubah token warna di Figma dan ekspor token desain baru.
4. Jalankan salinan lokal WordPress dengan pengelola lingkungan lokal VIP untuk melihat contoh tema WordPress.
5. Gunakan alat vip-design-system-bridge untuk memperbarui tema WordPress dengan token desain baru.

Sumber daya ini juga tersedia untuk membantu Anda memulai:

• Sistem dokumen desain sederhana di Figma berdasarkan template Material 3 Design Kit.
• Kumpulan token desain yang digunakan untuk berintegrasi dengan Token Figma.
• Contoh tema WordPress yang dikonfigurasi untuk menggunakan warna dan tipografi yang disediakan oleh sistem desain.

Siapkan token Figma

Kita akan mulai dengan alur kerja desainer dengan menggunakan sistem desain di Figma dan mengekspor token desain.

Untuk menginstal Figma Tokens, login ke Figma dan kunjungi halaman plugin Figma Tokens. Di pojok kanan atas, klik tombol “Cobalah”. Di halaman berikutnya, klik tombol "Jalankan". Setelah diinstal, plugin akan tersedia untuk digunakan dalam dokumen Figma.

1. Dapatkan salinan sistem desain

Kami akan menggunakan sistem desain kecil di Figma berdasarkan template Material 3 Design Kit untuk contoh kami.

1. Buka contoh sistem desain Figma. Kami akan membuat salinan lokal dari dokumen ini untuk digunakan dengan plugin Token Figma.

2. Di sisi kanan judul dokumen, klik panah bawah dan pilih “Duplikat ke draf Anda”:

3. Di pop-up di bagian bawah halaman, klik tombol "Buka":

2. Hubungkan Token Figma ke token desain

Kami telah membuat satu set token desain yang siap untuk diimpor ke dalam dokumen sistem desain menggunakan Token Figma. Token desain ini dibuat langsung di Figma menggunakan plugin Figma Tokens. Berikut cara menghubungkan plugin Token Figma ke token desain yang ada:

1. Buka dokumen Figma dari langkah sebelumnya. Di kiri atas halaman, klik tombol menu utama dan pilih Plugins -> Figma Tokens.

2. Setelah Token Figma diluncurkan, pilih tombol "Memulai". Anda akan melihat satu set token kosong di halaman berikutnya:

3. Di bagian atas plugin, klik tab "Pengaturan". Di bawah bagian "Penyimpanan Token", klik tombol "URL":

Klik tombol "Tambahkan kredensial baru". Di bidang “Nama”, masukkan nama apa pun (misalnya, Contoh Token). Di kotak URL, masukkan URL ini:

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

4. Hasilnya akan terlihat seperti ini:

5. Di bawah “Penyimpanan Token”, klik tombol “Dokumen Lokal”. Di pop-up konfirmasi, klik "Ya, setel ke lokal."

6. Karena bug kecil di Token Figma, halaman perlu disegarkan untuk memungkinkan pengeditan token yang diimpor dari URL. Perhatikan bahwa dalam proses desain nyata, token dapat disinkronkan melalui opsi penyimpanan token GitHub— langkah ini diperlukan hanya untuk contoh tutorial ini.

• Setelah mengubah opsi penyimpanan token menjadi "Dokumen lokal", muat ulang halaman.
• Buka kembali Token Figma melalui menu plugin.

7. Di Token Figma, buka tab "Token" untuk melihat semua token. Dengan menggunakan kotak centang di sebelah kiri, pilih kumpulan token "global", "material-3-warna", dan "material-3-teks". Anda sekarang dapat melihat token desain jenis dan warna di panel utama:

Set "global" mewakili palet warna penuh dan opsi tipografi yang tersedia dalam sistem desain. Kumpulan "material-3-warna" berisi nama warna token desain yang digunakan oleh sistem desain, misalnya "tema/cahaya/primer" dan "tema/cahaya/latar belakang". "Bahan-3-teks" berisi opsi tipografi yang digunakan oleh sistem desain.

Catatan: Tutorial ini menggunakan penyimpanan token URL untuk menyederhanakan penyiapan. Dalam dokumen sistem desain nyata, sistem penyimpanan token berversi seperti "GitHub" atau "GitLab" harus digunakan sebagai gantinya. Ini memungkinkan token untuk langsung ditarik dan dipublikasikan ke repositori dari Figma.

3. Ubah token desain dan ekspor

Bagian ini akan membahas mengubah token desain untuk latar belakang ke nilai baru, dan mengekspor file token yang diperbarui untuk digunakan dalam sistem desain.

1. Di Token Figma, klik kumpulan warna "material-3-warna". Selanjutnya, dalam dokumen Figma di bawah bagian "Tema Ringan", pilih blok "Latar Belakang" dan lihat bahwa token desain yang cocok dipilih di Token Figma:

2. Di Token Figma, klik kanan pada token warna latar belakang dan pilih "Edit Token." Ubah nilainya menjadi {color.error.70} (atau token warna palet lain pilihan Anda) dan klik "Perbarui":

Seperti yang ditunjukkan di atas, blok warna latar belakang yang dipilih harus berubah agar sesuai dengan token warna baru.

3. Di kanan bawah plugin Figma Tokens, klik "Ekspor". Centang "Semua set token", lalu buka bagian bawah dialog dan klik tombol "Ekspor".

Catatan: Saat menggunakan sistem penyimpanan token berversi seperti "GitHub", perubahan token dapat langsung didorong ke cabang repositori alih-alih mengunduh melalui browser.

Alat penyiapan untuk WordPress

Dalam dua langkah berikutnya, kami akan menggunakan token desain yang diekspor dari Figma untuk memperbarui tema WordPress yang berjalan secara lokal. Menggunakan alat ini membutuhkan pengalaman dengan GitHub, menjalankan perintah terminal, dan npm. Ikuti bersama menggunakan alat berikut:
Unduh atau tiru salinan repositori vip-design-system-bridge. Pelanggan WordPress VIP juga dapat langsung menggunakan kode WordPress mereka yang sudah ada dengan menyertakan salinan tema token-theme.

1. Instal alat terminal vip dev-env, yang digunakan untuk menjalankan salinan WordPress dan melihat perubahan token:

 $ npm install -g @automattic/vip

Catatan: Anda mungkin juga perlu menginstal Node.js dan Docker Desktop sebagai prasyarat untuk vip dev-env. Lihat bagian Prasyarat di halaman dokumen ini untuk informasi lebih lanjut.

4. Jalankan salinan lokal WordPress

Untuk melihat pembaruan token desain kami, jalankan salinan lokal WordPress menggunakan npm dan vip dev-env. Pastikan VIP CLI diinstal dan salinan repositori vip-design-system-bridge diunduh secara lokal.

1. Dengan folder repositori vip-design-system-bridge yang diunduh secara lokal, jalankan perintah ini untuk membuat situs web WordPress lokal:

 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. Setelah penginstalan selesai, jalankan perintah ini untuk memulai lingkungan

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

Hasilnya akan terlihat seperti ini:

3. Selanjutnya, aktifkan tema token dengan menjalankan:

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

Versi lokal WordPress sekarang harus berjalan dengan tema token kami diaktifkan.

4. Kunjungi instance WordPress yang berjalan secara lokal di http://token-site.vipdev.lndo.site/. Anda akan melihat halaman WordPress menggunakan tema Material 3 UI yang disederhanakan:

5. Gunakan token untuk memperbarui tema WordPress

Sekarang setelah tema default terlihat, kita dapat memperbarui tema kita di tempat dan melihat hasil perubahan token.

Arahkan ke repositori vip-design-system-bridge yang diunduh di terminal dan instal dependensi npm untuk skrip pemrosesan token:

 cd vip-design-system-bridge/ npm install

Selanjutnya, jalankan perintah berikut. Perbarui –tokenPath agar cocok dengan jalur tokens.json yang diunduh di langkah 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

Berikut rincian bendera yang digunakan dalam perintah ini:

 –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.

Ketika perintah di atas dijalankan, seharusnya menghasilkan output ini:

 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

Sekarang token telah diperbarui di WordPress, kunjungi http://token-site.vipdev.lndo.site/ atau segarkan halaman. Anda akan melihat bahwa warna latar belakang telah berubah menjadi nilai token yang ditetapkan di Figma:

Kesimpulannya

Kami telah mendemonstrasikan proses end-to-end untuk membuat satu sumber kebenaran untuk sistem desain dan mendorongnya ke dalam tema WordPress. Namun, ada topik penting dan kompleks yang belum tercakup dalam postingan ini, seperti proses pembuatan token untuk Token Figma, dan merancang tema blok WordPress yang dapat memanfaatkan token tersebut.

Meskipun demikian, kami harap ini memberikan proses yang berguna bagi mereka yang bergelut dengan implementasi sistem desain di WordPress, dan kode contoh dapat digunakan sebagai tempat awal.

Untuk topik sistem desain terkait, lihat sumber daya ini:

Plugin Token Figma – Memulai.

Penulis

Alec Geatches, Pengembang Perangkat Lunak Senior di Automattic

Pengembang Enterprise WordPress dan penggila sistem desain yang tinggal di Taipei, Taiwan.

Gopal Krishnan, Pengembang Perangkat Lunak Senior di Automattic

Gopal bekerja pada penawaran WordPress terpisah dari WordPress VIP, dengan minat pada sistem desain dan Gutenberg. Dia berbasis di Sydney, Australia dan baru saja pindah dari Kanada.