Sinkronisasi Design System Figma ke Token Tailwind CSS

Menghubungkan Desain & Koding Tanpa Gesekan

Salah satu masalah paling umum dalam kolaborasi desainer dan engineer adalah inkonsistensi styling: nilai hex warna yang berbeda-beda, margin yang sembarangan, serta kontras yang tidak ramah aksesibilitas.

1. Definisi Token Hierarkis

Atur variabel desain dalam 3 tingkatan:

1. Global/Primitive Tokens: Nilai dasar seperti color-blue-500: #0ea5e9.
2. Semantic Tokens: Makna kegunaan seperti color-brand-primary: var(--color-blue-500).
3. Component Tokens: Spesifik komponen seperti button-primary-bg: var(--color-brand-primary).

2. Konfigurasi Tailwind Token

Hubungkan variabel CSS ke dalam konfigurasi Tailwind:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: &#39;hsl(__MD_HL_4__(--color-primary-base) / <alpha-value>)__MD_HL_1__hsl(__MD_HL_5__(--color-primary-hover) / <alpha-value>)__MD_HL_2__hsl(__MD_HL_6__(--color-surface-ground) / <alpha-value>)__MD_HL_3__hsl(__MD_HL_7__(--color-surface-card) / <alpha-value>)&#39;,
        }
      }
    }
  }
}