Mengetahui Fungsi dan Cara Membuat Design Tokens Bagi Designer

Kamu tertarik dalam bidang UI/UX tapi belum tahu istilah design tokens? Waduh, sepertinya kamu perlu tahu karena belakangan ini design tokens sedang hangat dibicarakan di kalangan UI/UX Designer. Yup, design tokens merupakan sebuah nama yang termasuk dalam bagian dari sistem desain pemrograman.

Dengan design tokens, kamu mampu memaksimalkan warna, baris, dan lainnya pada seluruh platform yang didukung oleh seluruh bahasa pemrograman. Sebelum makin bingung, kali ini Kelas.com akan membahas tuntas seputar design tokens mulai dari pengertian, fungsi, benefit, dan lainnya. Yuk, simak artikelnya!

Apa yang dimaksud Design Tokens?

Design tokens merupakan sebuah keputusan desain yang dapat diulang berupa nilai yang mewakili properti visual dalam membangun interface. Design tokens mencakup fitur-fitur seperti warna, tipografi, bayangan, dan spasi.

Karakteristik utama dari design tokens adalah konsistensi di seluruh platform. Design tokens digunakan oleh Developer di seluruh produk dan dapat diadaptasi ke beberapa format bahasa pemrograman seperti SCSS, CSSS, xml, dan masih banyak lagi.

Fungsi Design Tokens

Sumber: Token Studios

Dikembangkan tahun 2014 oleh Salesforce, design tokens adalah atribut desain yang dikemas dengan tujuan untuk menggunakannya berulang kali untuk menjaga konsistensi visual dalam platform digital. Design tokens akan membantu para UI/UX Designer dan Developer dalam menemukan solusi untuk masalah kompleks.

Dengan menggunakan design tokens, kamu akan menghindari masalah yang biasanya muncul dalam kolaborasi antara Designer dan Developer saat mengembangkan aplikasi. Design tokens juga diharapkan dapat mengefisienkan waktu pembuatan aplikasi karena dapat digunakan dalam segala bentuk platform seperti iOS, android, maupun aplikasi web.

Benefit Design Tokens

Design tokens memiliki banyak manfaat dalam pembuatannya baik dari sisi seorang UI/UX Designer maupun Developer. Adapun beberapa benefit dari design tokens sebagai berikut.

Single Source of Truth

Design tokens paling bermanfaat untuk menciptakan single source of truth yang mendorong Salesforce untuk mulai menggunakannya. Design tokens memungkikan seluruh orang menguasai bahasa desain yang sama ketika  tim produk, Developer, dan UX Designer mengerjakan produk yang sama.

Menjamin Desain UI yang Konsisten

Bukan hal yang aneh bagi Desainer untuk secara tidak sengaja menggunakan ukuran, warna merek, dan jarak yang sedikit berbeda untuk satu produk, sehingga ketidakkonsistenan ini menyebabkan kerugian. Untuk itu, design tokens hadir untuk menjamin desain UI yang konsisten untuk setiap produk.

Flexibility

Design tokens memberikan fleksibilitas pada produk dan sistem desain untuk melakukan perubahan dan penskalaan. Jika tim perlu menambahkan properti khusus platform, hanya cukup mengupdate design tokens tersebut.

Misalnya, android menggunakan kode warna tertentu. Untuk mengadaptasi sistem desain agar mengakomodasi android, kamu dapat menambahkan kode warna yang diinginkan ke setiap design tokens dan menjadi lebih fleksibel.

Efisiensi

Design tokens membuat proses perancangan dan pengembangan menjadi lebih efisien dengan memisahkan properti desain dari penggunaan spesifiknya. Ini berarti Desainer dapat fokus pada pendefinisian dan pengeditan token desain, sementara Developer dapat dengan mudah mengakses dan menggabungkannya ke dalam kode.

Baca juga:

• Daftar Plugin Figma untuk Memudahkan Pekerjaan Para Designer

Bagaimana Membuat Design Tokens

Untuk membuat design tokens, diperlukan pemahaman lebih lanjut mengenai struktur design tokens yang terdiri dari:

• Category, termasuk warna, baris, ukuran, jarak, dan lainnya.

• Item

• Sub-item

• State

Jika kamu ingin membuat design tokens struktur ini perlu ditulis seperti “color_background_button_primary_active” atau mungkin disingkat color-bg-btn-primary-active. Token ini akan berisi setiap jenis kode warna yang diperlukan untuk implementasi pada berbagai platform.

Kunci untuk membuat design tokens adalah perlu adanya konsistensi. Dengan struktur ini kamu akan menggunakan konvensi penamaan yang dapat diprediksi sehingga pengguna dapat dengan mudah menemukan token dan menskalakan sistem.

Selain itu, ada beberapa tipe design tokens dalam pembuatannya. Ini akan memudahkan kamu dalam membuat design tokens yang efisien sesuai dengan tingkatannya sebagai berikut.

Tingkat Pertama

Pada tingkat pertama, kamu dapat memiliki token utama yang membentuk fondasi entitas. Kamu dapat menyederhanakannya dengan membuat token dengan struktur dasar yang terdiri dari key value pairs yang menentukan atribut desain penting seperti:

• Grid, struktur tata letak

• Ikon, kumpulan ikon yang digunakan di seluruh desain

• Shadow levels and Opacity, tingkat bayangan dan nilai opasitas yang berbeda pada berbagai elemen

• Color Composition, termasuk warna primer, warna sekunder, dan turunan dari warna utama.

• Font, opsi font utama dan sekunder serta gaya dan variasinya masing-masing

• Spacing, Breakpoint, Transisi, Stacking Contexts, termasuk jarak antar elemen untuk desain responsif, transisi untuk animasi dan layering elements.

Tingkat Kedua

Di tingkat kedua, kamu akan membuat keputusan desain yang berhubungan dengan aspek visual elemen interface umum seperti:

• Primary Color, ditentukan secara khusus untuk link konteks utama, sehingga memberikan representasi visual yang konsisten

• App Main Text Font, menetapkan pilihan primary color untuk teks yang digunakan di seluruh aplikasi, memastikan gaya tipografi yang kohesif.

Sumber: Design Tokens Figma

Tingkat Ketiga

Pada tingkat ketiga design tokens, ada banyak kemungkinan terbuka untuk sistem desain yang lebih kompleks. Tingkat ini memperdalam rincian rumit setiap komponen dalam user interface, di mana token tertentu berhubungan erat dengan token tingkat kedua, mendefinisikan kasus-kasus tertentu dalam interface.  

Tingkat ini memperkenalkan lapisan tambahan token komponen sehingga memberikan peluang untuk membatasi penggunaan kontekstual. Selain itu, pada tingkat ketiga perlu diciptakan tema dinamis dan mode warna. 

Tingkat abstraksi yang lebih tinggi ini memberikan kamu kendali yang lebih besar terhadap elemen desain individual dalam berbagai komponen. Ini berarti pada tingkat terakhir ini kamu dapat menjadikannya ideal untuk proyek yang memprioritaskan penyesuaian dan kemampuan beradaptasi.

Menggunakan Design Tokens di Figma

Figma tidak hanya mempermudah perancangan tetapi juga menyediakan dukungan untuk design tokens melalui plugin. Menyiapkan struktur yang tepat untuk token desain sangat penting untuk keberhasilan implementasi. 

Hal ini melibatkan pengorganisasian design tokens ke dalam kelompok, menetapkan konvensi penamaan yang jelas dan menggunakan nama lain seperti label. Dengan melakukan hal ini, design tokens akan memastikan bahwa design tokens yang dihasilkan oleh Figma selaras dengan persyaratan dan harapan Developer maupun Designer.

#BelajarLebihMudah Melalui Kelas Figma di Kelas.com

Dengan menggunakan Figma, kamu dapat membuat design tokens yang sesuai dengan kebutuhan dan lebih memahami cara penggunaan design tokens. Jika kamu masih bingung untuk menggunakannya, yuk belajar design tokens di Figma lebih mudah dari ahlinya bersama Kelas.com.

Kelas ini akan membantu kamu dalam mempelajari mulai dari pengenalan tokens, konsep dasar, proses pembuatan, dokumentasi, hingga melakukan kolaborasi design tokens. Dapatkan juga sertifikat setelah akhir sesi untuk penunjang CV kamu, yuk daftarkan dirimu sekarang!