Как в Figma сделать анимированный снежный шар

Figma — один из самых удобных инструментов для создания прототипов. Благодаря ему вы можете показать клиенту, как будет работать приложение, а разработчикам — интерактивные элементы. В этой инструкции рассказываем, как с помощью стандартных функций прототипирования и плагина Fizzy сделать анимированный снежный шар.

Стеклянный шар

• Создайте круг с размером примерно 548×548 пикселей. Затем в боковой панели настроек в блоке Effects нажмите плюсик и вместо Drop shadow выберите Inner shadow.
• Нажмите иконку . В появившемся меню укажите X — 24, Y — 26, Blur — 0, Spread — 15. Цвет заливки — #FFFFFF с непрозрачностью 25%. Затем в блоке Fill укажите непрозрачность 1%.
• Кликните на этот круг правой кнопкой мыши и выберите Frame selection. Выделите появившийся фрейм и в боковой панели настроек в блоке Frame укажите скругление углов 600 и поставьте галочку около Clip content.
• У того же фрейма в боковой панели в блоке Stroke нажмите плюсик и укажите цвет — #FFFFFF с непрозрачностью 25%, вместо Inside укажите Outside, толщина — 10 пикселей.

Графика внутри шара

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

Анимированный снег

• Сделайте квадрат, который полностью перекроет ваш снежный шар.
• Уберите квадрат от шара, чтобы он вам не мешал. Затем нажмите на квадрат правой кнопкой мыши, выберите Plugins и нажмите Fizzy.
• В появившемся окне укажите Quantity 100, Min 10, Max 15 и оставьте только один цвет. У вас должна получиться композиция из маленьких кружков — это и будет ваш снег. Если вам не нравится результат, попробуйте поиграть с настройками в Fizzy.
• Выделите получившуюся композицию, нажмите по ней правой кнопкой мыши и выберите Frame selection. Затем в боковой панели в блоке Selection colors вместо цвета из Fizzy укажите #FFFFFF. На верхней панели нажмите , чтобы сделать компонент.
• Внутри компонента выберите все белые кружки, которые образуют снег, и сгруппируйте их. Затем скопируйте группу 3–4 раза и поставьте копии по горизонтали одну за другой. Важно, чтобы в видимой части фрейма оказалась нижняя часть получившейся конструкции.
• Нажмите , чтобы сделать вариант компонента. Внутри него передвиньте конструкцию со снегом так, чтобы в видимой части фрейма была верхняя часть.
• В боковой панели настроек нажмите Prototype. Затем наведите курсор на первый компонент, зажмите появившийся кружок и перетащите его на следующий слой — второй вариант текста. Должна появиться стрелка.
• В появившемся окне в блоке Animation вместо On click укажите After delay и поменяйте продолжительность на 1 ms. Вместо Instance укажите Smart Animation, вместо Ease in — Liner. Продолжительность — 10 000 ms.
• Сделайте то же самое с другим компонентом. В блоке Animation вместо On click укажите After delay и поменяйте продолжительность на 1 ms. Тип анимации оставьте Instance.
• Скопируйте компонент со снегом во фрейм шара. Затем поместите получившуюся конструкцию в другой фрейм — например, с размером iPhone 14.
• Нажмите кнопку Play в верхнем левом углу и проверьте результат.

Результат:

Самоучитель по Figma

Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.

Как в Figma сделать что угодно

Каталог эффектов в Figma, которые помогут сделать ваш проект интереснее.