Откройте Фигму. Нажмите New Design File:

Чтобы создать фрейм, зажмите F, левой кнопкой мыши кликните по рабочей области и, не отпуская, потяните в сторону:

Нажмите T. Кликните левой кнопкой мыши по рабочему полю и наберите «Primary». В правой панели в блоке Text наведите курсор на поле с названием шрифта. Кликните на появившуюся стрелочку в правом углу и раскройте список. Выберите подходящий шрифт:

В правой панели в блоке Text нажмите на кнопку Auto width. Размер шрифта установите «32»:

Левой кнопкой мыши выделите текст. Зажмите Option/Alt и, не отпуская левой кнопки мыши, потяните в сторону. Так вы скопируете объект:

Кликнув два раза левой кнопкой мыши по тексту, введите «hover»:

Копируя текст, создайте таблицу. Чтобы выровнять слова, выделите их левой кнопкой мыши с зажатым Shift. Для выравнивания по левому краю в правой панели свойств кликните Align left. Чтобы сделать равные расстояния между словами, раскройте крайний правый список и выберите нужный пункт:

В правой панели выберите Local variables:

Нажмите Create variables. Кликните на плюсик и добавьте еще три переменных Color:

Кликните правой кнопкой мыши по переменной и выберите New group with selection. Перетащите переменные в группу:

Двойным кликом по названию группы переименуюте ее в «Control». Внутри группы еще раз сгруппируйте все переменные. Правой кнопкой нажмите на группу и выберите Duplicate group. Повторите последнее действие еще раз:

Переименуйте группы внутри Control в «Primary», «Secondary» и «Disabled». Дважды нажав на плюсик справа в верхней строке таблицы, добавьте две колонки. Назовите их «Light» и «Dark»:

В группе Primary назовите переменные «BG», «BG‑hover», «Typo» и «Typo‑hover»:

В группе Secondary назовите переменные «Border», «Border‑hover», «Typo» и «Typo‑hover»:

В группе Disabled назовите переменные «BG» и «Typo», оставшиеся удалите:

Задайте переменным цвет:

Кликните в левой панели по группе Control. Нажмите внизу на Create variables и добавьте переменную. Назовите ее «BG» и задайте ей цвета в колонках Light и Dark:

Выделите в левой панели фрейм. В правой панели в блоке Fill нажмите на кнопку Libraries. Выберите в списке переменную BG в группе Control:

Нажмите F и создайте небольшой фрейм. В правой панели установите ему высоту «56»:

В правой панели в блоке Fill нажмите на кнопку Libraries. Выберите в списке переменную BG в группе Control/Primary:

Нажмите T и добавьте текст «Button» во фрейм. В правой панели размер шрифта установите «20». Нажмите кнопку Auto width:

Выделите фрейм и текст. В правой панели в блоке Auto layout установите Align center. Горизонтальные отступ установите «16», вертикальные — «8». Расстояние между элементами — «16». В блоке Frame для фрейма установите горизонтальное расстояние «Hug», а вертикальное — «Fixed». Высота — «56»:

В правой панели в блоке Selection colors наведите курсор на строку с цветом и нажмите на иконку с четырьмя точками. Выберите в списке переменную Typo в группе Control/Primary:

Скопируйте кнопку. Высоту кнопки M установите «48», S — «32». Размер шрифта в маленькой кнопке измените на «16»:

Скопируйте кнопки. В правой панели в блоке Fill кликните по компоненту и выберите BG‑hover в группе Control/Primary:

В правой панели в блоке Selection colors кликните по белому компоненту и выберите Typo‑hover в группе Control/Primary:

Скопируйте кнопки из Primary в Secondary. Выделите кнопки Default из этой группы и назначьте для нее соответствующие переменные в правой панели:

Выделите кнопки Hover в группе Secondary и назначьте для нее соответствующие переменные в правой панели:

Аналогично скопируйте и настройте кнопки Disabled, выбирая необходимые переменные в правой панели:

Выделите все кнопки. В правой панели в блоке Frame установите скругление «4»:

Нажмите на кнопку Independent corners. Кликните на три точки под ней и установите Corner smoothing на 60%:

Выделите кнопку. Нажмите Ctrl/Command + Alt + K. Повторите с каждой кнопкой:

Выделите все кнопки. В правой панели в блоке Components нажмите Combine as variants:

Кликните по свойству и переименуйте его в «View»:

Выделите кнопки в группе Primary. В правой панели в блоке Current variant переименуйте значение view в «Primary»:

Аналогично переименуйте значение view у кнопок Secondary и Disabled, соответственно, в «Secondary» и «Disabled»:

Выделите компонент с кнопками. В правой панели в блоке Properties нажмите плюс и выберите Variant:

Переименуйте значение Name в «Size» и Value в «L». Нажмите Create property:

Выделите все кнопки M. В правой панели в блоке Current variants переименуйте значение Size в «M». Повторите для кнопок S, но в Size введите «S»:

Выделите компонент с кнопками. В правой панели в блоке Properties нажмите плюс и выберите Variant:

Переименуйте значение Name в «Hover» и Value в «False». Нажмите Create property:

Выделите все кнопки Hover. В правой панели в блоке Current variants переименуйте значение Hover в «True»:

Выделите компонент с кнопками. В правой панели в блоке Properties нажмите плюс и выберите Variant:

Переименуйте значение Name в «Disabled» и Value в «False». Нажмите Create property:

Выделите все кнопки Hover. В правой панели в блоке Current variants переименуйте значение Disabled в «True»:

Выделите фрейм и дважды кликните по его названию в левом верхнем углу. Переименуйте в «Light». Компонент переименуйте в «Buttons»:

Скопируйте фрейм. Выделите новый фрейм и в правой панели в блоке Layer нажмите на иконку справа. Выберите Collection 1 и переключите на Dark:

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

Выделите кнопку. В правой панели выберите вкладку Prototype:

Потяните стрелочку левой кнопкой мыши от кнопки Default к кнопке Hover. Вверху всплывающего окна раскройте список и выберите While hovering:

Значение Instant измените на Dissolve:

Повторите со всеми кнопками:

Выделив кнопку, вы можете менять ее состояние, тип и размер, переключая их на правой панели в блоке Buttons:

При перетаскивании кнопки во фрейм с режимом Dark она автоматически изменит свои свойства:

Подписывайтесь, чтобы не пропустить следующие рецепты: