Cara Mudah Memahami Design Token dan Membuatnya dengan Variable di Figma
Tutorial dan belajar lebih mudah mengenai Design Token dan membuatnya menggunakan variable di Figma
Daftar isi
- Penjelasan Design Token
- Penjelasan Aliasing
- Tokens organization
- Primitive Tokens
- Semantic Tokens
- Component-specific tokens - Token Ordering
- Membuat Design Token Color pada Figma
- Primitive Tokens
- Semantic Tokens
- Component-specific tokens
Hallo semuanya, kali ini Aku bakal membagi tips dan trik untuk memahami design token di figma, menggunakan konsep variable pada Figma.
Sebelum memulai, kita harus mengenal terlebih dahulu apa itu design tokens dan Variable di figma. Untuk pembahasan Variable Aku sudah pernah membuatnya, silahkan membaca pada artikel dengan judul “Membuat UI Design Menjadi Lebih Mudah dengan Variable di Figma” atau juga bisa membaca artikel dengan judul “Cara Mudah dan Cepat Membuat Responsive Design di Figma”. Setelah kalian memahami apa itu variable dan cara menggunakannya, sekarang kita akan mengenal lebih jauh apa itu design token.
Yap pada tutorial kali ini Aku akan membahas Cara Mudah Memahami Design Token dan Membuatnya dengan Variable di Figma. Pada totorial ini akan terbagi menjadi beberapa bagian yaitu:
- Mengenal Design Token
- Mengenal Aliasing
- Token Organization
- Token Ordering
- Membuat Design Token Color pada Figma
Penjelasan Design Token
Sebelum mengenal apa itu design token, Aku akan membahas keuntungan menggunakan design token terlebih dahulu, yaitu;
- Konsistensi: Dengan menggunakan design tokens, kamu dapat memastikan bahwa semua elemen desain di seluruh proyek kamu dan tim selalu konsisten, terlepas dari platform atau aplikasi yang digunakan.
- Fleksibilitas: Design tokens memungkinkan untuk lebih fleksibel dalam desain, karena dapat dengan mudah diperbarui dan disesuaikan tanpa perlu memodifikasi elemen individu.
- Efisiensi: Dengan memusatkan keputusan desain, design tokens dapat sangat mengurangi waktu pengembangan, karena pengembang dapat dengan cepat mengakses dan mengimplementasikan elemen desain tanpa harus membuatnya dari awal.
- Aksesibilitas: Design tokens juga dapat meningkatkan aksesibilitas, karena membuat lebih mudah bagi developer untuk membuat desain yang mudah diakses dengan menyediakan pilihan warna dan tipografi yang telah ditentukan sebelumnya di dalam design tokens.
Design tokens adalah sebuah metode untuk mengelola sebuah design properties (Properti Visual) dan value yang digunakan di seluruh sitem design. Contoh dari design properties adalah typography, colors, spacing, border, radius, theme styles dan masih banyak lagi. Design tokens berfungsi sebagai bahasa bersama (shared language) antara desainer dan dev team, menyediakan sebuah common vocabulary sehingga mereka dapat membuat design system yang konsisten dari sisi developer begitu juga desainer.
Menggunakan token berarti melakukan update untuk design dan design system kita menjadi lebih cepat dan efisien. Mengapa bisa begitu? sebagai contoh jika kita mempunyai token dengan nama pink-400 dan sudah kita aplikasikan dibeberapa komponen, jika kita ingin menggubah value warnnaya atau kode hex warnanya, kita hanya perlu untuk mengganti satu kali perubahan yaitu di value tanpa harus mengubahnya satu-satu. seperti gmabar dibawah ini.
Namun penggunaan ini memliki kekurangan, bagaimana jika kita hanya ingin mengubah satu atau sampe dua komponen saja, berarti kita harus menggubahnya secara manual dan bagaimana jika komponen kita banyak dan memiliki banyak warna berbeda, seperti gambar dibawah ini.
Jika kondisi seperti itu makan kita akan menggunakan sebuah metode yang bernama Aliasing.
Penjelasan Aliasing
Aliasing adalah sebuah metode yang mengizinkan sebuah token untuk mengambil referensi dari value token yang lain, Jika value tokennya berubah maka token yang mengambil referensi tersebut juga terupdate dengan sangat baik dan terorganisasi.
Lalu bagaimana bisa Aliasing ini menyelesaikan permasalahan yang disebutkan diatas tadi. Aliasing memungkinkan kita untuk memecah token per kategori baik itu Katerogi ataupun sub-kategori.
Kategori berfungsi untuk membuat sebuah tokens baru dengan value yang berbeda. Jika value mengalami update/perubahan maka hanya komponen yang menggunakan token tersebut yang mengalami perubahan dan tokens yang lain tidak mengalami perubahan, seperti gambar dibawah ini.
Tidak ada batasan untuk kita membuat seberapa banyak kategori, sub kategori, value, dan token yang akan diimplementasikan. Semua sesuai dengan kesepakatan antar tim saja.
Tokens Organization
Tokens organization ini terdiri dari 4 struktur pembangun yaitu:
- Primitive tokens
- Semantic tokens
- Component-specific tokens
Primitive Tokens
Primitive tokens memberi tahu kita properti dan nilai apa yang ada dalam desain kita.
Primitive token adalah kata atau frase pendek yang digunakan untuk mewakili properti atau nilai tertentu dalam desain. Misalnya, Primitive token “warna” dapat digunakan untuk mewakili properti warna suatu objek, dan token primitif “merah” dapat digunakan untuk mewakili nilai merah untuk properti warna tersebut.
Primitive Tokens digunakan dalam berbagai bidang desain, termasuk desain produk, desain antarmuka pengguna, dan desain visual. Dengan menggunakan Primitive Tokens, kita dapat membuat desain yang lebih konsisten dan mudah dirawat.
Primitive tokens hanya digunakan sebagai foundation atau referensi untuk tokens lainnya, dia tidak boleh langsung digunakan oleh sebuah komponen.
Semantic Tokens
Semantic Tokens memberi kita konteks tentang ‘bagaimana’ token tersebut harus digunakan. Nama tokens tersebut menyampaikan makna, tujuan, dan bagaimana dan di mana aset tersebut harus digunakan.
Semantic tokens adalah jenis token khusus yang memberikan kita informasi tambahan tentang bagaimana token tersebut harus digunakan. Misalnya, semantic tokens surface/brand-contrast adalah token yang digunakan untuk mewakili warna kontras merek pada permukaan. Permukaan adalah area dalam desain yang berisi konten atau elemen lain. Contoh permukaan termasuk latar belakang, kartu, dan tombol.
Warna kontras merek adalah warna yang digunakan untuk membuat elemen merek menonjol dari latar belakang. Misalnya, jika merek Kamu memiliki warna utama merah, Kamu mungkin menggunakan warna kontras merek putih untuk membuat teks dan tombol merah Kamu menonjol dari latar belakang putih.
Component-specific Tokens
Component-specific tokens adalah token yang digunakan untuk mewakili properti dan nilai desain yang spesifik untuk komponen tertentu. Misalnya, token primary-button-background-color dapat digunakan untuk mewakili warna latar belakang tombol utama dalam desain Kamu. Token ini lebih spesifik daripada token semantik surface/brand-contrast, karena hanya dapat digunakan untuk tombol utama.
Token Ordering
Struktur design tokens selalu diawali dengan sebuah pondasi yaitu primitive tokens. Setelah primitive tokens kamu bisa memilih salah satu untuk dapat diaplikasikan ke sebuah komponen antara semantic tokens atau Component-specific Tokens. Namun kamu jugadapat menggunakan keduanya. seperti gambar dibawah ini
Membuat Design Token Color pada Figma
Hal pertama yang harus kita lakukan yaitu membuat sebuah variable untuk primitive tokens base color, primary color, dan neutral color yang akan digunakan untuk semantic tokens dan component tokens.
Pembuatan Primitive Tokens
Langkah-langkah membuat variable primitive tokens color yaitu:
- Klik local variable pada file figma Kamu
2. Maka akan muncul panel untuk membuat local variable, lalu kamu dapat mengklik create variable untuk color.
3. Setelah itu, kamu dapat mendefinisikan name dan value untuk base, neutral, primary, error, success, info, dan warning sesuai kebutuhan kamu.
Pembuatan Semantic Tokens
Setelah membuat variable primitive tokens, selanjutnya kita akan membuat semantic tokens sekaligus pembuatan dark mode. Langkah-langkah pembuatanya yaitu:
- Klik arrow down yang ada di atas pojok kanan, maka akan terbuka dropdown list seperti gambar dibawah
setelah sudah terlihat,klik create collection dan beri nama [ST] — Semantic Tokens untuk penamaan ini kalian bisa sesuaikan dengan kebutuhan.
2. Create variable untuk color kembali, setelah sudah muncul satu list variable, maka kalian dapat menambahkan 2 node kolom yaitu Light dan Dark.
3. Pertama kita akan mendefinisikan text color untuk light dan dark. Dengan cara memanggil primitive tokens variable color yang sudah kita definisikan sebelumnya, dengan cara memanggil primitive tokens variable color yang sudah kita definisikan sebelumnya, dengan cara mengklik icon variable pada value light dan dark. Pilih tokens untuk warna yang diinginkan. seperti video dibawah ini
4. Lakukan seperti langkah diatas untuk mendefinisikan surface, border, text, dan icon untuk light dan dark. Kamu bisa melihat hasilnya seperti di gambar dibawah ini
Pembuatan Component-specific Tokens
Setelah membuat variable semantic tokens, selanjutnya kita akan membuat Component-specific Tokens untuk button sekaligus pembuatan dark mode. Langkah-langkah pembuatanya yaitu
- Klik arrow down yang ada di atas pojok kanan, maka akan terbuka dropdown list seperti gambar dibawah
setelah sudah terlihat,klik create collection dan beri nama [TC] — Component untuk penamaan ini kalian bisa sesuaikan dengan kebutuhan.
2. Create variable untuk color kembali, setelah sudah muncul satu list variable, maka kalian dapat menambahkan 2 node kolom yaitu Light dan Dark.
3. Pertama kita akan mendefinisikan warna komponen untuk button serta akan mendefinisikan light dan dark. Dengan cara memanggil primitive tokens/semantic tokens variable color yang sudah kita definisikan sebelumnya, dengan cara mengklik icon variable pada value light dan dark. Pilih tokens untuk warna yang diinginkan. seperti video dibawah ini
4. Lakukan seperti langkah diatas untuk mendefinisikan button secondary, terniary, error, warning, neutral ,dan success untuk light dan dark. Kamu bisa melihat hasilnya seperti di gambar dibawah ini
Setelah membuat design, selanjutnya temen-temen bisa menggunakannya dalam pembuatan ui design maupun wireframe, dengan menggunakan color yang sudah didefinisikan sebelumnya. Disini saya memberikan sebuah contoh untuk penamaan design tokens, kamu dapat mengikuti penamaan seperti gambar dibawah ini
Kesimpulan
Dengan menggunakan variable kita bisa membuat design tokens dan juga lebih menghemat dalam melakukan pembuatan design kita, dengan mengurangi pembuatan design kita dapat mengalokasikan waktu untuk mengerjakan ux design untuk kemudahan user dan juga bisnis agar saling bersinergi satu sama lain.
Itu saja tutorial pada kali ini, pada pembahasan selanjutnya Aku sedang menulis mengenai belajar memahami flexbox dengan mudah melalui figma.
Link Website: My Personal Website
Beli Source Code: Karyakarsa
Download Assets: Download Assets
Download Template CV Figma: CV ATS Versi Lama
Buy Me a Coffee: Klik disini
