Spacing System UI: Dari Figma Variables sampai Code

Kadang UI sudah punya warna yang bagus. Font juga sudah oke. Component sudah lumayan rapi.

Tapi tetap terasa ada yang aneh.

Biasanya masalahnya bukan di warna. Bukan juga di typography. Seringnya ada di spacing.

Spacing yang random bisa bikin layout terlihat seperti “asal tempel”. Jarak antar elemen tidak punya pola. Label terlalu jauh dari input. Card terlalu rapat. Section tidak punya pemisah yang jelas. Button punya padding yang beda-beda tanpa alasan.

User mungkin tidak akan bilang, “spacing-nya kurang konsisten.”

Tapi mereka bisa merasa, “kok UI-nya kurang rapi ya?”

Itulah kenapa spacing system UI penting. Spacing bukan cuma dekorasi. Spacing membantu user memahami struktur, grouping, dan hierarchy di dalam interface.

Spacing system UI itu apa?

Saya sering melihat tim kesulitan menerapkan spacing system UI karena tidak ada panduan yang jelas antara Figma dan code. Padahal, konsistensi spacing sangat memengaruhi kualitas UI secara keseluruhan.

Secara sederhana, spacing system UI adalah aturan jarak yang dipakai secara konsisten di dalam desain.

Bukan berarti semua jarak harus sama. Tapi semua jarak harus datang dari scale yang jelas.

Contoh spacing scale yang sering dipakai:

4, 8, 12, 16, 24, 32, 48, 64, 96

Scale ini umum karena banyak design system memakai pendekatan 8px atau 8dp grid. Untuk jarak kecil seperti icon ke text, kita masih bisa memakai 4px sebagai sub-unit.

Jadi pendekatannya bukan:

13px, 17px, 21px, 27px

Tapi lebih seperti:

4px, 8px, 16px, 24px, 32px

Tujuannya sederhana: mengurangi keputusan kecil yang berulang.

Karena dalam satu UI, designer bisa mengambil keputusan spacing ratusan kali. Kalau semuanya berdasarkan feeling, hasilnya cepat berantakan.

Dengan spacing system, kita tidak perlu terus bertanya:

“Ini enaknya 18px atau 20px ya?”

Kita cukup pilih dari scale yang sudah disepakati:

“Ini lebih cocok 16px atau 24px?”

Lebih cepat. Lebih konsisten. Lebih mudah juga untuk developer.

Apakah ada standar naming untuk spacing?

Ini pertanyaan penting.

Jawaban jujurnya: tidak ada satu standar universal untuk naming spacing.

Tidak ada aturan global yang bilang:

space-1 harus selalu 4px
space-2 harus selalu 8px
space-3 harus selalu 12px

Yang ada adalah convention dari design system, framework, dan tools.

Misalnya, Bootstrap memakai utility class seperti:

p-3
mt-4
gap-2

Tailwind juga memakai numeric scale seperti:

p-4
mt-6
gap-8
space-y-4

Material Design lebih fokus ke prinsip 8dp grid, padding, gap, dan margin. Sedangkan design tokens lebih fokus pada bagaimana value disimpan sebagai reusable decision yang bisa dipakai lintas tools dan platform.

Jadi, kalau kita bicara “standar”, yang lebih tepat adalah:

Standarnya bukan nama token tertentu. Standarnya adalah punya scale yang jelas, value yang konsisten, dan cara pakai yang bisa dipahami oleh designer dan developer.

Ini penting, karena naming seperti space-1, spacing.md, atau space.200 hanyalah cara tim menyebut value. Yang lebih penting adalah value itu konsisten dan tidak dipakai sembarangan.

Global spacing token vs component-specific spacing

Di design system, kita bisa membagi spacing token menjadi dua pendekatan:

1. Global spacing token
2. Component-specific spacing token

Global spacing token adalah value dasar yang bisa dipakai di banyak konteks.

Contoh:

spacing.xs = 4px
spacing.sm = 8px
spacing.md = 16px
spacing.lg = 24px
spacing.xl = 32px
spacing.2xl = 48px
spacing.3xl = 64px

Atau versi numeric:

space.050 = 4px
space.100 = 8px
space.200 = 16px
space.300 = 24px
space.400 = 32px
space.600 = 48px
space.800 = 64px

Component-specific spacing adalah token yang lebih spesifik untuk component tertentu.

Contoh:

spacing.card.padding
spacing.button.paddingX
spacing.form.labelGap
spacing.table.cellPadding

Secara teori, component-specific token terlihat rapi. Tapi dalam real project, ini bisa cepat meledak.

Apalagi untuk component seperti card.

Card itu banyak jenisnya:

• product card
• article card
• dashboard card
• pricing card
• profile card
• notification card
• compact card
• marketing card

Kalau semua dibuat token spesifik, design system bisa terlalu berat.

Contoh yang kurang ideal:

spacing.productCard.padding = 16px
spacing.articleCard.padding = 24px
spacing.pricingCard.padding = 32px
spacing.dashboardCard.padding = 20px

Masalahnya, lama-lama token jadi terlalu banyak. Developer juga tetap bingung harus pakai yang mana.

Menurut saya, pendekatan yang lebih realistis adalah:

Mulai dari global spacing token dulu. Lalu tambahkan guideline dan density variant untuk component yang memang sering dipakai.

Jadi bukan semua component harus punya spacing token sendiri.

Lebih baik buat pola seperti ini:

Card density compact = spacing.md / 16px
Card density comfortable = spacing.lg / 24px
Card density spacious = spacing.xl / 32px

Dengan begitu, card tetap fleksibel, tapi masih berada di dalam sistem.

Pengalaman saya dalam membuath sebuah real project terutama menentukan spacing system ui, di tiap tiap card gak bisa kita buat satu ukuran, karena kadang ada beberapa card yang memang butuh secara spacing-nya telihat pas di 16px, ada juga di 24px, jadi tergantung card itu di peruntukannya ada di mana. Jadi solusinya bukan membuat token untuk semua card, tapi membuat pilihan density yang jelas.

Naming spacing: spacing.md atau space.200?

Kalau kamu sudah biasa memakai spacing.xs, spacing.md, spacing.xl, itu tidak salah.

Naming seperti ini mudah dibaca oleh designer:

spacing.xs
spacing.sm
spacing.md
spacing.lg
spacing.xl

Kelebihannya:

• mudah dipahami
• enak untuk tim kecil
• cepat dipakai di Figma
• tidak terlalu teknis

Namun ada kelemahannya.

Nama seperti sm, md, dan lg bisa terasa subjektif. spacing.md di button mungkin terasa besar, tapi di page layout bisa terasa kecil.

Contoh:

spacing.md = 16px

Untuk button, 16px bisa terasa normal.
Untuk section gap, 16px bisa terlalu kecil.

Karena itu, beberapa design system lebih suka memakai numeric scale:

space.100 = 8px
space.200 = 16px
space.300 = 24px
space.400 = 32px

Kelebihan numeric scale:

• lebih scalable
• tidak terlalu subjektif
• mudah disisipkan value baru
• mirip dengan token system yang lebih matang

Misalnya nanti kamu butuh 12px di antara 8px dan 16px, kamu bisa pakai:

space.150 = 12px

Kalau pakai spacing.sm dan spacing.md, kamu harus cari nama baru seperti spacing.smd atau spacing.base, yang kadang jadi kurang rapi.

Tapi tetap, ini bukan berarti spacing.md buruk.

Untuk blog ini, saya akan bilang begini:

Kalau tim kamu kecil dan butuh sistem yang mudah dibaca, spacing.xs sampai spacing.3xl sudah cukup. Kalau design system mulai besar, numeric scale seperti space.100, space.200, dan space.300 lebih aman untuk jangka panjang.

Pilihan saya pribadi:

Untuk awal:
spacing.xs, sm, md, lg, xl, 2xl, 3xl

Untuk scalable design system:
space.050, 100, 150, 200, 300, 400, 600, 800

Balik lagi menentukan penamaan spacing itu tergantung designer dan developer maunya seperti apa, yang penting output secara valuenya yang ada di desain dan di dalam codingan haruslah sama, tidak berbeda.

Cara membuat spacing nyaman di Figma dan code

Pertanyaan besarnya:

Apakah experience spacing di Figma dan code bisa dibuat sama?

Jawabannya: bisa dibuat sangat dekat, tapi jangan berharap bentuknya 100% sama.

Figma dan code punya cara kerja berbeda. Di Figma, kita bekerja dengan Auto Layout, padding, gap, component property, dan variables. Di code, developer bekerja dengan CSS variables, utility class, component props, atau design token output.

Yang harus sama bukan bentuk UI tools-nya.

Yang harus sama adalah:

• value spacing
• nama token
• aturan penggunaan
• decision yang dipakai designer dan developer

Contoh di Figma:

spacing.md = 16
spacing.lg = 24
spacing.xl = 32

Dipakai di Auto Layout:

Card / Compact
padding = spacing.md

Card / Comfortable
padding = spacing.lg

Card / Spacious
padding = spacing.xl

Lalu di code:

:root {
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
}

.card {
  padding: var(--spacing-lg);
}

.card--compact {
  padding: var(--spacing-md);
}

.card--spacious {
  padding: var(--spacing-xl);
}

Atau kalau memakai React component:

<Card density="compact" />
<Card density="comfortable" />
<Card density="spacious" />

Di CSS:

.card[data-density="compact"] {
  padding: var(--spacing-md);
}

.card[data-density="comfortable"] {
  padding: var(--spacing-lg);
}

.card[data-density="spacious"] {
  padding: var(--spacing-xl);
}

Nah, ini yang membuat experience antara designer dan developer lebih mirip.

Designer tidak bilang:

“Pakai padding 24px ya.”

Tapi bilang:

“Pakai card density comfortable.”

Developer juga tidak asal bikin class baru dengan angka random.

Mereka tinggal mapping ke token:

comfortable = spacing.lg = 24px

Ini jauh lebih rapi.

---

Contoh setup spacing system UI

Berikut contoh setup yang cukup praktis untuk project UI/UX.

1. Buat global spacing token

spacing.0 = 0px
spacing.xs = 4px
spacing.sm = 8px
spacing.md = 16px
spacing.lg = 24px
spacing.xl = 32px
spacing.2xl = 48px
spacing.3xl = 64px
spacing.4xl = 96px

Kalau mau versi numeric:

space.000 = 0px
space.050 = 4px
space.100 = 8px
space.200 = 16px
space.300 = 24px
space.400 = 32px
space.600 = 48px
space.800 = 64px
space.1200 = 96px

2. Buat usage guideline

Ini bagian yang sering dilupakan.

Token saja tidak cukup. Designer butuh tahu kapan value dipakai.

Contoh guideline:

Icon gap: spacing.xs / 4px
Label to input: spacing.xs atau spacing.sm / 4–8px
Inside small component: spacing.sm atau spacing.md / 8–16px
Card padding: spacing.md atau spacing.lg / 16–24px
Between cards: spacing.lg atau spacing.xl / 24–32px
Section gap: spacing.2xl atau spacing.3xl / 48–64px
Hero spacing: spacing.4xl / 96px

Dengan guideline ini, designer tetap punya fleksibilitas. Tapi fleksibilitasnya masih di dalam sistem.

3. Buat density untuk component penting

Tidak semua component butuh token spesifik. Fokus ke component yang sering dipakai.

Contoh button:

Button small:
paddingY = spacing.xs
paddingX = spacing.sm

Button medium:
paddingY = spacing.sm
paddingX = spacing.md

Button large:
paddingY = spacing.md
paddingX = spacing.lg

Contoh card:

Card compact:
padding = spacing.md

Card comfortable:
padding = spacing.lg

Card spacious:
padding = spacing.xl

Contoh table:

Table compact:
cell padding = spacing.sm

Table regular:
cell padding = spacing.md

Table spacious:
cell padding = spacing.lg

Dengan cara ini, kita tidak membuat token terlalu banyak. Tapi component tetap punya aturan.

[DEI BISA TAMBAH SCREENSHOT DI SINI]
Tambahkan screenshot Figma Variables untuk spacing, atau contoh Auto Layout card dengan padding 16px, 24px, dan 32px.

4. Mapping ke CSS custom properties

Kalau masuk ke code, spacing bisa dibuat sebagai CSS variables:

:root {
  --spacing-0: 0px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;
}

Lalu dipakai seperti ini:

.form-field {
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-lg);
}

.card {
  padding: var(--spacing-lg);
}

.section {
  margin-bottom: var(--spacing-3xl);
}

Kalau memakai Tailwind, kamu bisa mapping spacing scale di theme. Kalau memakai Bootstrap, pendekatannya bisa lewat spacing utilities seperti p-*, m-*, dan gap-*.

Poinnya bukan harus mengikuti framework tertentu.

Poinnya adalah:

Jangan biarkan designer memakai satu sistem di Figma, lalu developer membuat spacing sendiri di code.

Kalau itu terjadi, design system akan pecah pelan-pelan.

Spacing bisa dipakai untuk web dan mobile?

Bisa.

Tapi jangan berpikir dalam satuan pixel mentah saja.

Konsepnya lebih seperti ini:

Design token → platform unit

Contoh:

spacing.md = 16

Di web bisa menjadi:

16px atau 1rem

Di Android bisa menjadi:

16dp

Di iOS bisa menjadi:

16pt

Jadi token-nya sama, tapi output unit-nya bisa berbeda tergantung platform.

Ini alasan kenapa design tokens penting. Kita tidak hanya menyimpan angka untuk Figma. Kita menyimpan design decision yang bisa diterjemahkan ke banyak platform.

Untuk web, kamu bisa memakai px atau rem. Untuk produk yang peduli accessibility dan responsive behavior, rem sering lebih fleksibel.

Untuk mobile, Android memakai density-independent pixel atau dp, agar ukuran visual tetap lebih konsisten di device dengan pixel density berbeda.

Jadi iya, spacing system UI bisa dipakai lintas platform. Tapi output akhirnya perlu disesuaikan dengan platform masing-masing.

Checklist audit spacing di Figma

Sebelum UI dianggap rapi, coba lakukan audit cepat.

1. Cek apakah spacing memakai scale

Ambil 5–10 jarak di screen.

Contoh:

• padding card
• gap antar card
• jarak label ke input
• jarak heading ke paragraph
• jarak section ke section berikutnya

Kalau banyak angka seperti 13px, 19px, 27px, berarti spacing masih terlalu random.

2. Cek internal vs external spacing

Rule sederhana:

Spacing di dalam grup harus lebih kecil daripada spacing antar grup.

Contoh:

Label ke input = 2–8px
Antar field = 8–24px
Antar section = 16–64px

Kalau label ke input terlalu jauh, user bisa bingung label itu milik input yang mana.

3. Cek density component

Untuk card, jangan langsung bikin token baru setiap ada kebutuhan.

Cek dulu:

• ini compact card?
• ini comfortable card?
• ini spacious card?

Kalau semua bisa masuk ke 3 density itu, berarti system masih sehat.

4. Cek mobile dan desktop

Spacing yang bagus di desktop belum tentu bagus di mobile.

Di mobile, 32px mungkin terlalu besar untuk beberapa area. Di desktop, 16px mungkin terlalu sempit untuk section besar.

Jadi cek minimal di:

• mobile width
• tablet atau medium width
• desktop width

5. Cek apakah developer bisa mengerti

Ini penting.

Kalau designer hanya menulis:

padding: 24px

developer bisa paham, tapi belum tentu tahu decision-nya.

Lebih baik tulis:

Card density: comfortable
Padding: spacing.lg / 24px

Dengan begitu, designer dan developer punya bahasa yang sama.

Kenapa ini penting untuk AI-generated UI?

Sekarang AI sudah bisa bantu membuat UI. Tapi AI sering menghasilkan layout yang terlihat random kalau tidak diberi aturan.

Misalnya, AI bisa membuat card dengan padding 18px, section gap 37px, button padding 14px, dan gap antar item 11px.

Secara visual mungkin kelihatan “lumayan”. Tapi kalau masuk ke design system, hasilnya tidak konsisten.

Di sinilah spacing token dan DESIGN.md bisa membantu.

Kita bisa menulis aturan seperti:

Use spacing tokens only:
spacing.xs = 4px
spacing.sm = 8px
spacing.md = 16px
spacing.lg = 24px
spacing.xl = 32px
spacing.2xl = 48px

Do not use random spacing values.
Use card density:
compact = spacing.md
comfortable = spacing.lg
spacious = spacing.xl

Dengan aturan seperti ini, AI tidak hanya membuat UI yang “cantik”, tapi juga lebih dekat dengan design system yang kita punya.

Penutup

Spacing kelihatannya kecil, tapi efeknya besar.

UI yang rapi bukan hanya karena warna dan font-nya bagus. UI terasa profesional karena jarak antar elemen punya meaning.

Kalau saya rangkum, pendekatan paling aman adalah:

1. Mulai dari global spacing token.
2. Pakai scale yang jelas, misalnya 4, 8, 16, 24, 32, 48, 64.
3. Tambahkan usage guideline agar token tidak dipakai sembarangan.
4. Gunakan density untuk component penting seperti card, button, dan table.
5. Mapping token dari Figma ke code agar designer dan developer memakai bahasa yang sama.
6. Jangan pakai angka random hanya karena “kelihatannya pas”.

Kamu tidak harus membuat spacing system yang terlalu kompleks dari awal.

Mulai saja dari global token yang jelas. Setelah itu, lihat component mana yang sering dipakai dan butuh aturan lebih spesifik.

Karena pada akhirnya, design system yang bagus bukan yang paling banyak token-nya.

Design system yang bagus adalah yang mudah dipakai, mudah dijaga, dan membuat UI terasa konsisten dari Figma sampai code.

Referensi

1. Mohit Phogat — “The Spacing System That Makes Every UI Look More Intentional”
2. Figma Help — Guide to Variables in Figma
3. Tailwind CSS — Margin / Spacing Utilities
4. Bootstrap — Spacing Utilities
5. Material Design 3 — Spacing Overview