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

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

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

Выделите звезду и нажмите Ctrl/Command + E. Из текстовой она станет векторной. В правой панели задайте ей размеры 61 × 55. Выровняйте по центру звезду, нажав Alt/Option + H и Alt/Option + V:

Задайте цвет звезде. Она будет элементом в неактивном состоянии. В правой панели в блоке Fill введите «E6E6E6 »:

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

Задайте цвет и обводку звезде. Она будет элементом в состоянии Hover. В правой панели в блоке Fill введите «FFFFFF ». В блоке Stroke кликните на плюс справа. Цвет установите «FFB800». Кликните на Outside и измените тип обводки на Inside. Толщину установите «5»:

Нажмите T. Кликните левой кнопкой мыши по второму фрейму и наберите символ «☆» тем же шрифтом, что и первую звезду. Нажмите Ctrl/Command + E и сделайте её векторной. В правой панели задайте ей размеры 27× 24:

Выделите звезду. В правой панели в блоке Fill введите «FFB800 »:

Выровняйте по центру звезду, нажав Alt/Option + H и Alt/Option + V. В левой панели слоев перетащите её вниз:

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

Выделите нижнюю звезду. Она будет элементом в активном состоянии. В правой панели задайте ей размеры 174× 151. Выровняйте по центру звезду, нажав Alt/Option + H и Alt/Option + V:

Выделите верхнюю звезду. В правой панели в блоке Fill введите «FFB800 ». В блоке Stroke кликните на минус справа:

В правой панели задайте ей размеры 72× 65. Выровняйте по центру звезду, нажав Alt/Option + H и Alt/Option + V:

Выделите нижнюю звезду. Сделайте ее прозрачной, кликнув 00:

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

Выделите верхнюю звезду. Она будет элементом в нажатом состоянии. В правой панели задайте ей размеры 61× 55. Выровняйте по центру звезду, нажав Alt/Option + H и Alt/Option + V:

Выделите левый фрейм и дважды кликните по его названию в левом верхнем углу. Переименуйте в «Default». Названия остальных измените на «Hover», «Active» и «Complete»:

Выделите все фреймы на рабочем поле. Кликните по стрелочке у иконки компонентов в верхней панели и выберите Create components set:

В правой панели сверху кликните Prototype. Подведите курсор к правому краю первого фрейма. Прицельтесь на появившийся плюсик, зажмите левую кнопку мыши и, не отпуская, потяните ко второму фрейму. В появившемся всплывающем окне кликните на On Click и выберите While hovering. Instant замените на Dissolve. Справа от Ease out в поле ввода впишите «500»:

Сделайте то же самое со вторым фреймом. В появившемся всплывающем окне Instant замените на Smart animate. Справа от Ease out в поле ввода впишите «500»:

Сделайте то же самое с третьим фреймом. В появившемся всплывающем окне кликните на On Click и выберите After delay:

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

Левой кнопкой мыши выделите компонент. Зажмите Alt/Option и, не отпуская левой кнопки мыши, потяните вправо. Кликните 4 раза Ctrl/Command + D Так вы скопируете компонент:

Выделите компоненты. Нажмите Shift + A. Чтобы просмотреть результат, нажмите Ctrl/Command + Alt/Option + Enter:

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