Правила оформления компонентов

Версия документа 2.0

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

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

Компоненты представляют собой универсальный инструмент для совместной работы, они должны быть чётко определены и тщательно проработаны. Разработчик должен понимать суть, назначение и особенности компонентов. Пользователи должны получать удовольствие от удобства и быстрого решения своих задач. Этим простым догмам нам необходимо придерживаться.

По всем возникшим вопросам пишите Сереге и Жасуру из команды дизайн-системы.

Атом в компоненте

Наши компоненты должны быть организованы соответствуя методологии «Атомарный дизайн».

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

Планирование создание нового компонента

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

---

Работа над компонентами

При создании нового компонента или его доработки нужно пользоваться следующим руководством:

Название компонентов

Будем использовать аннотацию Pascal Case, только с пробелом для наименования компонентов и слоев. Так будет проще искать компоненты в Assets и читать их. А разработчику видеть привычную аннотацию, но только с пробелом.

Пример, Calculate Elephant Weight

Properties

При создании компонента используйте следующее руководство:

Главное правило. Properties (свойства в боковой панели figma) должны выводиться по логике их расположении в компоненте (визуально), слева направо.

1. Variant

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

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

2. Boolean props

Boolean — это свойство, которое позволяет изменять видимость слоя компонента, используя два значения: True или False. Оно скрывает как сам слой, так и связанные с ним параметры в панели Properties.

Название свойства всегда должно иметь следующую форму: ( Show “Название слоя или компонента” ).

3. Text

Позволяет изменять текст с помощью панели Properties. Можно выбрать несколько объектов и обновить текст одновременно. Огромную ценность имеет правильное именование текстовых свойств – по их смыслу и предназначению.

4. Instance swap

Instance swap – смена компонента на другой компонент. Instance swap позволяет заменять вложенные компоненты через панель Properties. Можно выбрать стандартный экземпляр из локальной или подключённой библиотеки. Обратите внимание, что Instance Swap учитывает иерархию и может заменять только те компоненты, которые находятся на одном уровне. Таким образом, варианты вложенного компонента должны быть отдельными элементами, а не объединёнными в Variants.

Важно, компонент со свойством Instance swap, должен быть помещен во frame. Frame должен иметь следующие название ([”Название” Container]). Если есть необходимость в скрытии слоя с помощью функции Boolean props, используйте это на frame ([”Название” Container]), а не на компонента.

В Properties используйте следующую формулу для обозначения Instance swap ( Swap “Название” Container). Название должно соответствовать frame в слоях.

---

Название Value в Variable

В данном разделе мы будем собирать и стандартизировать списки в Variable компонента.

Таблицы с описанием типов названий:

Slot

Фреймы в который можно помещать любой контент менять padding, gap назваются Slot. Это наиболее свободный формат наполнения компонента с контентом

Layers

Правильное оформление слоев – залог успеха в жизни. Все слои нужно подписывать и держать в чистоте и порядке.

Будем использовать аннотацию Pascal Case, только с пробелом для наименования компонентов и слоев. Так будет проще искать компоненты в Assets и читать их. А разработчику видеть привычную аннотацию, но только с пробелом.

Все наши компоненты делятся на две категории статичные и кликабельные.

Статичные компоненты – это элементы по которым невозможно кликать. Они могут иметь только информативное состояние. Кликабельные компоненты – это элементы по которым мы можем, сейчас будет удивительное, кликать. У них есть такие состояния как: наведение (вы скажете наведения в мобилке нет, ты о чем? но мы разрабатываем на react, и использовать их в вебе вопрос времени), нажатие, фокус, выделение, перетаскивание и свайп.

Хорошем тоном считается делать высоту компонентов счетным числом. Из-за этого важно контролировать все размеры слоев компонента. Это можно делать фиксированием с помощью токенов размера или функцией «Add min width (height)…» и «Add max width…».

State layer

State layer - это полупрозрачное покрытие элемента, указывающее на его состояние. Слои состояния обеспечивают системный подход к визуализации состояний с помощью непрозрачности. Вне зависимости от цвета background компонента, слои состояния всегда одни и те же. Получаются слой состояние должен быть на всей области изменения слоя.

1. Контейнер

2. Слой состояния

3. Контент

4. Контейнер

5. Слой состояния

6. Контент