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

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

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

Вариант и булево свойство меняют разные вещи

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

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

Булево свойство принимает два значения: true и false. При привязке к видимости слоя оно показывает или скрывает этот слой в экземпляре. Кнопка с необязательной иконкой остаётся тем же компонентом: меняется присутствие иконки, а не вся конструкция кнопки. Скрытый слой при этом не удаляется из исходного компонента.

Pixso различает свойства VARIANT, BOOLEAN, TEXT и INSTANCE_SWAP. Их типы перечислены в документации свойств компонентов на английском. Это полезное разграничение и для дизайнера: изменение надписи, замена одного значка другим и скрытие значка — три разные задачи.

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

Как разделить настройки кнопки в Pixso

Возьмём кнопку «Сохранить» с тремя независимыми решениями: насколько она выделена, в каком состоянии находится и нужна ли иконка слева. Сначала определите, что должен выбирать дизайнер экрана. Затем задайте только те свойства, которые отражают эти решения.

1. Подготовьте основу. Соберите текст и иконку в кнопке, задайте отступы и интервалы. Настройте Auto Layout — автоматическую компоновку — под выбранное правило ширины: по содержимому или по ширине контейнера. Для той же кнопки проверьте короткую подпись «Сохранить» и длинную «Сохранить изменения».

2. Создайте нужные варианты. Выделите компонент и добавьте вариант через знак «+» рядом с разделом вариантов на правой панели. Например, задайте свойства «Тип» со значениями «Основная» и «Второстепенная» и «Состояние» со значениями «Обычное», «Наведение», «Недоступно». Если после нажатия нужно показать ожидание, подготовьте состояние загрузки со своим оформлением. Каждый вариант должен иметь уникальную комбинацию значений. Порядок создания и настройки описан в русской справке «Компоненты».

3. Отделите необязательную иконку. Свойство «Иконка слева» должно управлять видимостью слоя иконки, а не выбирать дубликат всей кнопки. Если нужно заменить колокольчик на стрелку, это уже выбор другого содержимого: используйте соответствующий вложенный компонент и его замену, а не несколько взаимоисключающих переключателей видимости.

4. Посмотрите на экземпляр в макете. Переключите тип, состояние и видимость иконки. Проверьте длинную подпись, ширину кнопки и интервал после скрытой иконки. Результат зависит от компоновки: переключатель видимости не исправляет неверно заданные размеры и отступы.

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

Собрать варианты кнопки в Pixso

Выбирайте свойство по характеру изменения

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

Что меняется	Подходящее свойство	Почему
Иконка появляется или исчезает в кнопке	Булево свойство видимости	Меняется присутствие одного элемента, а назначение и основное оформление кнопки сохраняются.
Основная, второстепенная или ненавязчивая кнопка	Вариант	Это разные способы оформления: заливка, обводка и цвет текста образуют согласованное сочетание.
Обычное состояние, наведение, нажатие или недоступность	Вариант	Нужно показать визуальное состояние целиком. Его связь с интерактивным поведением задают отдельно.
Кнопка закрытия показывается или скрывается в диалоге	Булево свойство видимости	Если структура диалога остаётся прежней, переключатель управляет одним элементом. Допустимость скрытия зависит от сценария: пользователь не должен потерять необходимый способ выхода.
Надпись «Сохранить» заменяется на «Отправить»	Текстовое свойство	Меняется содержание, а не видимость текста. Компоновка должна выдерживать новую длину.
Одна иконка заменяется другой	Замена вложенного экземпляра	Выбирается другой значок, а не включается ещё один скрытый слой из большой коллекции.

Для размеров часто полезны варианты, если размеры меняют высоту, отступы и типографику согласованно. Но не каждую ширину нужно сохранять отдельным вариантом: её может определять Auto Layout. Цветовая тема тоже не обязана размножать набор компонентов, если нужные значения уже задаются стилями или токенами.

Необязательная точка уведомления или дополнительная подпись подходят для управления видимостью, если после их скрытия компонент остаётся понятным. Иконка без текста — отдельный случай: проверьте размеры, доступное название действия и правила применения. Простое скрытие подписи ещё не делает обычную кнопку готовой кнопкой-иконкой.

Откуда берутся 192 варианта вместо 48

Число сочетаний растёт как произведение независимых признаков. Допустим, библиотеке нужны три размера, четыре цветовых оформления и четыре состояния. Если все сочетания допустимы, получится 3 × 4 × 4 = 48 вариантов.

Теперь добавим четыре сочетания иконок: без иконок, только слева, только справа, с обеих сторон. Если каждое сочетание хранить отдельным вариантом, число компонентов вырастет до 48 × 4 = 192.

Если левая и правая иконки действительно необязательны и не меняют назначение кнопки, можно сохранить 48 базовых вариантов и задать два булевых свойства: «Иконка слева» и «Иконка справа».

Иконка слева	Иконка справа	Результат
Выключена	Выключена	Только подпись
Включена	Выключена	Иконка перед подписью
Выключена	Включена	Иконка после подписи
Включена	Включена	Иконки по обе стороны подписи

Здесь сокращается число основных компонентов, которые приходится поддерживать: 48 вместо 192. Это не означает «в четыре раза меньше слоёв» или «в четыре раза быстрее». У каждого варианта есть дочерние слои, включая скрытые; итоговый объём и скорость работы зависят от всей структуры файла.

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

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

Как связать свойства дизайна с кодом

Разработчику обычно не нужны 192 отдельных кнопки. Ему нужна понятная модель: размер, вид оформления, доступность действия и содержимое. Согласованные названия в макете помогают сопоставить её с параметрами компонента в React, Vue или другой библиотеке.

Например, размер «Большой» может соответствовать size="large", а наличие иконки — параметру hasIcon или переданному элементу icon. Конкретный способ выбирает команда. Если иконка уже передаётся как содержимое, дополнительный булев параметр иногда лишь дублирует информацию.

В макете	Что согласовать с разработчиком	Что не следует предполагать
Размер: «Большой»	Соответствие значению large и набору размеров в коде	Что разные библиотеки используют одинаковые названия размеров
Иконка слева: включена	Как передаются иконка и её положение; нужен ли отдельный флаг	Что переключатель видимости автоматически подключает нужную иконку в приложении
Состояние: «Наведение»	Оформление при наведении и соответствующее поведение в браузере	Что каждому визуальному состоянию нужен отдельный публичный параметр компонента
Состояние: «Недоступно»	Внешний вид и реальная блокировка действия в реализации	Что серый цвет в макете уже делает кнопку недоступной для взаимодействия

В Pixso правила Design-to-Code позволяют настроить сопоставление компонентов, свойств, текста и иконок с целевой библиотекой. В документации сопоставления компонентов на английском показаны соответствующие настройки. Для конкретного проекта нужно задать эти правила, проверить полученный код и интегрировать его в приложение. Понятная структура макета помогает этой работе, но не заменяет реализацию логики и поведения.

Три ошибки, из-за которых библиотека усложняется

Один компонент пытается быть всем сразу

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

Новый вариант создаётся ради одной точки

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

Название свойства не объясняет результат

Название «Иконка слева» говорит, какой элемент включается. Смесь «Show Icon», «Icon=True» и «Есть значок» в соседних компонентах заставляет каждый раз угадывать правило. Договоритесь об одном языке названий и отделяйте название свойства от его значения. Используйте одинаковые обозначения размера и состояния во всём наборе, а исключения описывайте рядом с компонентом.

Начните с повторяющегося различия

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