Как стартовые наборы Figma помогают сосредоточиться на UX

Перевод статьи Матана Розена о том, как атомарный дизайн помогает сэкономить время, избежать рутинных действий и ошибок в дизайн-проектах. Автор показывает, как создавать и использовать стартовые наборы компонентов (атомов), из которых можно собирать более сложные элементы: таблицы, карточки, модальные окна
Дарья Райт
Дарья Райт
Ведущий редактор в «Оди» в 2022–2024 годах

Далее текст от лица автора

Применение методологии атомарного дизайна позволяет быстрее запускать продукты. Она помогает дизайнерам концентрироваться на опыте взаимодействия вместо того, чтобы двигать пиксели и заниматься рутинной дизайнерской работой.

TLDR

Давайте разберёмся, как создавать стартовые наборы дизайна в Figma. Пропустите всё лишнее и переходите к самому интересному — прокручивайте вниз, пока не увидите голубые прямоугольники.

Что такое методология атомарного дизайна

Я написал целую статью, посвящённую этой теме. Она также содержит мою интерпретацию раздела о дизайн-токенах в этой методологии. Если вы незнакомы с этой темой, рекомендую прочитать об этом, прежде чем продолжить.

Применение на практике

Как правило, когда UX/UI-дизайнеры работают над дизайном, они используют простые компоненты и усложняют их. Тем самым они создают более крупные компоненты или целые страницы, которые в атомарном дизайне называются «молекулами» или «организмами».

Ant Design — библиотека компонентов интерфейса, которую разработала компания Alibaba Group

Использование кнопок, полей, карточек и других элементов — обычное явление, но когда речь идёт о более сложных компонентах, зачастую во многих дизайн-системах они отсутствуют. Это вынуждает дизайнеров собирать их по кусочкам. Они копируют одни и те же компоненты из других документов и в конечном итоге теряют источник достоверных данных.

Ключевой пример в статье — построение таблиц, но его можно реализовать и для множества других компонентов. Примеры я приведу позже в этой же статье.

Множество атомов, молекул и организмов образуют более крупный организм

Чтобы создать такой крупный организм, как таблица, обычно используют множество молекул и организмов, но это требует времени. Многие дизайн-системы не включают готовые компоненты таблиц в Figma-файлы. Поэтому дизайнерам приходится делать их с нуля или копировать из другой страницы или проекта, где они уже есть.

Явные недостатки

  1. Несогласованность между разными страницами/проектами
  2. Риск несогласованности при ручном обновлении каждой таблицы на одной и той же странице
  3. Отсутствие контроля при внесении изменений или обновлении дизайн-системы

Но какие есть альтернативы? Готовый компонент таблицы в дизайн-системе? А если потребуется внести небольшие изменения и вариации между страницами: добавить или убрать столбцы, изменить фиксированное значение ширины столбца и другое. В этом случае дизайнеры часто отсоединяют компоненты и вносят необходимые локальные изменения.

На определённом уровне это приемлемо, если базовые атомы и молекулы остаются неизменными. Так дизайн-систему можно обновлять до такого уровня, чтобы таблицы оставались согласованными. Однако DesignOps или дизайнеры, ответственные за поддержание дизайн-системы, должны предоставить базовую конфигурацию, чтобы другие члены команды могли её использовать.

Не забудьте о шаблонах!

Чтобы достичь желаемого результата в том, о чём мы говорили выше, важно использовать локальные компоненты и шаблоны.

Применение локальных компонентов для контроля всех таблиц в файле

Вместо того чтобы сразу использовать компоненты ячеек (Cell) и заголовков (Header) в таблице, для заголовков и строк таблицы создайте локальный компонент, который будет выступать в качестве мастер-компонента.

То, как мы создавали таблицы раньше

Так вы сможете контролировать все таблицы на странице. Если создать один заголовок и одну строку в качестве основы, их можно будет повторно применять на всех страницах и контролировать определённые типы ячеек, ширину столбцов и другие параметры.

Почему строки, а не столбцы? Прокрутите вниз до туториала, где я на примерах раскрываю эту тему более подробно.

Используйте компоненты ячеек дизайн-системы в локальном компоненте строки

Когда дизайнеры создают мастер-компонент строки таблицы, они могут выбирать различные типы ячеек, которые понадобятся им в их дизайн-проектах.

Применение локального компонента строки позволяет создавать уникальные строки и даёт возможность вносить изменения в будущем
(то, зачем вы сюда пришли)

Что входит в стартовый набор

После того, как мы поняли, что локальные компоненты помогают обеспечить согласованность между экранами в ходе реализации функции, я хотел бы представить вам концепцию, которую я называю «Стартовые наборы» — шаблоны с красивыми названиями.

Так выглядят некоторые примеры стартовых наборов для различных шаблонов перед тем, как их отсоединят и настроят

Стартовый набор — компонент на уровне шаблона, который предназначен для того, чтобы дизайнер мог отсоединить его и настроить согласно своим потребностям на любой странице, в которой он может его использовать. В состав стартового набора входят:

  1. Обложка, которую следует удалить после отсоединения компонента
  2. Чёткие инструкции по применению и настройке компонента
  3. Привязки (Constraints), которые помогут корректно разместить компонент в нужном месте
Таблица, диалоговое окно и карточка — всё это можно использовать в качестве стартовых наборов

Примеры стартовых наборов и как их применять

Создайте экземпляр мастер-компонента или получите его из вкладки Assets.

Внутри будет полоса с инструкциями, фрейм с компонентами заголовка, фрейм с ячейками и фрейм, который содержит другие элементы таблицы.

Идеальный состав того, что можно найти внутри стартового набора таблицы

Создайте два локальных компонента из фреймов заголовка и ячейки. Вставьте экземпляр в соответствующие места внутри таблицы.

Вставка строки в таблицу с размещённым заголовком

После этого вы можете дублировать экземпляр строки, чтобы создать дополнительные строки. Затем можно настроить таблицу так, как вам нужно: добавить или убрать столбцы и настроить различные типы ячеек, а затем заполнить их случайным контентом, чтобы ваша таблица казалась более реальной. Я рекомендую использовать плагин Content Reel.

Финально настроенная таблица

Давайте создадим его

Создание «шаблона» для таблиц — отличный подход, потому что в процессе работы над функцией количество столбцов, их тип и содержимое могут меняться. Для этого необходимо применять способ, который позволит быстро вносить изменения.

Основа этого метода — создание набора компонентов ячеек (cell) и заголовков (header), которые предназначены для поддержки различных типов контента.

Таким образом вы сможете полностью контролировать контент таблиц на разных страницах

Используйте компоненты строк, а не столбцов

Будет ошибкой, если вы захотите создать таблицу и использовать упомянутые выше компоненты для столбцов, чтобы применять их в различных таблицах.

Преимущества работы со строками

  1. Есть всего 2 мастер-компонента: заголовок и строка
  2. Если вам нужно добавить или удалить столбец, сделайте это только в мастер-компоненте заголовка и строки. Все таблицы на всех страницах также изменятся
  3. Если вам нужно изменить тип ячейки, измените его один раз в мастер-компоненте строки

Недостатки работы со строками

  1. Чтобы изменить ширину столбца, необходимо внести изменения одновременно в оба мастер-компонента
  2. Будет сложно создать закреплённые левые столбцы в прототипах
Действуйте с умом, а не с усердием, и используйте строки в качестве мастер-компонентов

Преимущества работы со столбцами

Для изменения ширины столбца достаточно сделать это один раз в мастер-компоненте.

Недостатки работы со столбцами

  1. Необходимо поддерживать много столбцов в качестве мастер-компонентов
  2. Если вам нужно добавить или удалить столбец, вам придётся делать это вручную во всех таблицах на всех страницах
  3. Если вам понадобится изменить тип ячейки, вам придётся вносить изменения во все мастер-компоненты

Обязательно меняйте название заголовка и типы ячеек в их мастер-компоненте

Создание мастер-компонентов

  1. Создайте два авто-лейаута. Один из них назовите «Заголовок» («Header»). Он будет включать несколько компонентов заголовка таблицы. Второй назовите «Строка таблицы» («Table row»). Включите в него такое же количество компонентов ячеек таблицы (можно добавить больше при необходимости). Убедитесь, что настройка изменения размера установлена на «hug contents» — автоматически подгонять под контент.
Вы также можете называть слои по названию или номеру столбца
  1. Спроектируйте и создайте контейнер для всей таблицы, чтобы он соответствовал вашей системе. В следующем примере вы увидите строку поиска и кнопку фильтра над таблицей, а также элемент пагинации, включённый в таблицу.

В центре контейнера разместите авто-лейаут с названием «Заголовок и строки». В ней будут находиться экземпляры мастер-компонентов. Установите флажок «Clip content» и настройте изменения размера на заполнение как по горизонтали, так и по вертикали.

Обратите внимание на настройки изменения размера: H:fill V:hug — для хедера и футера. H&V:fill — для фрейма «Заголовок и строки»
  1. Установите настройки изменения размера, как показано на изображении выше, чтобы внутри Figma элементы были отзывчивыми.
  1. Внутри фрейма «Заголовок и строки» разместите следующие элементы и установите их размеры и настройки изменения размера:
Когда количество строк будет превышать размер вертикального пространства в таблице, в прототипе это будет выглядеть очень круто
Окончательный результат для фрейма «Заголовок и строки», цвета используются, чтобы разделить части
  1. Разместите все элементы в авто-лейауте и установите для заголовка и строк таблицы заполнение по горизонтали. Затем удалите авто-лейаут. Этот трюк позволит «Заголовку и строкам» заполнить пространство при перемещении их в авто-лейаут «Надстройка строки».
  1. Для будущих пользователей добавьте инструкции к прочтению.
Пример текста, который я написал в своих инструкциях
  1. Разместите фрейм с обложкой наверху над всеми слоями, в левом верхнем углу.
  1. Сделайте размер родительского фрейма таким же, как у обложки, и обрежьте её содержимое. Результат должен выглядеть так.
  1. Сделайте этот фрейм компонентом вашего стартового набора, и это всё.

Действуйте с умом, а не с усердием

Как итог — дизайнерам важно применять эти или подобные стартовые наборы, чтобы прекратить двигать пиксели и освободить время для того, чтобы сфокусироваться на реальном опыте взаимодействия. Применение стартовых наборов поможет поддерживать более крупные и сложные компоненты в системе согласованными как внешне, так и функционально. Тем самым дизайнеры будут быстрее добиваться результатов.

Попробуйте сами в Figma

Table starter kit

Поделиться
Отправить
Запинить

Обсуждение