Системный подход к дизайну подразумевает, в том числе, использование переменных со стилями или готовые наследуемые и изменяемые решения. В этой статье речь пойдет об «атомах» и «молекулах», которые упрощают и ускоряют процесс как дизайна так и разработки. Эта статья будет полезна тем, кто только начинает свой путь в сфере вебдизайна.
Что такое атомарный дизайн
Давайте для начала разберемся с его составляющими:
- Атомы - это наследуемые частицы. У нас есть одна главная частица, а есть наследуемые от нее. При этом если мы изменяем главную частицу [компонент], меняются остальные.
- Молекулы - это большие атомы, которые состоят из множества маленьких. Их мы тоже можем наследовать и менять их внутренности.
Представьте себе конструктор, в котором мы можем собрать дом. После того, как мы его построили, мы меняем у него только одно окно, чтобы поменялись все похожие на него. Весь дом - это одно целое, которое состоит из множества повторяющихся компонентов. Только разница здесь в том, что у реального дома нет наследуемости, а в моем примере - есть. Мы не можем выделить в существующем доме один, главный, кирпич среди остальных. Если мы перекрасим любой, другие от этого не изменят цвет.
Атомарный дизайн - это про конструктор [систему], в котором есть главные элементы, а есть наследуемые. При изменении главных элементов, меняются наследуемые.
Любая дизайн-система начинается с переменных [наследуемых частиц, которыми мы можем управлять] - атомов. В Figma этими атомами служат цвета, стили и эффекты.
Если мы добавляем, к примеру, определенный цвет в нашу систему, то в последующем мы можем его менять. То есть, нам не приходится менять его в каждом макете, в каждом компоненте. Он меняется только один раз, в одном месте - это важно понимать.
Еще это может спасти вас от неточностей. Так вы получаете гарантию того, что во всех макетах определенный цвет будет иметь одинаковый код,
а ваш нейминг везде будет идентичным. То же самое касается и типографики, и эффектов [теней, свечения, размытия и пр.]
Когда мы определились с цветами и стилями, настала очередь собрать повторяющиеся частицы компонентов.
Теперь очередь самих компонентов. Как видно в предыдущем примере, ими могут быть поля ввода в различных состояниях, контроллы [чекбоксы, радиокнопки] пр. Их количество и свойства зависят исключительно
от вашей потребности и проекта.
Третьим этапом становится сборка частоиспользуемых решений. Это могут быть цельные блоки, которые повторяются из раза в раз в ваших макетах. Любые детали, которые повторяются много раз. Давайте рассмотрим пример с формами для опроса.
Как мы и говорили выше, у нас уже есть готовые стили и компоненты. Теперь необходимо объединить их в цельные блоки, 3 мастер-компонента. Их можно объединить и в один мастер, но разные типы будут иметь разные свойства. Об этом чуть ниже.
Мы точно знаем, что вопросы могут быть как открытыми, так с одним или несколькими вариантами ответа. Поэтому нам нужно 3 типа блоков.
Первый тип блока включает в себя открытые вопросы - для этого мы используем поле для ввода текста [только одно!] и заголовок к нему. Здесь не может быть нескольких полей ввода, поэтому у этого типа нет свойств.
Второй тип включает заголовок и «радиогруппу» - это поля ввода для выбора одного значения. Здесь и в третьем типе может быть разное количество вариантов ответа, поэтому свойств тоже может быть разное количество.
Третий тип включает заголовок и чекбоксы - поля для выбора множества значений.
Здесь важно понимать, что мы не знаем точного количества вопросов в каждом блоке. И тут-то стоят два стула для выбора подхода к их формированию.
Во-первых, можно наклипать побольше вариантов ответа в мастер-компоненте, а потом скрывать лишние в дочерних компонентах. В таком случае, можно объединить все три типа в один мастер-компонент.
Вторым стулом является создание дополнительных вариантов для каждого типа блоков. В свойства включается количество вопросов. Второй вариант наиболее затратный, но так мы избавляемся от артефактов и освобождаем память в проекте. Если вы хотите использовать такой подход, рекомендую сделать три отдельных мастера, чтобы избежать путаницы со свойствами.
Теперь, когда у нас готовы формы, мы можем создать страницу опроса. Когда мы поставим на нее блок и размножим его, мы сможем изменять тип и свойства каждого из них. Для открытых вопросов - выбираем первый тип, для закрытых - второй или третий.
Эту страницу мы тоже можем сделать компонентом и копировать ее, изменяя типы блоков и их содержание. Готово!
Теперь вы можете управлять всеми данными в проекте в одном месте. Вам не придется выбирать и менять множество фреймов или слоев для того, чтобы исправить цвет, к примеру. Для этого достаточно внести изменения в мастер-компонент. Ускоряйте и упрощайте свою работу. А еще подписывайтесь на меня на youtube и в telegram, чтобы быть ускоренным и вежливым дизайнером :))))
#фигма #дизайн #вебдизайн #ux #ui #uxui #атомарный #атомарный дизайн #figma