Далее текст от лица автора
Применение методологии атомарного дизайна позволяет быстрее запускать продукты. Она помогает дизайнерам концентрироваться на опыте взаимодействия вместо того, чтобы двигать пиксели и заниматься рутинной дизайнерской работой.
TLDR
Давайте разберёмся, как создавать стартовые наборы дизайна в Figma. Пропустите всё лишнее и переходите к самому интересному — прокручивайте вниз, пока не увидите голубые прямоугольники.
Что такое методология атомарного дизайна
Я написал целую статью, посвящённую этой теме. Она также содержит мою интерпретацию раздела о дизайн-токенах в этой методологии. Если вы незнакомы с этой темой, рекомендую прочитать об этом, прежде чем продолжить.
Применение на практике
Как правило, когда UX/UI-дизайнеры работают над дизайном, они используют простые компоненты и усложняют их. Тем самым они создают более крупные компоненты или целые страницы, которые в атомарном дизайне называются «молекулами» или «организмами».
![](https://sun9-10.userapi.com/impg/LyUpEsk9_jxyiLBqR0XtnaiTXErVOeZcdqMgJg/NFys2ooCB6E.jpg?size=1400x735&quality=95&sign=76a5330c34d1e2e3dc16e9993bb46416&type=album)
Использование кнопок, полей, карточек и других элементов — обычное явление, но когда речь идёт о более сложных компонентах, зачастую во многих дизайн-системах они отсутствуют. Это вынуждает дизайнеров собирать их по кусочкам. Они копируют одни и те же компоненты из других документов и в конечном итоге теряют источник достоверных данных.
Ключевой пример в статье — построение таблиц, но его можно реализовать и для множества других компонентов. Примеры я приведу позже в этой же статье.
![](https://sun9-50.userapi.com/impg/TJr2u8DuaG1wP6z3CYmtzOEcsPyliqfe_QpAhg/EJrEbwTqNi8.jpg?size=2383x795&quality=95&sign=3c70da43a78dbc6825a0fbf136521e97&type=album)
Чтобы создать такой крупный организм, как таблица, обычно используют множество молекул и организмов, но это требует времени. Многие дизайн-системы не включают готовые компоненты таблиц в Figma-файлы. Поэтому дизайнерам приходится делать их с нуля или копировать из другой страницы или проекта, где они уже есть.
Явные недостатки
- Несогласованность между разными страницами/проектами
- Риск несогласованности при ручном обновлении каждой таблицы на одной и той же странице
- Отсутствие контроля при внесении изменений или обновлении дизайн-системы
Но какие есть альтернативы? Готовый компонент таблицы в дизайн-системе? А если потребуется внести небольшие изменения и вариации между страницами: добавить или убрать столбцы, изменить фиксированное значение ширины столбца и другое. В этом случае дизайнеры часто отсоединяют компоненты и вносят необходимые локальные изменения.
На определённом уровне это приемлемо, если базовые атомы и молекулы остаются неизменными. Так дизайн-систему можно обновлять до такого уровня, чтобы таблицы оставались согласованными. Однако DesignOps или дизайнеры, ответственные за поддержание дизайн-системы, должны предоставить базовую конфигурацию, чтобы другие члены команды могли её использовать.
Не забудьте о шаблонах!
Чтобы достичь желаемого результата в том, о чём мы говорили выше, важно использовать локальные компоненты и шаблоны.
Применение локальных компонентов для контроля всех таблиц в файле
Вместо того чтобы сразу использовать компоненты ячеек (Cell) и заголовков (Header) в таблице, для заголовков и строк таблицы создайте локальный компонент, который будет выступать в качестве мастер-компонента.
![](https://sun9-48.userapi.com/impg/Xm51KHWsilDsuvPkVrqt9ASxj8JZu9Z7QZ5RAQ/uA6iRgOHioE.jpg?size=2124x1004&quality=95&sign=9a9d55addfe0b7f709be575abd379e1d&type=album)
Так вы сможете контролировать все таблицы на странице. Если создать один заголовок и одну строку в качестве основы, их можно будет повторно применять на всех страницах и контролировать определённые типы ячеек, ширину столбцов и другие параметры.
Почему строки, а не столбцы? Прокрутите вниз до туториала, где я на примерах раскрываю эту тему более подробно.
![](https://sun9-54.userapi.com/impg/PCPVjrW-c8cTo_niT0cagy1Srj_yGsoo_gwpTQ/lP8UoEr5U-Y.jpg?size=1400x1177&quality=95&sign=9173344d3276878cf822490513d19364&type=album)
Когда дизайнеры создают мастер-компонент строки таблицы, они могут выбирать различные типы ячеек, которые понадобятся им в их дизайн-проектах.
- Допустим, на более поздних этапах разработки продукта/функции дизайнеру понадобится внести изменения, например, использовать другой тип столбца или определённую ширину столбца. Если он внесёт изменения в мастер-компонент, они отразятся во всех локальных таблицах
- При изменении ширины столбца убедитесь, что вы внесли соответствующие изменения в компоненты строки и заголовка в части размеров или ограничений. Так вы обеспечите согласованность
![](https://sun9-19.userapi.com/impg/dtf_zLZUtbOMiFE5k43zw8H4cifYJmMo1tnQow/6Jx9ikp8z5Y.jpg?size=1400x1440&quality=95&sign=d4735689a1c02e8e2670899db06f179e&type=album)
![](https://sun9-28.userapi.com/impg/DqftP165l3CO9WFecTzduTtq7sACj342Yed05w/cNlaai70nJI.jpg?size=1400x229&quality=95&sign=e35773d1a0a2cd381e338c6aa3c9aae0&type=album)
Что входит в стартовый набор
После того, как мы поняли, что локальные компоненты помогают обеспечить согласованность между экранами в ходе реализации функции, я хотел бы представить вам концепцию, которую я называю «Стартовые наборы» — шаблоны с красивыми названиями.
![](https://sun9-62.userapi.com/impg/B20JSpL799jH1I9D5nBDa6E2alttn0ZMz9IPzg/DbX_e1-TLiw.jpg?size=1400x907&quality=95&sign=469607822681d47e9ff0de2a62ef9686&type=album)
Стартовый набор — компонент на уровне шаблона, который предназначен для того, чтобы дизайнер мог отсоединить его и настроить согласно своим потребностям на любой странице, в которой он может его использовать. В состав стартового набора входят:
- Обложка, которую следует удалить после отсоединения компонента
- Чёткие инструкции по применению и настройке компонента
- Привязки (Constraints), которые помогут корректно разместить компонент в нужном месте
![](https://sun9-37.userapi.com/impg/G-mXBsdHBUjOQdsR9_w7od4Y-AbNfpoDg2iwhw/C6Rls-CopiI.jpg?size=1350x2160&quality=95&sign=0c29510ae6f205be2db8f7ce71fdf5fe&type=album)
Примеры стартовых наборов и как их применять
Создайте экземпляр мастер-компонента или получите его из вкладки Assets.
![](https://sun9-26.userapi.com/impg/MDjHnvp5R_ED_J5Sx5KXHPihlPuBtFoWGEfseQ/M60UUWJg9Kk.jpg?size=1400x788&quality=95&sign=ff68b87a51e51a5b500ad86815611d87&type=album)
Внутри будет полоса с инструкциями, фрейм с компонентами заголовка, фрейм с ячейками и фрейм, который содержит другие элементы таблицы.
![](https://sun9-12.userapi.com/impg/89QKUYxl4JqaPVW9_Au9W9JS8BuhlZfeFFGq0w/obqyQ9PilLk.jpg?size=1400x1074&quality=95&sign=4919f9430e175526075a5a1c3b22bb29&type=album)
Создайте два локальных компонента из фреймов заголовка и ячейки. Вставьте экземпляр в соответствующие места внутри таблицы.
![](https://sun9-32.userapi.com/impg/TRgfmD9I3ulYittAwWU8x1movBG1skB1c_Z2xA/YqMt33kfWbc.jpg?size=1400x869&quality=95&sign=6d6e5861f2cac8e477d4659c9668f183&type=album)
После этого вы можете дублировать экземпляр строки, чтобы создать дополнительные строки. Затем можно настроить таблицу так, как вам нужно: добавить или убрать столбцы и настроить различные типы ячеек, а затем заполнить их случайным контентом, чтобы ваша таблица казалась более реальной. Я рекомендую использовать плагин Content Reel.
![](https://sun9-37.userapi.com/impg/xNenpSry81QGZa837WeU9H4RrHSOQLrIJQSymg/8D2BYtIm8OY.jpg?size=1400x750&quality=95&sign=c5043a73810dd16f0ea502d7b5bfa23c&type=album)
Давайте создадим его
Создание «шаблона» для таблиц — отличный подход, потому что в процессе работы над функцией количество столбцов, их тип и содержимое могут меняться. Для этого необходимо применять способ, который позволит быстро вносить изменения.
Основа этого метода — создание набора компонентов ячеек (cell) и заголовков (header), которые предназначены для поддержки различных типов контента.
![](https://sun9-45.userapi.com/impg/o-3Zg6kp9iupY514qqdkeVMHtxLgp1KuQ0HHaw/DifhUZRDKcI.jpg?size=1400x808&quality=95&sign=33faa664589fb38f2974ab6a94828488&type=album)
Используйте компоненты строк, а не столбцов
Будет ошибкой, если вы захотите создать таблицу и использовать упомянутые выше компоненты для столбцов, чтобы применять их в различных таблицах.
Преимущества работы со строками
- Есть всего 2 мастер-компонента: заголовок и строка
- Если вам нужно добавить или удалить столбец, сделайте это только в мастер-компоненте заголовка и строки. Все таблицы на всех страницах также изменятся
- Если вам нужно изменить тип ячейки, измените его один раз в мастер-компоненте строки
Недостатки работы со строками
- Чтобы изменить ширину столбца, необходимо внести изменения одновременно в оба мастер-компонента
- Будет сложно создать закреплённые левые столбцы в прототипах
![](https://sun9-20.userapi.com/impg/-UfI1o9tP3YemMh4GREChEuEAbyZ8q9OJdl19Q/--W9UbCFFN0.jpg?size=1000x803&quality=95&sign=2fe59e730585adce9d4617a3f21776dd&type=album)
![](https://sun9-38.userapi.com/impg/dtIW5GVmGj0xxrBaeP11OnOrHDFn986adeit5Q/id3YV7LpQWc.jpg?size=1000x803&quality=95&sign=59594931ab066950007fa49ab3310090&type=album)
Преимущества работы со столбцами
Для изменения ширины столбца достаточно сделать это один раз в мастер-компоненте.
Недостатки работы со столбцами
- Необходимо поддерживать много столбцов в качестве мастер-компонентов
- Если вам нужно добавить или удалить столбец, вам придётся делать это вручную во всех таблицах на всех страницах
- Если вам понадобится изменить тип ячейки, вам придётся вносить изменения во все мастер-компоненты
Обязательно меняйте название заголовка и типы ячеек в их мастер-компоненте
Создание мастер-компонентов
- Создайте два авто-лейаута. Один из них назовите «Заголовок» («Header»). Он будет включать несколько компонентов заголовка таблицы. Второй назовите «Строка таблицы» («Table row»). Включите в него такое же количество компонентов ячеек таблицы (можно добавить больше при необходимости). Убедитесь, что настройка изменения размера установлена на «hug contents» — автоматически подгонять под контент.
![](https://sun9-75.userapi.com/impg/1Un_gHri-z_GfEFhkCsXy75qv9eHifiWtIdMOw/3jsJoX5Wzps.jpg?size=1400x691&quality=95&sign=234ba443930f79d6aaf9372255495e7d&type=album)
- Спроектируйте и создайте контейнер для всей таблицы, чтобы он соответствовал вашей системе. В следующем примере вы увидите строку поиска и кнопку фильтра над таблицей, а также элемент пагинации, включённый в таблицу.
В центре контейнера разместите авто-лейаут с названием «Заголовок и строки». В ней будут находиться экземпляры мастер-компонентов. Установите флажок «Clip content» и настройте изменения размера на заполнение как по горизонтали, так и по вертикали.
![](https://sun9-56.userapi.com/impg/ni2nu9Rt-i6tCxYTKp1hc-1eLXH94HQ0A6OvXQ/UVVz3ODXS7M.jpg?size=1000x536&quality=95&sign=9891d0410854fd67944a5bdf8b7d502e&type=album)
![](https://sun9-8.userapi.com/impg/59ZWzhuBor5N-IMZ3Po6fsG5kmzTw5YBRUQl4A/1RGMxVtYSok.jpg?size=1000x536&quality=95&sign=f9fe2ef02e42f1e06a4bc4cf5ee7df4d&type=album)
- Установите настройки изменения размера, как показано на изображении выше, чтобы внутри Figma элементы были отзывчивыми.
- Внутри фрейма «Заголовок и строки» разместите следующие элементы и установите их размеры и настройки изменения размера:
![](https://sun9-43.userapi.com/impg/VluUMgwBnnyUC3HZ5KbHnNPdXPCBzagHdIZH7Q/PU03raoa2Pw.jpg?size=1400x350&quality=95&sign=c63d78c5e39ae1b377a529e82594c57b&type=album)
- Текстовый слой «Place Header component instance below and delete this layer»(«Разместите экземпляр компонента Заголовка ниже и удалите этот слой»). Заполнение по горизонтали, а высота равна 80 пикселей
- Авто-лейаут под названием «Rows wrapper» («Надстройка строки») содержит текстовый слой «Place Table row component instance below and delete this layer» («Разместите экземпляр компонента строки таблицы ниже и удалите этот слой»). Заполнение по горизонтали и вертикальное сжатие. Во вкладке Prototype установите Scroll behavior на Vertical Overflow.
![](https://sun9-56.userapi.com/impg/p7yU4a0A6o_wjnkH9UudxYGW4yY_EnXJnh51BA/P0XR5NqpdRc.jpg?size=1400x228&quality=95&sign=ddb4c5c0b014ed8a9bce111317dbe179&type=album)
- Оба текстовых слоя должны иметь фиксированную высоту, равную 80 пикселям, и быть настроены на горизонтальное заполнение
![](https://sun9-15.userapi.com/impg/u6HIxggEU9sH3dJyw23hIBiyGnHV-4BmHqHxtA/CQeK9qcCTIo.jpg?size=1400x352&quality=95&sign=ed22cf9d2a389a4c5293a108680ae399&type=album)
- Разместите все элементы в авто-лейауте и установите для заголовка и строк таблицы заполнение по горизонтали. Затем удалите авто-лейаут. Этот трюк позволит «Заголовку и строкам» заполнить пространство при перемещении их в авто-лейаут «Надстройка строки».
- Для будущих пользователей добавьте инструкции к прочтению.
![](https://sun9-65.userapi.com/impg/Z3pYnmzGow6yrTubiUdvHkKgVJG0SV-7hGwb4w/ILkoc3Uj_wM.jpg?size=1400x219&quality=95&sign=52e7cfc829615b499a35d899c5cf45ab&type=album)
![](https://sun9-13.userapi.com/impg/yT_XA3wDIRrI2qdPhwbR_RaETGAGf0_y4JIZTg/QB25V4zaEEA.jpg?size=1400x1074&quality=95&sign=18ef74ebbc25507c8a8005760ef73627&type=album)
- Разместите фрейм с обложкой наверху над всеми слоями, в левом верхнем углу.
![](https://sun9-6.userapi.com/impg/rr3R2KMggc5Ej4yolBPps9uGzysZ7uGYTWJYpw/lK0zWjqAo0M.jpg?size=1400x828&quality=95&sign=3ac6c4c0f02adb8a162bbcbcf82d2f77&type=album)
- Сделайте размер родительского фрейма таким же, как у обложки, и обрежьте её содержимое. Результат должен выглядеть так.
![](https://sun9-5.userapi.com/impg/l-iOF3E7hrr2mx73JVIU3iSAol3HU50t5KVp8Q/fq_7277mcNc.jpg?size=1400x576&quality=95&sign=ddaa064e19016059c7f3614c986685e6&type=album)
- Сделайте этот фрейм компонентом вашего стартового набора, и это всё.
Действуйте с умом, а не с усердием
Как итог — дизайнерам важно применять эти или подобные стартовые наборы, чтобы прекратить двигать пиксели и освободить время для того, чтобы сфокусироваться на реальном опыте взаимодействия. Применение стартовых наборов поможет поддерживать более крупные и сложные компоненты в системе согласованными как внешне, так и функционально. Тем самым дизайнеры будут быстрее добиваться результатов.
Попробуйте сами в Figma
![](https://sun9-8.userapi.com/impg/n179UFCW-Q7Ck0CATK6FGc7Uicy5aP_1npqpEg/GMdZF4XSWQo.jpg?size=1400x831&quality=95&sign=74828dfbcc0a8d05343cda666e3cc9dd&type=album)
Обсуждение
Похожее
13 плагинов для создания и настройки анимаций в Figma
Проверяем METRO на прочность
Статья «Реклама — мачеха графического дизайна?» #awd_article