Membangun Design tokens di Figma dengan Tokens Studio
What you'll 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
Requirements
- Memiliki Koneksi Internet
- Memiliki akun Figma (Free Plan)
- Tokens Studio Plugin
- Sudah menguasai basic Figma
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:
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.
Who this course is for:
- Fresh graduate, freelancer, intermediate designer.
Instructor
- -- Instructor Rating
- -- Reviews
- -- Students
- 1 Course
I started becoming a UI/UX Designer in 2013. and focus on websites, web app, and mobile. My background is as a half-freelancer and full-time worker as a product designer
I spent most of my career as a designer in agency companies, where I designed websites and mobile apps for enterprise clients. As a freelancer for a personal project, I have helped over 100 clients worldwide.