Mengapa Menggunakan Atomic Design Methodology untuk Membuat Design System?

Alasan Saya menggunakan Atomic Design Methodology untuk membuat sebuah Design System

Bagi para pembaca yang berprofesi sebagai designer, pasti sering merasakan proses pekerjaan yang dinamakan REVISI. Revisi bukan hanya di rasakan oleh seorang designer saja, namun hampir seluruh element pekerjaan pasti pernah merasakan revisi.

Selain revisi, bagi pembaca yang berprofesi sebagai UI/UX designer saat membuat sebuah desain, website maupun aplikasi, pasti pernah merasakan menggunakan sebuah element atau komponen yang digunakan berkali-kali atau yang kita sebut reuse. Biasanya akan terjadi design reuse untuk style guides, color palettes, typography dan lain sebagainya pada satu screen/page dengan screen/page lainnya.

Design reuse ini adalah sebuah tantangan bagi UI/UX Designer baikyang bekerja secara tim maupun individu. Dikarenakan harus menjaga agar setiap komponen, element, warna, dan font yang digunakan harus konsisten satu sama lainnya. Lalu masalah lainnya adalah apabila terjadi revisi maka effort yang digunakan untuk melakukan revisi design cukup besar, meski hanya sekedar revisi mengubah warna atau mengganti font.

Sebagai contoh, sebuah aplikasi menggunakan font roboto, lalu ada revisi untuk mengubah semua fontnya menjadi fira sans. Dengan cara lama, Saya akan satu persatu menselect text yang ada lalu mengubahnya menjadi font roboto, melelahkan? sangat. Hal ini akan membuat proses pengembangan produk dan revisi menjadi lebih lama.

Dengan munculnya tantangan dan masalah tersebut pasti banyak dari kalian yang pasti sudah mengenal tentang “Atomic Design” yang disajikan oleh Brad Frost. Dia mempresentasikan konsep desain ini pada tahun 2013 dengan tujuan memberikan pendekatan mendesain web menjadi lebih metodis.

Atomic design adalah sebuah metedologi yang memecahkan element-element dari sebuah website/aplikasi hingga pada komponen dasarnya, yang nantinya akan kembali digunakan untuk membangun website/aplikasi secara keseluruhan.

Frost mendapat inspirasinya dari kimia. Atom adalah unit terkecil yang membentuk dunia Saya. Beberapa atom membentuk molekul, yang pada gilirannya dapat digabungkan menjadi unit dan organisme yang lebih besar. Frost mengadopsi struktur ini untuk pendekatannya pada Atomic Design.

Mengapa Saya Atomic Design Penting?

Dengan menggunakan atomic design, Saya bisa melakukan revisi lebih cepat, tanpa harus melakukan perubahan satu per satu. Sehingga waktu pengembangan produk lebih singkat, mengurangi kemungkinan debat antara designer dengan stakeholder, dan membuat design yang Saya gunakan menjadi lebih konsisiten. Selain itu, dengan atomic design Saya bisa membuat dokumentasi yang lebih rapi dan mudah digunakan oleh designer lain ( asalkan mereka memahami cara kerja atomic design).

Konsep Atomic Design yang Saya Gunakan

Atomic Design 2.0

Konsep yang saya gunakan yaitu Atomic Design 2.0, pada versi 2.0 ini terdapat 5 penguraian yaitu:

• Atoms (Tokens)
• Molecules (Components)
• Cells (Patterns)
• Organisms (Blocks)
• Species (Templates)

Namun biasanya, saat membuat design system dengan atomic design sayang hanya menggunakan 3 penguraian saja yaitu:

• Atoms (Tokens)
• Molecules (Components)
• Cells (Patterns)

Alasan Saya hanya menggunakan 3 penguraian saja, dikarenakan Design system yang Saya buat harus bisa digunakan oleh berbagai macam tipe desain dan fitur-fitur yang nantinya akan dibuat.

Selain itu pembuatan atomic design system dengan 3 penguraian saja memudahkan Saya dalam membuat berbagai macam tipe-tipe layout dan design yang dapat dikostumasikan dengan leluasa.

Mari kita lihat contohnya

Untuk mempelajari lebih lanjut pendekatan ini, mari kita lihat beberapa contoh elemen di setiap kategori.

Atoms:

Tidak dapat dipecah lebih lanjut.

• Color
• Typography
• Grid
• Drop Shadow
• Spacing
• Opacity
• Border
• Logo
• Image
• Icon
• Emoji
• Loading

Atomic Design (Design Tokens)

Molecules:

Dapat dipecah menjadi Atom.
Mereka juga dapat berisi Molekul lain di dalamnya (yaitu tombol dapat menyertakan ikon di dalamnya).

• Inputs (radio, text field, checkbox)
• Form labels
• Error text
• Dividers
• Lists
• Icons
• Badges
• Tooltips

Molecules Design (Components)

Cells:

Terdiri dari dua atau lebih molekul.

• Form fields
• Alerts
• Product tiles
• Menus
• Time/date pickers
• User comments
• Breadcrumbs

Cells Design (Pattern)

Keuntungan Atomic Design

Reusability: Jika sebuah atom dibuat, ia dapat dengan mudah digunakan kembali nanti untuk desain lain. Definisi baru tidak diperlukan. Ini berarti pengembang web dapat menghemat waktu yang dapat mengurangi biaya untuk klien. Selain itu, rancangan desain baru mungkin lebih cepat karena struktur modular.

Keseragaman: Melalui pengembangan draf desain yang berurutan, keseragaman yang lebih tinggi dapat dicapai. Semakin tinggi level dalam konsep desain, semakin sedikit upaya yang diperlukan untuk mencapai perubahan.

Extensibility: Keuntungan terbesar adalah perpanjangan sederhana dari sistem yang ada. Dengan cara ini, atom atau molekul baru dapat disisipkan tanpa harus memprogram ulang atau mengembangkan struktur yang lengkap. Juga dimungkinkan untuk menggabungkan kembali molekul atau organisme yang ada.

Penanganan: Bahkan sistem yang kompleks dapat ditelusuri lebih mudah berkat struktur desain metodis. Kode sumber biasanya lebih logis, membuatnya lebih mudah untuk melakukan perubahan. Pengembang dapat mengidentifikasi segmen kode lebih cepat.

Kesimpulan

Dengan menggunakan konsep Atomic Design system kita dapat mengerjakan revisi dengan sangat mudah dan cepat, untuk mengubah/merevisi sebuah page atau organisme kita cukup mengubah elemen atomnya, dan tidak perlu melakukan revisi satu persatu.

Saat atom diubah maka molekul, organisme, template bahkan page pun akan ikut berubah. Jadi makin sedikit effort yang digunakan untuk melakukan revisi, hemat waktu dan mengurangi debat.

Link Website: My Personal Website

Beli Source Code: Karyakarsa

Download Assets: Download Assets

Download Template CV Figma: CV ATS Versi Lama