Принципы, по которым мы оформляем дизайн в Figma
Название компонентов
- Начинаются с заглавной буквы и имеют формат KebabCase.
- На первом месте идет название компонента.
- На втором — тип/модификация компонента или состояние (если нет модификатора).
- На третьем состояние компонента (или на втором, если нет типа).
Например:
Button Active
Button Secondary Active
Названия иконок
Названия иконок начинаются с маленькой буквы и имеют стиль KebabCase
Например:
- maleIcon
- newMessageIcon
Независимо от размера иконок, они должны быть обрамлены в квадратный frame, размер которого соответствует размеру, к которому относится эта иконка (например 64х64).
Композиция компонентов
- Всё состоит из компонентов.
- Компоненты тоже состоят из компонентов.
- Текст — тоже компоненты.
Цвета
Цвета мы оформляем в виде стилей в Figma.
Нигде в системе не должно быть обращение напрямую к цвету кодом.
Везде используем цвета из стилей.
Это касается абсолютно всех цветов: прозрачности чёрных, оттенки основных цветов и проч. и проч. Программист никогда не должен сталкиваться с референсом на цвет напрямую по коду типа '#FFF000'. Программист должен видеть цвет только по его названию из UI KIT, например GREEN, RED, PURPLE и т. д.
Оформление слоёв
- Слои имеют смысл и понятно названы.
- Компоненты и слои внутри слоёв логично сгруппированы и названы.
- Слои и компоненты идут сверху вниз слева направо и расположены в структуре компонентов точно так же, как расположены визуально.
Общее
В работе мы аккуратны и поддерживаем чистоту в коде, тексте и проч. Это же относится и к файлам Figma. Будь аккуратен со структурой, названиями.
- Файлы фигма внутри и снаружи аккуратны.
- Все элементы названы со смыслом.
- Все элементы логично расположены в дереве layers.
- Сам файл Figma тоже назван со смыслом, по названию сразу понятно, что там можно найти.
- Все файлы FIgma должны быть в Dater-Project, а не в локальной папке, не нужно стесняться, что кто-то увидит и проч. Пока ты не скажешь, что готово, можно смотреть и комментировать, никто вмешиваться не будет. Мы не стесняемся показывать работу в процессе.