0Pricing
Frontend Academy · Pelajaran

Token Desain dengan Style Dictionary

Definisikan token warna, jarak, dan tipografi dalam JSON, lalu ubah dengan Style Dictionary menjadi variabel CSS, konstanta JS, atau format iOS/Android.

Token Desain dengan Style Dictionary adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa Itu Token Desain?

Token desain adalah nilai dasar bernama dalam sistem desain: warna, jarak, ukuran font, radius batas, dan bayangan. Token merupakan sumber kebenaran utama — setiap komponen mendapatkan gayanya dari token tersebut.

Mengapa Token Penting

Token memisahkan keputusan desain dari implementasi. Ubah color.primary dari biru menjadi hijau sekali, dan setiap komponen yang menggunakannya akan diperbarui. Token juga memungkinkan Anda menerapkan desain yang sama ke web, iOS, dan Android.

Penyimpanan Token

Simpan token dalam JSON atau YAML — format netral yang dapat digunakan oleh alat di berbagai platform. JSON adalah format yang paling umum.

// tokens/color.json
{
  "color": {
    "brand": {
      "primary": { "value": "#2563eb" },
      "secondary": { "value": "#7c3aed" }
    },
    "text": {
      "default": { "value": "#111827" },
      "muted": { "value": "#6b7280" }
    }
  }
}

Style Dictionary

Style Dictionary (Amazon) adalah alat build de facto untuk token desain. Alat ini membaca token dan mengubahnya menjadi berbagai format keluaran: variabel CSS, SCSS, konstanta JS, Swift untuk iOS, dan XML untuk Android.

npm install -D style-dictionary

Konfigurasi

Buat style-dictionary.config.js yang menjelaskan token masukan dan platform keluaran.

// style-dictionary.config.js
module.exports = {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'build/css/',
      files: [{ destination: 'tokens.css', format: 'css/variables' }]
    },
    js: {
      transformGroup: 'js',
      buildPath: 'build/js/',
      files: [{ destination: 'tokens.js', format: 'javascript/es6' }]
    },
    ios: {
      transformGroup: 'ios',
      buildPath: 'build/ios/',
      files: [{ destination: 'Tokens.swift', format: 'ios-swift/class.swift' }]
    }
  }
};

Menjalankan Proses Pembuatan

Jalankan CLI untuk menghasilkan keluaran bagi semua platform.

npx style-dictionary build

# Output:
# build/css/tokens.css     — CSS variables
# build/js/tokens.js       — JS constants
# build/ios/Tokens.swift   — Swift constants

Keluaran CSS yang Dihasilkan

Variabel CSS dengan skema penamaan yang konsisten (kebab-case dengan ruang nama).

:root {
  --color-brand-primary: #2563eb;
  --color-brand-secondary: #7c3aed;
  --color-text-default: #111827;
  --color-text-muted: #6b7280;
}

Keluaran JS yang Dihasilkan

Objek JS untuk digunakan dalam kode JS/TS (konfigurasi Tailwind, CSS-in-JS).

export const ColorBrandPrimary = '#2563eb';
export const ColorBrandSecondary = '#7c3aed';
export const ColorTextDefault = '#111827';

Konvensi Penamaan Token

Gunakan nama semantik (color.primary), bukan nama literal (biru-500). Token semantik memungkinkan Anda mengubah nilai tanpa mengganti nama. Sistem dua tingkat: palet literal (biru-500) → alias semantik (primary).

{
  "color": {
    "palette": {
      "blue-500": { "value": "#2563eb" }
    },
    "brand": {
      "primary": { "value": "{color.palette.blue-500.value}" }
    }
  }
}

Penerapan Tema dengan Token

Buat beberapa platform dengan masukan yang berbeda untuk mendukung tema (terang/gelap) — nama tetap sama, nilainya berbeda.

// Light theme:
--color-bg: white;
--color-text: black;

// Dark theme:
--color-bg: #111;
--color-text: white;

Kategori Token

Kategori umum: warna, jarak, tipografi (keluarga font, ukuran, tinggi baris, ketebalan), batas (radius, lebar), bayangan, transisi (durasi, pelonggaran), indeks-z, dan titik henti.

Alat Registri Token

Selain Style Dictionary: Tokens Studio (plugin Figma), Specify, dan Supernova. Alat-alat ini memungkinkan desainer mengelola token di Figma dan menyinkronkannya ke basis kode secara otomatis.

Pemeriksaan Singkat

Apa manfaat utama menggunakan token desain dengan Style Dictionary?

Ringkasan: Token Desain

Token adalah nilai dasar bernama (warna, jarak, tipe) — sumber kebenaran utama untuk sistem desain. Simpan sebagai JSON. Style Dictionary mengubahnya menjadi variabel CSS, JS, iOS, dan Android. Gunakan penamaan semantik (primary), bukan literal (biru-500). Dua tingkat: palet → alias semantik. Tema dibuat melalui build terpisah. Sinkronkan dari Figma melalui Tokens Studio.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Token Desain dengan Style Dictionary” gratis?

Ya — teks lengkap “Token Desain dengan Style Dictionary” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Token Desain dengan Style Dictionary”?

Definisikan token warna, jarak, dan tipografi dalam JSON, lalu ubah dengan Style Dictionary menjadi variabel CSS, konstanta JS, atau format iOS/Android. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Token Desain dengan Style Dictionary” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Storybook: Story, Kontrol, dan Dokumentasi
  2. Token Desain dengan Style Dictionary
  3. Pemberian Versi dan Publikasi ke npm
  4. Menggunakan Sistem Desain
← Kembali ke Frontend Academy