Варианты Figma объединяют несколько связанных компонентов в один набор. Вместо поиска отдельных файлов Button small и Button large дизайнер выбирает у экземпляра свойство Size. Для кнопки удобно отдельно задать размер и состояние, чтобы комбинации были понятны и дизайнеру, и разработчику.
На Mentoring.digital разберём учебный набор из четырёх вариантов. Он поможет освоить принцип, но не заменяет полную спецификацию доступной кнопки: рабочему интерфейсу могут понадобиться состояния focus, loading и другие правила.
Определите свойства до рисования вариантов
Начните с двух свойств: Size со значениями S и M, State со значениями Default и Disabled. Получаются четыре осмысленные комбинации. Каждая должна иметь собственный уникальный набор значений: два варианта с одинаковыми Size и State будут неоднозначными.
Текст кнопки не стоит превращать в отдельный вариант для каждого слова. «Сохранить» и «Продолжить» обычно являются содержимым, а не новым устройством компонента. Для этого подходит текстовое свойство. Видимость дополнительной иконки можно выразить boolean-свойством, а выбор вложенной иконки через instance swap, если структура компонента это предусматривает.
Не добавляйте все возможные параметры сразу. Если три размера, четыре состояния и три типа оформления действительно независимы, полная комбинация потребует 36 вариантов. Иногда такое покрытие нужно, но сначала проверьте, какие сочетания существуют в продукте.
Соберите component set
- Создайте кнопку как компонент. Внутри оставьте понятные имена слоёв, например Label и Icon.
- Подготовьте четыре компонента с одинаковой структурой для выбранных размеров и состояний.
- Выделите эти компоненты и используйте команду Combine as variants. Название команды может зависеть от языка интерфейса.
- Назовите набор Button. У набора настройте свойства Size и State, а у каждого варианта задайте нужные значения.
- Создайте отдельный экземпляр набора на рабочем фрейме и переключите свойства в панели экземпляра.
Главные компоненты должны оставаться связанными вариантами внутри одного набора. Если вместо экземпляра вы редактируете исходный компонент, проверяется другое действие. Полезно держать рядом отдельный тестовый фрейм с экземплярами и подписанными комбинациями.
Одинаковые имена и типы вложенных слоёв помогают сохранять пользовательские изменения при переключении вариантов. Например, Label во всех вариантах должен оставаться текстовым слоем с ожидаемым назначением. Разная вложенность или случайные названия затрудняют перенос overrides.
Проверьте текст, иконки и изменение размера
В экземпляре замените подпись на «Сохранить изменения», затем переключите S на M и Default на Disabled. Проверьте, что текст сохраняется и помещается, а высота и внутренние отступы соответствуют выбранному размеру.
Auto Layout управляет расположением содержимого, а variants выбором связанного варианта. Эти механизмы дополняют друг друга. Одно наличие вариантов не заставляет кнопку автоматически растягиваться под длинную подпись.
Если подпись сбрасывается, сравните имена, типы и структуру слоёв у исходных вариантов. Если текст обрезается, проверьте настройки ширины, переносов и внутренние отступы. Не исправляйте каждую копию отдельно: сначала найдите ошибку в главном компоненте.
Свойство Disabled в Figma описывает дизайн. Оно само по себе не превращает кнопку на сайте в отключённый HTML-элемент и не настраивает клавиатурную навигацию. Эти требования нужно отдельно передать разработчику и проверить в реализации.
Критерии готовности небольшого набора
- У каждой комбинации Size и State только один вариант.
- Названия свойств понятны без чтения внутренней структуры.
- Короткая и длинная подписи корректно выглядят в обоих размерах.
- При переключении вариантов сохраняются ожидаемые изменения экземпляра.
- Состояния и ограничения описаны так, чтобы их можно было реализовать в интерфейсе.
В качестве упражнения добавьте состояние Loading и решите, сохраняется ли ширина кнопки во время загрузки. Не создавайте его только изменением цвета: определите содержание, поведение индикатора и доступность действия.
Такой набор можно развивать на курсе по Figma. Для разбора с наставником по Figma подготовьте набор и экземпляр, на котором теряется текст или ломается размер. Это даст конкретный предмет обсуждения вместо общей просьбы «проверить макет».
