Text Style

Text Styles Mapping

Setelah Typography Variables Collection terdefinisi, apply semua nilainya ke Figma Text Styles. Ada keterbatasan teknis Figma untuk precentage (%) native di Variables, jadi ikuti aturan ini:

Variable Binding

Bind langsung ke Typography Collection untuk:

• Font Family
• Font Size
• Font Weight

Manual Override

Line Height dan Letter Spacing harus diinput manual di Text Style level (tidak bisa via Variables).

Alasan: Figma tidak support persentase (%) di Variable binding secara native.

Format Requirements

Line Height: Gunakan persentase ( % ) — contoh: 120%, bukan px.

Letter Spacing: Gunakan persentase ( % ) — contoh: -2%.

Naming Convention

Gunakan format standar ini untuk semua Text Styles:

Format: Prefix Category Variant

Contoh Struktur

Display

• L · 164/100 (Display Large)
• M · 132/100 (Display Medium)

Heading

• H1 · 92/100
• H2 · 72/100
• H3 · 64/100
• H4 · 48/100
• H5 · 32/100
• H6 · 20/100

Body

• XL · 40/120
• L · 18/120
• M · 16/120
• S · 14/120
• XS · 12/120

UI

• Nav · 18/100
• Button · 24/100
• Label · 20/100

Folder Structure

Organize menggunakan folder hierarchy:

• Display
• Heading
• Body
• UI