Membangun Design tokens di Figma dengan Tokens Studio

Become pixel perfect master with tokens as single source of truth for designer and developer

Ratings: 5.00 / 5.00




Description

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:

  1. Dengan digunakan di berbagai berbahasa code misal ( .SCSS, React, Android, iOS, Golang .less ) dan masih banyak lagi.

  2. Flexible dalam menentukan value tokens

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

  4. Bisa membuat tema desain misal ke dalam dark theme dengan satu kali klik

  5. Sangat cocok digunakan dalam membuat design system

  6. Dapat digunakan di berbagai macam project

  7. Bisa langsung di publish ke dalam repository misal Github, gitlab , jsonbin dll.


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

Who Should Attend!

  • Fresh graduate, freelancer, intermediate designer.