Membangun Design tokens di Figma dengan Tokens Studio
Become pixel perfect master with tokens as single source of truth for designer and developer
What you will learn
Mengetahui konsep dasar dari design tokens
Memahami cara membuat design tokens baik membuat master tokens dan alias tokens
Menerapkan design tokens pada saat membuat sebuah project design
Melakukan dan implemetasi design tokens dalam membagun design system
Memahami pentingnya design tokens dalam sebuah perusahaan khususnya tech company
Why take this course?
Pada video tutorial ini, fokus membahas cara membuat design tokens di dalam aplikasi figma, Design tokens cukup populer beberapa tahun terakhir ini. selain fungsinya mempermudah para desainer khususnya di bidang UI dan UX, Juga para developer tentunya. Fungsi utama dari design tokens, memberikan value tokens yang di buat/dibangun oleh desainer. Umum adalah style guideline, namun dengan design tokens sudah berupa file code yang siap di gunakan oleh developer, tanpa developer harus membuat dari awal.
Keuntungan bagi designer memahami design tokens, selain menambah skills dari sisi teknis, tentunya dapat meningkatkan value designer itu sendiri, design tokens cukup dibutuhkan di tech company atau starup yang cukup dinamis dalam mebuat sebuah produk, dan cocok juga bagi seoarang freelancer.
Kenapa design tokens cukup penting? kamu pernah mengalami issue semacam warna tidak match, font terlalu kecil, ukuran component tidak sesuai desain. spacing tidak konsisten antara komponen a dan b, dan begitu seterusnya.
Design tokens secara output adalah sebuah file dengan format .JSON. di dalam format tersebut berisi style guide atau tokens value ( spacing, color, typography, radius, shadows, border, dan masih banyak lagi) sebagai single source of truth yang di bagikan kepada developer team. Fungsi design tokens, menghilangkan issue inkonsistensi dan ketidaksamaan antara desain dan code.
Kelebihan menggunakan Design tokens:
Dengan digunakan di berbagai berbahasa code misal ( .SCSS, React, Android, iOS, Golang .less ) dan masih banyak lagi.
Flexible dalam menentukan value tokens
Mudah untuk mengedit tanpa perlu mengubah satu-satu value di dalam figma, misal kamu ingin mengubah font type, cukup edit sekali dalam tokens, semuanya akan berubah
Bisa membuat tema desain misal ke dalam dark theme dengan satu kali klik
Sangat cocok digunakan dalam membuat design system
Dapat digunakan di berbagai macam project
Bisa langsung di publish ke dalam repository misal Github, gitlab , jsonbin dll.
Charts
Price
Rating
Enrollment distribution
