Figma (программа для дизайна) — Примеры

Пример 1 — Один компонент кнопки вместо двенадцати отдельных фигур

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

Экраны: оплата, настройки, счета, ...           12 файлов
Кнопки: нарисованы на каждом экране, три чуть разных синих
Состояние: ни у одной не показаны hover, pressed или disabled

Решение

Button / Primary
  Варианты:   default, hover, pressed, disabled
  Свойства:   label (text), leading icon (boolean)
  Библиотека: страница компонентов
Правило: отредактируйте компонент один раз; каждый экземпляр следует за ним

Шаги
1. выделите отдельные кнопки и создайте один компонент
2. добавьте вариант для каждого состояния
3. назовите свойства label и icon
4. замените каждый рисунок экземпляром

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

Пример 2 — Файл с тридцатью страницами без названий

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

Страницы: Поиск 1, Поиск 2, ... Поиски 30
          (нет страницы компонентов, нет архива)

Решение

Страницы
  Оплата          текущие экраны
  Аккаунт         текущие экраны
  Компоненты      библиотека и состояния
  Архив           устаревшие поиски
Комментарии: оставлены на точном фрейме, закрыты в файле

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