Коротко
Кнопка с состояниями в Morfa — это компонент с набором вариантов: оберните подпись в автолейаут (⇧A), создайте компонент (⌥⌘K), добавьте свойство «Состояние» со значениями «Обычная», «Наведение», «Нажата», «Фокус», «Отключена» и при желании второе свойство, например «Вид».
В прототипе hover и нажатие делаются действием «Изменить на» с триггерами «При наведении» и «При удержании». В коде состояния становятся :hover, :active, :focus-visible и :disabled.
Шаг 1. Соберите кнопку на автолейауте
Кнопка должна расти вместе с подписью, поэтому её собирают на автолейауте, а не рисуют прямоугольником под текстом.
Напишите подпись
Инструментом «Текст» (T) напишите «Сохранить». Шрифт выберите из каталога, например Inter.
Оберните её в автолейаут
Выделите текст и нажмите ⇧A. Редактор обернёт его во фрейм с автолейаутом.
Задайте отступы и размер
В разделе «Автолейаут» задайте отступы, например 10 px сверху и снизу и 16 px по бокам. В размерах оставьте «Обтянуть»: кнопка будет подстраиваться под длину подписи.
Добавьте заливку и скругление
В разделе «Заливка» выберите цвет, в поле «Скругление» задайте радиус, например 8 px. Переименуйте фрейм в «Кнопка» (⌘R).
Шаг 2. Превратите фрейм в компонент
Копии обычного фрейма между собой не связаны. Компонент — это образец, а его экземпляры на экранах повторяют все правки образца.
Создайте компонент
Выделите фрейм «Кнопка» и нажмите ⌥⌘K («Создать компонент»). Во вкладке «Дизайн» появится раздел «Компонент».
Опишите его
В поле описания напишите, где кнопка используется. Описание увидят коллеги, которые будут брать её в макеты, и разработчик.
Шаг 3. Как сделать состояния кнопки: hover, нажатие, фокус
Состояния — это варианты одного компонента, а «Состояние» — свойство типа «Вариант». С первым таким свойством компонент становится «Набором вариантов».
Добавьте свойство «Вариант»
В разделе «Компонент» у строки «Свойства» нажмите «+» и выберите «Вариант». Компонент превратится в «Набор вариантов» со свойством «Свойство 1».
Назовите свойство и первое значение
Сразу откроется окно свойства (позже его открывает нажатие на строку свойства). Впишите название «Состояние», а значение «Вариант 1» замените на «Обычная».
Добавьте варианты
Нажмите «Добавить вариант» под списком свойств. Появится копия первого варианта, и она сразу выделена: в разделе «Вариант» задайте ей «Состояние» — «Наведение». Повторите для «Нажата», «Фокус» и «Отключена».
Нарисуйте каждое состояние
Для «Наведение» и «Нажата» затемните заливку, для «Фокус» добавьте заметную обводку или тень с разбросом, для «Отключена» сделайте заливку серой, а текст бледным.
Если у вас уже есть отдельные компоненты кнопок, их можно не пересобирать. Назовите каждый по схеме «Состояние=Наведение», выделите все и выберите «Объединить как варианты»: свойства и значения возьмутся из названий.
Шаг 4. Второе свойство: «Вид» кнопки
Основная и контурная кнопка — тоже варианты, только по другому свойству. Название свойства и значения выбираете вы. В примере ниже это «Вид» со значениями «Основная» и «Контурная».
Добавьте свойство к набору
Выделите «Набор вариантов», снова нажмите «+» у «Свойств» и выберите «Вариант». Назовите свойство «Вид», значение у существующих вариантов — «Основная».
Сделайте контурные варианты
Выделите вариант «Обычная» и в меню «…» раздела «Вариант» выберите «Добавить вариант». Копии задайте «Вид» — «Контурная», уберите заливку и добавьте обводку. Повторите для остальных состояний.
Проверьте сочетания
Каждое сочетание значений «Вид» и «Состояние» должно встречаться один раз. Если у двух вариантов значения совпали, раздел «Набор вариантов» покажет предупреждение.
Шаг 5. Подпись и иконка в свойствах
Подпись и иконку выносят в свойства компонента. Тогда их меняют прямо в экземпляре, не отсоединяя его.
Свойство «Текст» для подписи
Нажмите «+» у «Свойств», выберите «Текст» и в окне свойства нажмите «Привязать слой» → слой подписи.
«Логическое» для иконки
Добавьте свойство типа «Логическое» и привяжите к нему слой иконки: в экземпляре появится переключатель, который показывает и прячет иконку.
«Замена экземпляра» для другой иконки
Если иконка — экземпляр своего компонента, свойство «Замена экземпляра» позволит подставить в кнопку другую иконку.
Шаг 6. Экземпляры кнопки на экранах
Экземпляр следует за компонентом: правка образца обновляет все кнопки в файле, а изменения в конкретном экземпляре остаются его переопределениями.
Поставьте экземпляр
В меню «…» раздела «Набор вариантов» выберите «Создать экземпляр». Экземпляр появится рядом с набором, его можно перенести на нужный экран.
Переключайте вариант
В разделе «Экземпляр» выберите «Вид» и «Состояние» из списков, например «Контурная» и «Отключена».
Меняйте подпись
Подпись и переключатель иконки — там же, в разделе «Экземпляр».
Шаг 7. Hover и нажатие в прототипе
Кнопка в прототипе меняет вид действием «Изменить на», которое переключает вариант. Взаимодействия добавляют вариантам в наборе, и их получают все экземпляры кнопки. Подробнее о триггерах и переходах — на странице про прототипы.
Выделите вариант «Обычная»
Выберите в наборе основной вариант в состоянии «Обычная» и откройте вкладку «Прототип».
Добавьте наведение
В разделе «Взаимодействия» нажмите «+»: триггер «При наведении», действие «Изменить на», вариант — «Наведение». Переход — «Растворение» или «Умная анимация».
Добавьте нажатие
У варианта «Наведение» добавьте триггер «При удержании» и «Изменить на» с вариантом «Нажата».
Повторите для контурной кнопки
Контурным вариантам добавьте такие же взаимодействия, только с контурными вариантами «Наведение» и «Нажата».
Проверьте в плеере
Нажмите ▶ или ⌥⌘↵. Плеер откроется в новой вкладке.
Что получит код
В режиме «Код» (⇧D) и при «Экспорте в React…» кнопка становится React-компонентом. «Вид» превращается в проп с union-типом. Частые русские слова генератор переводит: «Вид» — kind, «Основная» — primary, «Контурная» — outline. «Состояние» в пропсы не попадает: наведение, нажатие и фокус браузер показывает сам через CSS, а «Отключена» становится обычным атрибутом disabled у <button>.
В коде экрана экземпляр такой кнопки выглядит примерно так: <Button kind="outline" disabled>Сохранить</Button>. Если цвета кнопки привязаны к переменным, на тёмном фрейме она возьмёт тёмные значения: как это настроить, описано в гайде про тёмную тему.
export type ButtonProps = ComponentPropsWithRef<'button'> & {
/** «Вид»: 'primary' — «Основная», 'outline' — «Контурная» */
kind?: 'primary' | 'outline';
};
export function Button({kind = 'primary', children, className, ...props}: ButtonProps) {
return (
<button type="button" className={cx(styles.root, className)} data-kind={kind} {...props}>
<span className={styles.label}>{children}</span>
</button>
);
}
.root[data-kind='outline'] {
background: none;
box-shadow: inset 0 0 0 1px #333333;
}
.root[data-kind='primary']:hover:not(:disabled) {
background: #1A1A1A;
}
.root:focus-visible {
box-shadow: 0 0 0 3px #0066FF;
}
.root[data-kind='primary']:active:not(:disabled) {
background: #0D0D0D;
}
.root:disabled {
background: #D9D9D9;
cursor: not-allowed;
}
Частые ошибки
Чаще всего кнопка ломается не в редакторе, а в мелочах сборки: в размерах, названиях и месте, куда добавлены взаимодействия.