Варианты и свойства кнопки
Курс «Макет учебного портала в Figma»
Основной компонент кнопки объединяет повторяющиеся элементы портала «Маршрут», но одной разновидности недостаточно. «Начать урок» должно выделяться сильнее, чем «Все курсы», а недоступное действие должно отличаться от обычного. Если задавать эти различия локальными цветами, основной компонент постепенно перестанет объяснять, какие состояния предусмотрены проектом.
Добавим варианты и свойства. Вариант задаёт устойчивое различие устройства или оформления, а свойство позволяет менять предусмотренную часть экземпляра. Наша цель — оставить понятный выбор в панели, чтобы человек мог выбрать состояние кнопки, не изучая каждый вложенный слой и не отсоединяя экземпляр.
Две независимые оси
Создайте рядом с основным Button копию компонента для второстепенного действия. У неё светлый фон, граница border/default и текст action/primary. Выберите оба компонента и объедините в component set. Назовите набор Button, а свойство разновидности — Kind со значениями primary и secondary.
Теперь добавьте свойство State со значениями default и disabled. Для простого учебного набора понадобятся четыре сочетания. У недоступного состояния используйте нейтральные цвета и сохраните надпись. Не делайте кнопку полностью прозрачной: она должна сообщать, что действие существует, но сейчас не выполняется. Причину недоступности объясняет окружающий текст, а не только ослабленная заливка.
| Kind | State | Назначение |
|---|---|---|
| primary | default | Основное доступное действие блока |
| secondary | default | Дополнительный переход |
| primary | disabled | Основное действие при невыполненном условии |
| secondary | disabled | Недоступное дополнительное действие |
Не добавляйте ещё одну ось Text, где значениями станут «Открыть курс», «Начать урок» и «Все курсы». Текст не требует отдельного варианта, если устройство кнопки не меняется. Иначе любое новое действие будет увеличивать число компонентов, хотя различается только строка. Для содержания применим text property.
Для каждого варианта проверьте одинаковую область нажатия, а не только видимую заливку. Тонкая второстепенная кнопка может выглядеть изящно, но случайное сокращение вертикальных полей сделает её менее удобной. В макете размер области выражает фрейм экземпляра; в реализации потребуется семантический интерактивный элемент. У состояния focus обводка должна быть видна на фоне и не скрываться обрезкой родителя. Поэтому сохраните рядом контрольный образец в карточке, а не только изолированный компонент на белом холсте.
Текстовое свойство
В основном компоненте выберите Label и создайте текстовое свойство Label с исходным значением «Открыть курс». Примените его к соответствующему слою других вариантов. После выбора экземпляра поле должно быть доступно прямо в панели свойств. Установите для кнопки на странице курса значение «Начать урок» и убедитесь, что разновидность по-прежнему primary.
Текстовое свойство делает редактируемую поверхность явной. Человеку не нужно находить вложенный слой двойным щелчком и гадать, какой текст допустимо менять. Возможности Boolean, Instance swap, Text и Variant описаны в документации свойств компонентов Figma. Для нашего результата достаточно текста и двух осей вариантов.
Если внутри кнопки есть стрелка, добавьте boolean property Show icon, связав его с видимостью TrailingIcon. Выключите его в одном экземпляре. При корректном Auto Layout лишний промежуток исчезнет вместе со скрытым слоем. Если он остался, проверьте, не представлен ли промежуток отдельным объектом вместо настройки контейнера.
Boolean отвечает на вопрос о наличии элемента, а не выбирает один из нескольких значков. Для выбора разных значков существует instance swap у вложенного компонента. В нашем проекте достаточно одной простой стрелки; добавлять полный набор иконок сейчас не требуется. Свойство должно обслуживать реальную потребность экрана, а не демонстрировать все возможности редактора одновременно.
Состояние макета и поведение продукта
Вариант disabled — визуальная спецификация. Он сам по себе не делает HTML-кнопку недоступной и не блокирует обработчик в будущем приложении. Разработчику потребуется получить соответствующее состояние данных и семантический атрибут. Поэтому в описании компонента укажите: «Недоступное действие; причина показана рядом; взаимодействие не выполняется».
В открытом каталоге наших курсов основное действие доступно всегда. Недоступный вариант оставляем как учебный образец для случая, когда материал готовится к выпуску. Не назначайте его случайным карточкам ради разнообразия дизайна: тогда интерфейс сообщает новое условие, которое не было предусмотрено брифом. Состояния должны соответствовать данным.
Добавьте отдельный образец focus для обсуждения клавиатурной навигации: заметная внешняя обводка вокруг кнопки, не меняющая её внутренние размеры. Его можно хранить как дополнительный вариант или подписанный эталон. В дальнейшем реализации важно сохранить видимый фокус. Одного hover недостаточно для пользователя, который переходит между действиями с клавиатуры.
Мы не будем связывать здесь все состояния интерактивного компонента. Это отдельная задача прототипирования. Сейчас важнее состав набора и правила выбора. Иначе можно получить красивую анимацию, в которой недоступная кнопка всё равно ведёт на следующий экран. Визуальное состояние и действие должны быть согласованы, но выражаются разными настройками.
Рассмотрите задачу редактора страницы: ему нужно изменить «Открыть курс» на «Начать урок», сохранив основное действие. Для этого достаточно свойства Label; выбор нового Kind был бы лишним изменением. Если требуется показать недоступное действие, редактор меняет State, оставляя название того же действия. Такое разделение делает сочетания предсказуемыми. Названия свойств должны описывать решения, доступные потребителю компонента. Внутренние имена вроде BlueButton2 говорят об устройстве файла, но не помогают выбрать смысловой вариант на экране.
Согласованная структура вариантов
Откройте каждый вариант и сравните порядок Label и TrailingIcon, названия слоёв, направление Auto Layout и padding. Различия цвета допустимы по назначению, а случайные изменения структуры затруднят поддержку. Если в одном состоянии надпись находится внутри дополнительной группы, простая редакция основы станет менее предсказуемой.
Проверьте длинную надпись в обоих доступных видах кнопки. Она должна сохранять одинаковые внутренние отступы, хотя фон и граница различаются. Цветовое отличие не оправдывает внезапно другую высоту. Если второстепенная кнопка скачет при переключении Kind, ищите разницу в размере текста, padding или толщине границы.
Сохраните на странице компонентов четыре образца и короткую таблицу назначения. В рабочих экранах выберите предусмотренные Kind и State через свойства экземпляра. Ожидаемый результат — управляемый набор, который не требует ручной перекраски на каждом экране. Он описан для самостоятельного воспроизведения; файл Figma и взаимодействия при подготовке не проверялись.
Теперь кнопка готова стать частью карточки курса. На следующем шаге объединяем заголовок, описание, метаданные и действие в вертикальный контейнер. Система компонентов проявит пользу: мы будем решать поведение карточки, сохраняя уже заданное устройство кнопки.