Рецепт: Анимация переключателя в Фигме

Как анимировать переключатель в Фигме за 11 минут: рецепт Никиты Бабаева

Читайте рецепт: https://bureau.ru/soviet/20230524/
Предложите свой рецепт: https://bureau.ru/soviet/become-recipe-author/

Рецепты — это пошаговые инструкции, как сделать анимацию, трёхмерный объект, реалистичную текстуру и другие красивые штуки. Рецепты выходят раз в две недели по средам.

00:00 Результат
00:05 Создайте новый файл.
00:09 Создайте фрейм. Зажмите F, левой кнопкой мыши кликните по рабочей области и, не отпуская, потяните в сторону. Задайте размеры фрейму.
00:22 Создайте направляющие. Сочетанием Shift + R включите линейки. Подведите курсор мыши к линейке на краю рабочего поля. Установите две вертикальные направляющие. Создайте горизонтальную направляющую по центру.
00:58 Нарисуйте границы переключателя. Зажмите R, левой кнопкой мыши кликните по рабочей области и, не отпуская, потяните в сторону. На правой панели свойств задайте размеры, скругления и цвет. Расположите прямоугольник по центру фрейма.
01:14 Сделайте фон переключателя. Нажмите O, левой кнопкой мыши кликните по рабочей области, зажмите Shift и, не отпуская, потяните в сторону. Выделите круг и скопируйте его. Повторите. Кругам на правой панели свойств задайте размеры 140, 100 и 70 пикселей. Измените их значения Fill как на видео. Выделите круги и, в правой панели свойств, выровняйте их по центру вертикально и горизонтально. Клавишами Ctrl/⌘ + G сгруппируйте. Нарисуйте два круга размером 50 пикселей. Второму задайте цвет. Скопируйте второй круг. Новому кругу измените цвет. Расположите его так, чтобы не перекрытая часть второго круга приобрела форму полумесяца. Переместите первый круг так, чтобы полумесяц полностью его закрывал. При совпадении их контуров круг сам «прилипнет» к границам фигуры. Выделите круги и клавишами Ctrl /⌘ + Option/Alt + M создайте маску. Поместите полумесяц в центр пересечения направляющих. Создайте несколько маленьких кругов размерами от 5 до 8 пикселей и расположите их вокруг полумесяца. Измените их цвет. Выделите их и объедините в группу. Создайте три круга белого цвета размерами 20, 30 и 40 пикселей. Расположите их в форме облака. Нижнюю часть облака дополните прямоугольником. Выделите фигуры. В верхней панели нажмите Boolean groups и выберите Union selection.
04:51 Нарисуйте ползунок слайдера. Создайте круг размером 80 пикселей. В правой панели во вкладке Fill кликните по квадратику возле значения цвета. Над палитрой нажмите Solid. Выберите Linear. Кликая по квадратикам цвета над полосой градиента, установите левому HSB «0 0 100 100», а правому — «0 0 82 100». Перетяните точки отрезка над кругом левой кнопкой мыши так, чтобы градиент стал горизонтальным. Выделите круг. Скопируйте его. В палитре градиента измените левый цвет на HSB «0 0 90 100», а правый на HSB «0 0 100 100». Выделите оба круга. В правой панели сверху выровняйте их по вертикали и горизонтали. Сгруппируйте их. В правой панели поверните группу на −30 градусов. Перетащите группу кругов так, чтобы их центр совпал с центром пересечения левой вертикальной и горизонтальной направляющих. Расположите облако слева от переключателя.
06:30 Объедините все элементы переключателя. Выделите нижнее поле переключателя и скопируйте его клавишами Ctrl/⌘ + C. Вставьте клавишами Ctrl/⌘ + V. Выделите созданную фигуру, слайдер, облако, круги фона, полумесяц и звезды и нажмите Ctrl/⌘ + Option/Alt + M. Выделите слайдер и сочетанием клавиш Ctrl/⌘ + ] переместите его поверх фона. В правой панели во вкладке Effects кликните по знаку +. Нажав на иконку «солнышка», раскройте вкладку Drop shadow. Введите значения X и Y «4» и 20% прозрачности. Выделите нижнее поле переключателя и добавьте ему тень с теми же параметрами.
07:35 Настройте анимацию. Выделите фрейм с переключателем и скопируйте его клавишами Ctrl/⌘ + C. Вставьте копию клавишами Ctrl/⌘ + V. Во втором фрейме наведите курсор на звезду и кликните левой кнопкой мыши. Перетащите звезды за правую границу маски. Кликните левой кнопкой мыши по группе маски и перетащите ползунок направо, а фон и полумесяц — налево. Кликните левой кнопкой мыши по группе полумесяца и перетащите верхний круг за границы переключателя. Выделите облако и поместите его перед кругами. Выделите нижнее поле переключателя и задайте ему цвет 98E0FD. Последовательно выделяя круги, задайте им цвета как на видео. Кругу за пределами маски измените цвет на E0F4FE. Выделите первый фрейм. В правой панели сверху выберите Prototype. Во вкладку Interactions нажмите на +. Нажмите Click. Разверните вкладку On click. В открывшемся списке выберите Navigate to. Справа от Navigate to выберите из списка Frame 2. Разверните свиток под Animation и кликните Smart animate. Внизу нажмите Ease out и выберите Custom bezier. Поняните за управляющие кривой и придайте ей форму волны. Установите длительность анимации в 800ms. Выделите второй фрейм и повторите во вкладке Prototype все то же самое, но в поле Interactions details выберите первый фрейм. В правом верхнем углу нажмите кнопку Present.
Готово!

Видео Рецепт: Анимация переключателя в Фигме канала Бюро Горбунова