Атомарный дизайн (Atomic design) — это методология проектирования продуктов, основанная на иерархии компонентов с разной степенью сложности. Её создатель Брэд Фрост выделил пять уровней: атомы, молекулы, организмы, шаблоны и страницы.
Согласно этой теории, изменения на любом уровне влияют на все последующие уровни. Если вы измените молекулу, это повлияет на организмы, шаблоны и страницы. Изменения на уровне атома, в свою очередь, отразятся на всех других уровнях.
Тем не менее методология атомарного дизайна не стремится к строгой классификации того, что является молекулой, а что организмом. Её главная цель — дать рекомендации по созданию согласованных и логичных систем интерфейса.
Дизайн-системы — это эффективные инструменты, которые помогают:
- Достичь согласованности вашего дизайна
- Оптимизировать количество компонентов в системе
- Сократить усилия дизайнеров на удаление или изменение компонентов
- Минимизировать путаницу у разработчиков при создании вашего продукта
Атомы (Atoms)

Атомы — это базовые элементы, которые формируют надписи, поля ввода, кнопки и другие базовые свойства, такие как цвета, шрифты и радиус скругления, и которые уже нельзя разделить на более простые элементы. По отдельности атомы представляют собой абстрактные концепции без конкретного значения…
Доступ только по подписке
Этот урок доступен только для подписчиков. Оформите подписку, чтобы получить полный доступ к материалам, эксклюзивному контенту и дополнительным бонусам.
Что даёт подписка?
- Доступ ко всем разделам учебника
- Доступ ко всем мастер-классам
- Закрытый чат с ментором
- Обратная связь на проекты
Подключите подписку сейчас и получите неограниченный доступ к этому и другим материалам!