FluentStack

Uji Kompetensi Design Tokens and Variants

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 17: Design SystemAdvanced95 menitBahasa Indonesia

Uji Kompetensi Design Tokens and Variants

Membuktikan kesiapan membuat token visual sederhana serta Button dan Card variants yang konsisten, typed, dan dapat diakses.

StatusMemuat progres
ReadinessMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Yang dicek

  • Mengubah nilai color, spacing, radius, dan typography yang berulang menjadi token yang bernama jelas
  • Mendesain Button dan Card variants dengan intent serta scope yang dapat dijelaskan
  • Memeriksa state focus, disabled, dan contrast sebelum menganggap component siap dipakai ulang
  • Menulis refactor note yang menjelaskan nilai yang sengaja belum ditokenisasi atau dijadikan variant
Design TokensCSSVariantsAccessibilityReadiness Checkpoint

Isi lesson

6 blok
  1. 1.
    Checkpoint: rapikan course action UI tanpa membuat design system besarBelum selesaiWajib
  2. 2.
    QuizBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Writing practiceBelum selesaiWajib
  5. 5.
    Gunakan docs untuk menjaga token tetap berupa aturan CSS yang dapat diperiksaBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Checkpoint: rapikan course action UI tanpa membuat design system besar

Wajib

Tim memiliki course action panel dengan warna literal berulang, padding serta radius berbeda, button utama dan hapus yang hanya berbeda class acak, dan card rekomendasi yang tidak terlihat berbeda dari card biasa. Mereka ingin hasil lebih konsisten, tetapi belum membutuhkan multi-brand theme, token pipeline, package publishing, atau Storybook automation. Pada checkpoint ini, buat token kecil untuk visual rules yang benar-benar dipakai, lalu gunakan Button dan Card variants yang menjelaskan intent. Pastikan action utama, secondary, dan destructive tidak saling bertentangan; focus ring terlihat; button disabled memiliki state yang jelas; dan card featured memiliki alasan product. Tujuannya bukan menambah abstraction, melainkan membuat perubahan visual berikutnya lebih aman serta lebih mudah direview.

Bagian ini memengaruhi progres lesson.

Quiz

Wajib

Uji Kompetensi Design Tokens and Variants

Jawab pertanyaan satu per satu. Kamu bisa ulang quiz jika belum mencapai target lulus.

Target lulus

70/100

Skor terbaik

0/100

Status

Belum dikerjakan

Blok ini wajib untuk menyelesaikan lesson. Progres quiz naik setelah skor mencapai target lulus.

Pertanyaan 1 dari 7

Target lulus: 70

Tujuan utama design token pada project frontend adalah

Coding practice

WajibDibuka di workspace khusus

Build token-driven course UI checkpoint

Bangun CSS kecil untuk course action panel dengan tokens, Button variants, Card featured state, focus-visible ring, dan disabled state yang jelas.

Tujuan awal: Fokus di tab CSS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

9 cek otomatis5 checklist
Belum selesaiBuka practice

Writing practice

Wajib

Latihan menulis

Tulis refactor note untuk satu Button dan Card pada local React atau Next.js project, atau gunakan course action panel pada checkpoint ini. Jelaskan token color, spacing, radius, dan typography yang kamu pilih; variant Button/Card yang didukung; state focus, disabled, serta contrast yang kamu periksa; satu nilai yang sengaja tidak kamu jadikan token; dan satu variant yang sengaja tidak kamu tambahkan. Hubungkan keputusanmu dengan consumer atau workflow product yang nyata, bukan hanya karena UI terlihat lebih rapi.

Tulis draft dulu sebelum menandai writing practice selesai.

Draft kosong

0/850 karakter

Checklist panduan

Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.

Blok ini wajib untuk menyelesaikan lesson.

Documentation Bridge

Wajib

Gunakan docs untuk menjaga token tetap berupa aturan CSS yang dapat diperiksa

Baca referensi resmi saat membuat atau mengubah token. CSS custom properties mengikuti cascade dan scope, sedangkan variant component tetap membutuhkan semantic HTML, contrast review, serta props contract yang jelas. Dokumentasi membantu memeriksa behavior teknologi, bukan menggantikan keputusan visual dan product yang perlu dibuktikan consumer.

MDN

Using CSS custom properties (variables)

Fokus baca

  • Deklarasi custom property dengan prefix -- dan pemakaian var().
  • Scope serta inheritance token pada :root dan component boundary.
  • Fallback value ketika custom property belum memiliki nilai yang dapat dipakai.

Abaikan dulu

  • @property registration, animasi token, dan custom property type system yang belum diperlukan project ini.
Buka dokumentasi

MDN

Understanding Colors and Luminance

Fokus baca

  • Contrast foreground/background sebagai bagian dari readability token color.
  • Mengapa hue saja tidak cukup untuk menyampaikan information state.
  • Hubungan ukuran dan weight text dengan kemampuan membaca.

Abaikan dulu

  • Color science dan guideline animation yang lebih luas dari Button/Card practice ini.
Buka dokumentasi

React

Passing Props to a Component

Fokus baca

  • Props sebagai contract untuk variant serta disabled state component.
  • Default props yang hanya dipakai ketika membantu consumer memahami penggunaan utama.
  • Memisahkan API Button/Card dari implementation CSS internal.

Abaikan dulu

  • Membuat component menerima semua props HTML atau configuration object tanpa API domain yang jelas.
Buka dokumentasi

TypeScript

Everyday Types: Union Types

Fokus baca

  • Union untuk membatasi variant dan size yang memang didukung component.
  • Membaca compiler error ketika caller mengirim variant yang tidak tersedia.
  • Menjaga state variant saling eksklusif daripada memakai beberapa boolean visual.

Abaikan dulu

  • Conditional types, generic variant helpers, dan type-level design system yang kompleks.
Buka dokumentasi

Aksi setelah membaca

Pilih satu Button dan satu Card di local project. Catat nilai visual yang berulang, buat token CSS kecil untuk nilai yang benar-benar dipakai bersama, lalu batasi variant yang memiliki intent product nyata. QA dengan keyboard untuk focus, cek disabled state, bandingkan contrast foreground/background, dan tulis refactor note tentang satu token atau variant yang sengaja belum dibuat.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib
  • Token memberi nama pada color, spacing, radius, dan typography yang dipakai ulang sebagai aturan visual.
  • Button dan Card variants menyatakan intent serta peran product, bukan variasi visual tanpa alasan.
  • Union type, native control, focus-visible, disabled, dan contrast review menjaga variant tetap dapat dipakai dengan aman.
  • Token dan variant kecil yang punya consumer nyata lebih berguna daripada design system besar yang belum dibutuhkan.
  • Berikutnya, Module Product Components membangun form, table, modal, toast, tabs, dan select di atas primitive yang sudah lebih konsisten.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian wajib checkpoint ini

Lanjutkan blok wajib berikutnya: Checkpoint: rapikan course action UI tanpa membuat design system besar.

Memuat progresReview module