<aside> 💁🏻 Tulisan ini bagian dari Artikel Design System Series yang saya lagi buat. Ada Tutorial Interaktif nya juga yang ga hanya bisa kamu pelajari, tapi bisa kamu mainkan langsung di figma, hands-on 100%.

Disana kamu belajar step by step membuat Design System dari NOL. Dari mulai mendefinisikan design token ( color, typography, spacing, grid, dan icon library ) hingga membuat banyak komponen basic dan advanced ( buttons, dropdowns, input, card, checkbox, dll) meggunakan teknik Auto Layout, Variant dan Nested Components.

Cobain 👋HaloFigma disini.

</aside>

Mari kita mulai dengan quiz kecil...

*1*

Kalo ada button gini, enaknya dinamain apa?

Button or CTA?

Button or CTA?

*3*

Kalo kita tambah isi konten nya, si biru kiri dinamain apa?

Button or Button/Small/Text Only?

Button or Button/Small/Text Only?

*2*

Kalo kita tambah ada beda ukuran, si biru kiri dinamain apa?

Button or Button/Small?

Button or Button/Small?

*4*

Hm, kalo ada viariasi begini, si biru kiri dinamain apa?

Button or Button/Small/...bingung ah?

Button or Button/Small/...bingung ah?

Emang kalo namain single komponen relatif mudah, tapi kalo komponen nya udah beranak pinak dengan segala sodara2 dan sepupu keponakannya, jadi rada ribet ya. Apalagi kalo itu terjadi ga hanya di 1 file, tapi di banyak file figma. Maka dari itu kita butuh struktur penamaan.


Struktur penamaan.

Manfaatnya agar nama layer kita punya pola. Seperti yang kita tau, manusia itu lebih mudah membaca pola daripada bentuk acak baik dalam bentuk visual (texture pattern contohnya) atau dalam bentuk lainnya (seperti text kayak gini).