Design Token Dengan Variable Figma
Kita telah mempelajari apa itu variable, dengan kelebihan yang dimiliki variable bisa menjadi referensi atau sumber variable lain sedangkan style tidak bisa menjadi referensi style yang lain maka kita bisa menggunakan ini untuk membuat design token yang bisa berguna untuk membuat sebuah design system.
Apakah kalian belum mengerti definisi dari design token? kalau belum, penjelasan singkatnya design token merupakan bagian kecil dari komponen User Interface untuk digunakan kembali yang merepresentasikan atribut dari design seperti warna, font, spasi, dll. Kelebihannya kalian bisa merubah sebuah design token tanpa merubah referensi yang pertama dan fleksibel untuk mengubahnya.
Kali ini kita akan mencoba untuk menggunakan variable dari warna dan spasi. Pertama kalian buat variable untuk warna dan spasi seperti berikut ini:
Setelah variable dibuat, buatlah design token seperti warna background, warna button, teks button, spasi, corner radius button.
Kolom name diberikan nama dari token yang akan dibuat, contohnya kolom name diberi nama button dan kolom value ambil referensi warna dari variable yang sudah dibuat untuk variable warna (nah ini adalah maksud dari variable bisa menjadi referensi variable yang lain), ketika klik value akan muncul modal seperti gambar di atas lalu pilih tab yang libraries. Selanjutnya kalian bisa membuat design token yang lainnya.
Contoh lebih detailnya bisa membuat seperti card berikut ini, dan gunakan variable dari design token yang telah dibuat.
Nah, dari percobaan di atas telah berhasil membuat design token yang bisa digunakan untuk design system kalian tanpa merusak sumber referensi yang pertama untuk setiap variable design token yang dibuat, contohnya ketika ingin merubah warna button maka yang akan berubah hanya warna button saja tanpa merubah variable warna yang telah dibuat.
