Перейти к основному содержимому

Вопрос-ответ Дизайн и UX

Как сделать анимацию сайта в Figma?

Марина, Воронеж 1,8 тыс. просм.

Готовлю прототип сайта для презентации заказчику и хочу показать не статичные картинки, а живое поведение - как открывается меню, как выезжают карточки. Слышала, что в Figma это можно сделать без кода, но не понимаю, с чего начать.

Елена Захарова UI/UX-дизайнер

ответил

эксперт

В Figma анимацию делают через Smart Animate: создаёте два одинаковых фрейма с разным состоянием элемента (например, меню закрыто и меню открыто), соединяете их стрелкой-переходом в режиме прототипирования и выбираете Smart Animate вместо простого перехода - Figma сама плавно анимирует изменения позиции, размера и прозрачности между кадрами.

Для интерфейсных элементов вроде выпадающих списков или переключателей удобнее Interactive Components - компонент сам помнит состояния (открыт, закрыт, наведение, нажатие) и переключается по клику без ручной сборки лишних фреймов. Для карточек, которые выезжают на экран, задайте направление и easing (плавность разгона и торможения) во вкладке Prototype справа.

Держите в голове важную вещь: то, что вы соберёте в Figma, работает только внутри самой Figma или в презентационном режиме для показа заказчику. Это не код и не готовая анимация сайта - когда макет утверждён, разработчик пересобирает поведение заново на CSS-переходах или JavaScript, ориентируясь на прототип как на референс, а не копируя его напрямую.

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

Подробный разбор Анимации на сайте: где помогают, а где мешают продажам
Все вопросы темы

Задать свой вопрос

Вопросы проходят модерацию. Ответ специалиста студии публикуется на сайте в течение пары дней.

Похожие вопросы

Все вопросы темы «Дизайн и UX»

Нужен сайт или доработка?

Опишите, что нужно сделать. Вернёмся с расчётом и предложением по структуре.