Atomic Design یا طراحی اتمی روشی برای ساخت رابط‌های کاربری منظم و قابل توسعه است. در این روش به‌جای طراحی هر صفحه به‌صورت مستقل، رابط را از اجزای کوچک شروع می‌کنیم و آن‌ها را مرحله‌به‌مرحله به ساختارهای بزرگ‌تر تبدیل می‌کنیم. این مدل که توسط Brad Frost مطرح شده، به‌خصوص برای ساخت و نگهداری Design Systemها مفید است.
Atomic Design چیست؟
ایده اصلی Atomic Design از ساختار سلسله‌مراتبی در شیمی الهام گرفته شده است: اجزای کوچک با ترکیب شدن، ساختارهای پیچیده‌تر می‌سازند. در طراحی رابط کاربری نیز Button، Input، Label، Icon و عناصر پایه می‌توانند با هم ترکیب شوند و Componentها و در نهایت صفحات کامل را شکل دهند.
پنج مرحله طراحی اتمی
- Atoms — اتم‌ها: کوچک‌ترین اجزای رابط مانند دکمه، فیلد، آیکن و Label.
- Molecules — مولکول‌ها: ترکیب چند اتم برای ایجاد یک واحد کاربردی؛ مثلا Avatar همراه نام و عنوان.
- Organisms — ارگانیسم‌ها: بخش‌های پیچیده‌تر رابط که از چند Molecule تشکیل می‌شوند؛ مانند Header یا کارت کامل پروفایل.
- Templates — تمپلیت‌ها: ساختار صفحه و نحوه قرارگیری Organismها، پیش از جایگذاری محتوای واقعی.
- Pages — صفحات: نمونه واقعی Template با محتوا و داده واقعی که امکان ارزیابی طراحی در شرایط واقعی را می‌دهد.
Atomic Design چه کمکی به Design System می‌کند؟
مزیت اصلی این روش، ایجاد زبان مشترک و ساختار قابل استفاده مجدد است. وقتی اجزای پایه و Componentها تعریف شده باشند، تیم طراحی و توسعه لازم نیست برای هر صفحه همه چیز را دوباره بسازد. تغییر یک جزء پایه نیز می‌تواند به‌صورت کنترل‌شده در بخش‌های مختلف محصول منعکس شود.
البته Atomic Design یک قانون اجباری برای معماری همه Design Systemها نیست. بسته به اندازه محصول و ساختار تیم می‌توانید سطح‌بندی را ساده‌تر کنید یا نام‌های دیگری برای اجزا داشته باشید. ارزش اصلی آن در تفکر Component-based و حرکت از جزء به کل است.
ویدیوی آموزش Atomic Design
در ویدیوی آموزشی این موضوع، پنج سطح Atomic Design و کاربرد آن‌ها در طراحی رابط کاربری و Design System را با مثال مرور می‌کنم.
برای ادامه یادگیری می‌توانید دوره Design System و آموزش Variants در Figma را هم ببینید.
