Наименование свойств компонентов в Figma
Hover или hovered? Active или select, или selected, или же focus, а может, focused? С такими проблемами, я думаю, многие сталкивались, кто хоть раз пытался сопоставить свойства Figma с разработкой. В этой статье расскажу, как мы пришли к единому неймингу свойств в компонентах.
Что это такое?
Нейминг свойств компонентов — это то, как называется та или иная функция компонента. Например, функция выключения видимости иконки или функция разворачивания аккордеона и т. п.
Типы свойств компонентов
Variant
Свойство, позволяющее реализовать переключение между вариантами объектов в одном set. К примеру, если есть вариант свернутого и развернутого состояния, и вы между ними переключаетесь.
Используется, когда нет возможности реализовать функцию через boolean.
Boolean
Свойство, позволяющее реализовать функцию скрытия/отображения объекта в компоненте, не создавая set. К примеру, вам нужно сделать отображение или скрытие иконки.
Instance swap
Функция, позволяющая реализовать переключение между объектами из разных пространств, не создавая set. Работает так же, как variants, но пользоваться сложнее, и при использовании нужно быть предельно внимательным и унаследовать все слои и переменные, если это требуется.
Text
Функция, позволяющая выделить под текстовый блок ячейку (переменную, но не создавать её в переменных, а держать локально в компоненте). Это делается для более быстрого и простого редактирования объекта, а также для корректной реализации функции swap.
Рекомендации по неймингу свойств
Ниже приведены примеры названий свойств, которых стоит придерживаться при их наименовании, чтобы другим дизайнерам было проще ориентироваться в ваших макетах или компонентах.
Для Variant (более 2 состояний)
State (состояние объекта)
- Default / Enabled (объект в состоянии покоя)
- Hovered (когда навели на объект курсор)
- Pressed (когда нажали на объект и держим)
- Focused (объект активен для ввода информации)
- Disabled (взаимодействие с объектом заблокировано)
- Loading (объект обозначает загрузку системы)
- Skeleton (объект грузится)
Size (размерность объекта)
- Large [size px]
- Medium [size px]
- Small [size px]
[name]Count (численность объекта)
- 1
- 2
- 3 и т. п.
Type object (тип объекта)
- [name type]
- [name type]
- и т. п.
Color (цвет объекта)
- Red
- Green
- и т. п.
Variant (из 2 состояний)
Selected (активность объекта)
- On (Положительный результат)
- Off (Отрицательный результат)
Filled (заполненность объекта пользовательскими данными)
- On (заполнен)
- Off (незаполнен)
Error (объект в состоянии ошибки)
- On (в ошибке)
- Off (не в ошибке)
Для Boolean (скрытие объекта)
[name object] (наименование объекта, который хотим скрыть)
- True (показан)
- False (скрыт)
Константы (не стоит менять нейминг)
- Title — заголовок
- Subtitle — подзаголовок
- Placeholder — подсказка
- Icon — иконка единственная
- Right icon — если иконок две, это правая
- Left icon — если иконок две, это левая
Instance swap
Type [name property] (тип объекта)
- [понятное название объекта смены]
- [понятное название объекта смены]
- и т. п.
Text
[name object].T
Константы (не стоит менять нейминг)
- title — основной заголовок объекта (например, ботомшит)
- subtitle — второстепенный заголовок объекта (например, ботомшит)
- placeholder — состояние подсказки, также может использоваться как title
- prefix — часть нередактируемого текста, типа +7 от номера, и он не редактируется
- textUser — введенные пользователем данные
- description — комментарий системы о чём-либо (ошибка, подсказка и т. п.)
- link — название ссылки
Nested instances
Setting [name object]
Как создавать свойства?
Variant (более 2 состояний)
- Выбираем свойство Variant;
- Создаем более 2 состояний;
Variant (из 2 состояний)
- Выбираем свойство Variant;
- Создаем 2 состояния (on/off);
Для Boolean (скрытие объекта)
- Выбираем свойство Boolean;
- Привязываем к нему объекты;
Text
- Выбираем свойство Text;
- Привязываем к нему объекты;
Nested instances
- Нажимаем Nested instances;
- Переименовываем дочерний компонент;
- Как правило, называется Setting [название];
Итог
Я попытался описать свой подход к неймингу свойств компонентов в Figma, чтобы обеспечить единообразие и облегчить работу с компонентами или макетами. Соблюдая рекомендации для различных типов свойств, вы сможете достичь более прозрачного процесса разработки для команды.
🚀 Подписывайтесь, чтобы узнать то, чего не знают другие! Уникальные инсайты и редкие темы для вашего роста и вдохновения! 💡