|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/membangun-design-tokens-di-figma-dengan-tokens-studio/
课程评论:没有评论
课程名称:在Figma中使用Tokens Studio构建设计令牌 课程概述:本视频教程专注于如何在Figma应用程序中创建设计令牌。设计令牌在近年来变得相当流行,除了可以为UI和UX领域的设计师提供便利外,对开发者也同样重要。设计令牌的主要功能是为设计师创建的值令牌提供一种形式,这些令牌通常包含在样式指南中,但设计令牌以代码文件的形式呈现,供开发者使用,无需从头开始构建。 对于设计师来说,理解设计令牌不仅可以提升其技术技能,还能增加其个人价值。在动态的科技公司或创业公司中,设计令牌的需求相对较高,非常适合自由职业者。设计令牌的重要性体现在解决设计与代码之间的常见问题,例如颜色不匹配、字体过小、组件尺寸不符以及间距不一致等。设计令牌的输出形式为.JSON文件,包含样式指南或令牌值(如间距、颜色、排版、半径、阴影、边框等),作为开发团队共享的单一真实来源。设计令牌的功能是消除设计与代码之间的不一致性问题。 使用设计令牌的优点包括:可以在多种编程语言中使用(如.SCSS、React、Android、iOS、Golang、less等),令牌值灵活可定制,易于编辑(只需一次编辑,无需逐个更改),能够一键创建设计主题(如暗色主题),非常适合构建设计系统,能够适用于各种项目,并可以直接发布到GitHub、GitLab、jsonbin等代码库中。
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 tokensMudah untuk mengedit tanpa perlu mengubah satu-satu value di dalam figma, misal kamu ingin mengubah font type, cukup edit sekali dalam tokens, semuanya akan berubahBisa membuat tema desain misal ke dalam dark theme dengan satu kali klikSangat cocok digunakan dalam membuat design systemDapat digunakan di berbagai macam projectBisa langsung di publish ke dalam repository misal Github, gitlab , jsonbin dll.