Figma Motion + AI: 10 промптов, которые оживят макет и усилят портфолио

Figma Motion на момент написания находится в открытой бете. Интерфейс, доступность функций и ограничения могут меняться.

## Что такое Figma Motion и чем он отличается от Smart Animate

Под словом «анимация в Figma» теперь могут подразумевать три разных инструмента. Их полезно разделить до начала работы.

### Smart Animate — переход между состояниями

Smart Animate сравнивает совпадающие слои в двух фреймах или вариантах компонента и анимирует изменения между ними. Он учитывает имена слоёв и их положение в иерархии, а затем интерполирует поддерживаемые свойства: позицию, размер, поворот, прозрачность, заливку и другие визуальные различия.

Это хороший выбор для:

• перехода между двумя экранами;
• раскрытия карточки;
• переключателя, таба или чекбокса;
• простого hover-состояния;
• появления панели или изменения layout;
• кликабельного прототипа, где важен сценарий.

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

### Figma Motion — анимация внутри дизайна

Figma Motion добавляет в дизайн-файл полноценный timeline. На нём можно использовать готовые пресеты, ставить keyframes вручную, включать auto-keyframe, настраивать easing, редактировать путь движения и собирать переиспользуемые анимированные компоненты.

Это уже ближе не к прототипированию экранов, а к motion-редактору внутри Figma.

Figma Motion подходит для:

• hero-анимаций и заставок;
• появления интерфейса по слоям;
• анимированных графиков и инфографики;
• рекламных и портфельных роликов;
• демонстрации продукта;
• сложных микроанимаций компонентов;
• единых motion-паттернов для дизайн-системы.

Готовую анимацию можно экспортировать в MP4, WebM, GIF или SVG. Экспортируется верхнеуровневый frame с анимированными слоями; разрешение выше 1920 × 1080 или частота выше 30 FPS требуют платного плана. Для портфолио это особенно удобно: не нужно записывать экран или переносить простой кейс в After Effects только ради одного короткого лупа.

### Prototype — логика взаимодействия

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

Проще запомнить так:

• Prototype отвечает: что происходит после действия пользователя.
• Smart Animate отвечает: как перейти из состояния A в состояние B.
• Figma Motion отвечает: как движение развивается во времени внутри кадра или компонента.

В сильном демонстрационном макете эти слои могут работать вместе, но не обязаны. Иногда короткий motion-ролик объясняет идею лучше кликабельного прототипа. Иногда наоборот: анимация не нужна, если важнее проверить логику сценария.

## Почему motion делает портфолио сильнее

Движение не спасёт слабую работу, но способно гораздо точнее показать сильную.

### Статика показывает результат, motion — решение

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

Для нанимающего дизайнера или арт-директора это важная разница. Он оценивает не только вкус, но и способность мыслить состояниями, приоритетами и причинно-следственными связями.

### Работа быстрее цепляет внимание

Портфолио смотрят быстро. Хороший короткий луп в начале кейса способен за несколько секунд передать характер продукта и заставить остановиться. Но движение должно показывать главную идею, а не быть заставкой ради заставки.

### Проще объяснить сложные сценарии

Вместо ряда из шести почти одинаковых экранов можно показать один переход: фильтр применился, список перестроился, изменившиеся данные подсветились, фокус сохранился. Читателю не приходится искать отличия глазами.

### Видно, что дизайн готов к разработке

Если рядом с роликом есть короткое описание цели, timing, easing и поведения при reduced motion, видно, что движение продумано как часть продукта, а не добавлено для презентации.

### Что положить в кейс

Минимальный motion-блок в портфолио:

1. Короткий луп на 3–8 секунд с одной идеей.
2. Подпись, какую проблему решает движение.
3. Один фрагмент timeline или схема ключевых состояний.
4. Пара параметров: длительность, easing, логика stagger.
5. Альтернатива для prefers-reduced-motion, если это продуктовый интерфейс.

Этого достаточно, чтобы показать мышление. Длинный showreel быстрее утомляет, чем объясняет решение.

## Подготовка макета к анимации

AI не отменяет структуру файла. Наоборот: когда агент должен понять, что является главным заголовком, группой карточек или фоном, хаотичные имена слоёв становятся ещё дороже.

### Называйте слои по роли

Hero_Title, Card_01, Chart_Bars, Nav_Active понятнее, чем Frame 482 и Rectangle 19 copy 7.

Smart Animate ищет совпадения по имени и иерархии. Figma Agent тоже лучше работает, когда в запросе можно сослаться на конкретный слой или группу.

### Группируйте то, что должно двигаться вместе

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

Структура слоёв — это будущая хореография.

### Отделите системные элементы от контента

Навигация, статус-бар и фон часто должны оставаться на месте, пока контент меняется. Держите их отдельными слоями. Иначе агент или Smart Animate начнут двигать весь экран, хотя смысл был в одном изменившемся блоке.

### Подготовьте состояния

Для интерактивного компонента обычно нужны:

• default;
• hover;
• pressed;
• loading;
• success;
• error;
• disabled.

Не обязательно анимировать все состояния. Но они должны существовать, иначе AI начнёт придумывать визуальную логику за вас.

### Сохраните исходную версию

Перед генерацией дублируйте frame или компонент. Figma Agent позволяет отменить изменения, но сравнивать варианты удобнее рядом, а не через бесконечный Undo.

## Как анимировать макет в Figma Motion: пошаговый процесс

### Шаг 1. Сформулировать функцию движения

До открытия timeline закончите предложение:

Эта анимация помогает пользователю понять, что…

Варианты хорошего ответа:

• выбранный объект переместился в корзину;
• данные обновились, а не загрузились заново;
• карточка раскрылась и сохранила связь с исходным элементом;
• действие принято и сейчас обрабатывается;
• внимание должно перейти от заголовка к главному CTA.

Плохой ответ: «чтобы было живее». Это не функция, а настроение.

### Шаг 2. Выбрать один главный акцент

В каждом коротком фрагменте должен быть главный герой: карточка, график, CTA, продуктовый объект или изменение состояния. Остальные слои помогают считать его движение, но не конкурируют.

Если одновременно выезжает меню, прыгает заголовок, вращается иллюстрация и мигает кнопка, пользователь не понимает, куда смотреть.

### Шаг 3. Начать с пресета или двух ключей

Для первой проверки не нужна сложная кривая. Поставьте начальное и конечное состояние или примените ближайший preset. Посмотрите на композицию в движении.

На этом этапе важно понять:

• правильное ли направление;
• не ломается ли иерархия;
• достаточно ли заметно изменение;
• не перекрываются ли элементы;
• сохраняется ли контекст.

### Шаг 4. Настроить timing

Ниже — практические стартовые диапазоны, а не ограничения или официальные токены Figma. Увеличивайте длительность для крупного объекта и длинной дистанции, уменьшайте — для локальной реакции.

Грубые ориентиры для старта:

• hover и небольшая реакция: 100–160 мс;
• нажатие: 80–100 мс;
• подсказка, меню, небольшой overlay: 160–260 мс;
• переход состояния карточки: 200–350 мс;
• выразительное появление hero-композиции: 450–700 мс;
• задержка между элементами списка: 30–80 мс.

Это не законы. Большой объект обычно требует больше времени, маленькая реакция — меньше. Но если простая кнопка анимируется секунду, интерфейс будет ощущаться медленным независимо от красоты easing.

### Шаг 5. Настроить easing

• Ease out подходит для появления: быстро реагирует, мягко останавливается.
• Ease in — для ухода: объект набирает скорость и освобождает место.
• Ease in-out — для перемещения между равнозначными состояниями.
• Spring — для живой реакции и физических объектов, если bounce оправдан характером продукта.
• Linear — для непрерывного прогресса, вращения и технических циклов.

Пружина на каждой кнопке быстро превращается в визуальный шум. Spring — не синоним «современно».

### Шаг 6. Добавить stagger

Последовательное появление помогает показать порядок чтения. Сначала заголовок, затем пояснение, затем действие. Или сначала оси графика, затем данные, затем подписи.

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

### Шаг 7. Проверить в реальном размере

На большом canvas движение часто кажется медленнее и мягче, чем в реальном мобильном прототипе. Смотрите анимацию в целевом размере и на той скорости, с которой её увидит пользователь.

### Мини-кейс: кнопка «Добавить в корзину»

Перегруженный вариант уменьшает кнопку до 90%, запускает долгий bounce, отправляет изображение товара через весь экран и блокирует интерфейс до завершения. Выглядит заметно, но реакция ощущается медленной.

Спокойный вариант строится так:

1. 0–80 мс — кнопка переходит в pressed через scale 0.98, не меняя layout.
2. 80–220 мс — появляется компактный loading, ширина кнопки сохраняется.
3. После ответа — карточка остаётся на месте, её thumbnail-копия за 280–320 мс движется к корзине как shared element, а badge обновляется за 180 мс через мягкий scale или spring.
4. Success читается по иконке и тексту даже без движения.
5. В reduced-motion перелёт объекта убирается полностью: остаются pressed-feedback и обновление badge через opacity.

Такая анимация не пытается развлечь пользователя. Она последовательно отвечает: нажатие принято, действие выполняется, результат готов.

## Как создавать анимации через Figma Agent

Figma Agent работает прямо в дизайн-файле. Можно выделить frame или несколько объектов, открыть Agents в левой панели, описать движение и получить keyframes на timeline.

Figma Agent находится в бете и разворачивается волнами. Full seat на Professional, Organization или Enterprise позволяет работать в доступных для редактирования дизайн-файлах; View, Dev и Collab seat могут тестировать Agent только в Drafts. Starter, Government и Education пока не поддерживаются.

Официальный motion-workflow Figma описывает генерацию вариантов, перенос стиля и массовое редактирование keyframes через Agent. Прототипные связи, навигацию и overlays всё равно настраивайте и проверяйте отдельно в Prototype.

### Что агент делает особенно хорошо

• Создаёт несколько motion-направлений для сравнения.
• Применяет стиль одной анимации к серии похожих компонентов.
• Меняет easing, timing или stagger сразу в десятках keyframes.
• Анимирует повторяющиеся структуры: списки, карточки, графики.
• Быстро собирает первый черновик, который потом удобно редактировать руками.

### Где нужен человеческий контроль

• Выбор главного акцента.
• Ритм и паузы.
• Уместность bounce и overshoot.
• Соответствие характеру бренда.
• Доступность и reduced motion.
• Реализуемость в продукте.

Агент способен расставить сто ключей за минуту. Это не значит, что сто ключей нужны.

## 10 промптов для анимации интерфейсов в Figma

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

Быстрая навигация: промпт 1 — аудит, 2 — поиск направления, 3–6 — интерфейс и данные, 7 — портфолио, 8–9 — системная работа, 10 — QA.

### Промпт 1. Motion-аудит без изменений

Проанализируй выбранный макет и пока ничего не меняй.

Определи:
1. Какое действие или смысл является главным на экране.
2. Какие 3–5 элементов действительно выиграют от движения.
3. Какие элементы должны оставаться статичными, чтобы не потерять иерархию.
4. Где анимация может объяснить изменение состояния, а где будет только декором.
5. Какие слои нужно переименовать или перегруппировать перед работой в Motion.

Предложи короткий сценарий анимации длительностью не более 3 секунд.

Этот запрос полезен до первой генерации. Он заставляет AI сначала прочитать макет, а не немедленно оживлять всё подряд.

### Промпт 2. Три варианта одного движения

Создай 3 motion-варианта для выбранного frame.

Во всех вариантах:
- сохраняй текущий layout, размеры, тексты, цвета и компоненты;
- не анимируй фон и постоянную навигацию;
- держи общую длительность одинаковой;
- главный акцент должен оставаться на [название главного элемента].

Вариант 1: быстрый и функциональный, почти без overshoot.
Вариант 2: мягкий и премиальный, с более длинным замедлением.
Вариант 3: энергичный, с аккуратным spring только на главном элементе.

Размести варианты рядом и подпиши характер каждого.

Сравнивать три направления обычно быстрее, чем пытаться одним промптом попасть в идеальный характер.

### Промпт 3. Появление интерфейса по иерархии

Добавь последовательное появление элементов в выбранном макете.

Порядок должен соответствовать чтению интерфейса:
1. Контекст или заголовок.
2. Главный контент.
3. Вторичная информация.
4. Основное действие.

Используй небольшое смещение и opacity, без масштабирования всего экрана.
Общая длительность — до 900 мс.
Stagger должен быть заметным, но не создавать ощущение очереди.
Фон, навигацию и системные элементы оставь статичными.

Подходит для dashboard, лендинга, мобильного экрана, карточки кейса и презентации продукта.

### Промпт 4. Микроанимация компонента

Создай микроанимацию для выбранного компонента между состояниями
default, hover, pressed и success.

Требования:
- реакция на hover должна быть лёгкой и длиться 100–160 мс;
- pressed должен давать мгновенное тактильное ощущение без сильного scale;
- success должен ясно подтверждать завершение действия;
- не меняй размеры контейнера и не вызывай layout shift;
- используй единый характер easing во всех состояниях;
- предложи упрощённую версию без перемещения для reduced motion.

Сначала создай один вариант и объясни роль каждого движения.

Замените success на loading, error, selected или другое состояние вашего компонента.

### Промпт 5. Анимация списка или карточек

Анимируй появление элементов выбранного списка как одной системы.

Сохрани порядок чтения и текущий auto layout.
Первый элемент должен появиться без заметной задержки,
остальные — с коротким последовательным stagger.

Не используй разные направления движения для соседних карточек.
Не анимируй текст отдельно от контейнера карточки.
Общая длительность всей последовательности — не более 700 мс.

Если элементов больше восьми, сгруппируй их появление волнами,
чтобы анимация не затягивалась.

### Промпт 6. Motion для графика или данных

Добавь motion к выбранной визуализации данных.

Данные должны раскрываться в направлении, в котором их естественно читают:
- вертикальные значения растут от базовой линии вверх;
- горизонтальные — слева направо;
- круговые значения раскрываются от начальной точки последовательно.

Не анимируй оси, подписи и контейнер так же активно, как сами данные.
Сначала покажи структуру, затем значения, затем акцентируй итог.
Избегай bounce, который искажает ощущение точности данных.

### Промпт 7. Анимация для портфолио

Создай короткий бесшовный motion-loop для презентации этого макета в портфолио.

Цель — за 4–6 секунд показать главную продуктовую идею,
а не все функции экрана.

Выбери одно ключевое действие и построй вокруг него движение:
спокойное начало → понятное изменение → короткая фиксация результата →
возврат к начальному состоянию без заметного скачка.

Не добавляй новые визуальные элементы и не меняй дизайн.
Сохрани читаемость текста и оставь финальное состояние на экране минимум на 700 мс.
Подготовь вариант для экспорта в WebM и MP4.

### Промпт 8. Применить существующий motion-стиль

Используй анимацию компонента [название референсного компонента]
как источник motion-стиля и примени её к выбранным элементам.

Сохрани общие принципы:
- характер easing;
- диапазон длительностей;
- интенсивность смещения и scale;
- правила stagger;
- допустимый bounce.

Адаптируй направление движения к структуре каждого элемента,
но не копируй значения механически, если размеры отличаются.
Не меняй layout, контент, стили и компонентные свойства.

Это основа для motion-системы: один хороший паттерн становится правилом, а не уникальным эффектом на одном экране.

### Промпт 9. Массовая точечная правка

Во всех выбранных анимациях измени только easing на [нужная кривая или spring].

Сохрани без изменений:
- значения всех keyframes;
- их положение на timeline;
- общую длительность;
- порядок stagger;
- motion paths.

Перед применением перечисли, сколько keyframes и frames будет затронуто.
После изменения коротко опиши выполненную правку.

Чем точнее вы перечисляете то, что нельзя менять, тем меньше шанс потерять уже настроенную хореографию.

### Промпт 10. Проверка доступности и качества

Проведи motion-QA выбранной анимации. Ничего не меняй до отчёта.

Проверь:
- помогает ли движение понять изменение состояния;
- нет ли конкурирующих акцентов;
- не задерживает ли анимация основное действие;
- остаётся ли текст читаемым во время движения;
- нет ли слишком резких вспышек, вращения или большого параллакса;
- можно ли прервать анимацию;
- какой вариант нужен для prefers-reduced-motion;
- сохраняется ли смысл, если полностью отключить движение.

Сначала выдай список проблем по приоритету,
затем предложи минимальные исправления без редизайна макета.

## Бонус: готовый motion-протокол для AI-агента

Обычный промпт описывает одну анимацию. Протокол ниже задаёт агенту устойчивый способ работы с любым интерфейсом: сначала понять сценарий и структуру, затем выбрать motion-паттерн, применить его без разрушения дизайн-системы и провести QA.

Его можно использовать тремя способами:

• добавить целиком в начало задачи для Codex, Claude Code или другого MCP-клиента;
• сохранить как отдельный Skill или проектную инструкцию;
• для Figma Agent использовать короткую motion-формулу ниже без MCP preflight, а затем дописать конкретную задачу экрана.

Протокол специально разделяет чтение и изменение. Если у MCP-клиента нет инструментов записи Figma Motion keyframes, агент должен честно подготовить motion-спецификацию и готовый промпт для Figma Agent, а не утверждать, что анимация уже создана.

Если полный протокол слишком велик для конкретной задачи, начните с короткой версии:

Сделай движение функциональным и спокойным.
Один главный акцент, максимум два вторичных.
Начни реакцию на ввод не позднее 100 мс.
Нажатие — 80–100 мс, локальное состояние — 180–240 мс,
переход экрана — 280–420 мс, выразительный reveal — до 700 мс.
Exit быстрее enter. Не меняй layout ради анимации.
Не используй spring без смысловой причины.
Подготовь reduced-motion и проверь результат в preview.

Полную инструкцию ниже можно сохранить как Skill и пропустить при первом чтении статьи.

### Скопировать инструкцию целиком

Работай как продуктовый motion-дизайнер с доступом к Figma через MCP.

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

=== 1. СНАЧАЛА ПРОВЕРЬ ДОСТУПНЫЕ ИНСТРУМЕНТЫ ===

Определи, что реально умеет текущая MCP-сессия:
- читать выбранный Figma frame, слои, компоненты и переменные;
- писать или изменять нативные слои на canvas;
- читать Figma Motion keyframes, timing и easing;
- создавать или изменять Motion keyframes;
- получать изображения или preview результата.

Никогда не заявляй, что изменил Figma, если write-инструмента нет
или операция не подтверждена результатом инструмента.

Если Motion write недоступен:
1. Не имитируй выполненную работу.
2. Подготовь точную motion-спецификацию.
3. Подготовь готовый промпт для Figma Agent.
4. При необходимости реализуй анимацию в коде по данным Figma MCP.

=== 2. ПЕРЕД ЛЮБЫМ ИЗМЕНЕНИЕМ ПРОВЕДИ PREFLIGHT ===

Сначала прочитай выбранный frame и ничего не меняй.

Определи:
- пользовательское действие или событие, которое запускает движение;
- исходное, промежуточное и конечное состояние;
- один главный визуальный акцент;
- элементы, которые должны оставаться неподвижными;
- существующие компоненты, варианты, переменные и motion-токены;
- имена и иерархию слоёв;
- целевую платформу: web, iOS, Android, desktop;
- ограничения реализации и prefers-reduced-motion.

Если задача неоднозначна, выбери самый спокойный функциональный вариант.
Не придумывай новый визуальный стиль без прямой просьбы.

Перед записью создай безопасную копию frame или компонента,
если пользователь не указал обратное. Не разрушай исходный макет.

=== 3. ИЕРАРХИЯ ДВИЖЕНИЯ ===

В одном коротком фрагменте допускается:
- 1 primary motion — главное действие или изменение;
- до 2 secondary motions — поддержка главного;
- остальные элементы остаются статичными или меняются почти незаметно.

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

Анимация должна отвечать хотя бы на один вопрос:
- Что изменилось?
- Откуда появился объект?
- Куда он ушёл?
- Получила ли система действие пользователя?
- Как связаны старое и новое состояния?
- Что сейчас является главным?

Если движение не отвечает ни на один вопрос — не добавляй его.

=== 4. БАЗОВЫЕ MOTION-ТОКЕНЫ ===

Используй существующие токены файла или кодовой базы.
Если их нет, используй значения ниже как стартовую систему,
а не как неизменный закон.

duration.feedback: 80–100ms
duration.fast: 120–160ms
duration.base: 180–240ms
duration.overlay: 220–300ms
duration.route: 280–420ms
duration.expressive: 450–700ms

easing.enter: быстрый старт и мягкая остановка;
рекомендуемый ориентир cubic-bezier(0.16, 1, 0.3, 1)

easing.exit: короткий уверенный уход;
рекомендуемый ориентир cubic-bezier(0.7, 0, 0.84, 0)

easing.move: спокойное перемещение между равными состояниями;
рекомендуемый ориентир cubic-bezier(0.4, 0, 0.2, 1)

spring.soft: bounce 0.15–0.25
spring.expressive: bounce 0.25–0.35

Используй spring только там, где упругость соответствует характеру
продукта или физике объекта. Не применяй bounce к критичным данным,
формам оплаты, ошибкам и каждому элементу интерфейса.

Правила масштаба:
- маленькая реакция должна быть короче большой перестройки;
- exit обычно быстрее enter;
- пользователь не должен ждать декоративную анимацию;
- изменение должно начаться в пределах 100ms после ввода.

=== 5. НАЖАТИЕ КНОПКИ И TAP FEEDBACK ===

Для интерактивной кнопки проектируй независимые ветки состояний:
default → hover или focus → pressed;
после действия — loading, success либо error, если они нужны сценарию.

Hover, только для устройств с курсором:
- duration 120–160ms;
- один основной эффект: изменение цвета/тени ИЛИ translateY до 2px
  ИЛИ scale до 1.01;
- не используй сильный scale и подъём одновременно;
- не меняй layout и размеры контейнера.

Pressed / pointer down:
- реакция начинается сразу, ориентир 80–100ms;
- scale обычно 0.98–0.99 ИЛИ translateY 1px;
- текст и иконка сохраняют читаемость;
- контейнер не меняет ширину и не сдвигает соседние элементы;
- не используй долгую пружину: нажатие должно ощущаться точным.

Release:
- возврат 120–160ms через ease-out или очень мягкий spring;
- если запускается loading, переходи в него без промежуточного скачка.

Focus:
- показывай заметный focus ring за 80–120ms или мгновенно;
- focus не должен зависеть от hover;
- не используй scale как единственный индикатор клавиатурного фокуса.

Loading:
- сохраняй ширину кнопки;
- не прячь смысл действия без необходимости;
- блокируй повторную отправку, но не весь интерфейс;
- индикатор может появиться за 120–180ms;
- если ответ пришёл мгновенно, не показывай мигающий loader на один кадр.

Success:
- подтверждение 250–450ms;
- используй понятное изменение иконки, текста или цвета;
- не задерживай дальнейшее действие ради проигрывания;
- success должен читаться и без движения.

Error:
- сначала покажи текст и визуальный статус ошибки;
- допустимо короткое смещение 2–4px, не более двух колебаний;
- не используй агрессивную тряску, вспышки и длинный bounce;
- после анимации фокус остаётся на проблемном элементе.

=== 6. КОМПОНЕНТНЫЕ ПАТТЕРНЫ ===

- Карточка: hover 140–200ms через translateY 2–4px или elevation;
  при раскрытии сохраняй shared element, текст двигай единым блоком.
- Input: focus 100–160ms; сообщение об ошибке не вызывает layout jump,
  а focus остаётся на проблемном поле.
- Toggle: knob и track меняются вместе за 160–220ms без сильного overshoot.
- Tabs: indicator движется 180–240ms, навигация остаётся стабильной,
  старый контент уходит быстрее нового.
- Tooltip/menu: enter 140–220ms, exit 100–160ms, дистанция 4–8px.
- Modal/drawer: backdrop меняется через opacity, panel использует один эффект —
  translate 8–16px или scale 0.98; закрытие быстрее открытия.
- Для modal и drawer укажи focus trap, возврат focus и прерываемость жеста.
- Критичная ошибка не должна существовать только как временный toast.

=== 7. ПЕРЕХОДЫ МЕЖДУ ЭКРАНАМИ ===

Сначала определи тип связи:
- drill-down: список → детали;
- lateral: соседние вкладки или шаги;
- modal: временная задача поверх контекста;
- replace: полностью новый контекст;
- shared element: один объект меняет размер или позицию.

Правила качественного route transition:
- сохраняй общие элементы неподвижными, если контекст не меняется;
- outgoing content начинает уход первым;
- incoming content начинается до полного завершения outgoing;
- перекрывай фазы примерно на 30–50%, чтобы не появлялась пустая пауза;
- exit обычно 120–200ms;
- enter обычно 200–320ms;
- весь переход чаще всего укладывается в 280–420ms;
- направление движения соответствует навигационной модели;
- back transition зеркально возвращает пространственную связь;
- shared element сохраняет имя, иерархию и визуальную непрерывность.

Не используй горизонтальный slide для каждого перехода вне зависимости
от смысла. Не анимируй целый экран, если изменился только один блок.

=== 8. СПИСКИ, ДАННЫЕ И ПОЯВЛЕНИЕ КОНТЕНТА ===

- Списки: stagger 30–70ms, вся последовательность до 600–700ms;
  после восьми элементов используй группы, не перезапускай reveal на каждом скролле.
- Графики: раскрывай значения в направлении чтения; оси и подписи двигаются
  слабее данных, bounce не должен искажать восприятие числа.
- Skeleton/progress: спокойный loop 1.2–1.8s без резких вспышек и отката назад.
- Hero/portfolio: 450–700ms, один выразительный акцент, читаемые заголовок и CTA;
  в loop удерживай финал и возвращайся в начало без скачка.

=== 9. REDUCED MOTION ===

Для каждой важной анимации подготовь reduced-motion вариант.

При reduced motion:
- убирай большие перемещения, параллакс, вращение и сильный scale;
- отключай декоративный spring и overshoot;
- заменяй пространственный переход коротким opacity 100–160ms;
- сохраняй feedback, focus, loading, success и error;
- не вешай бизнес-логику на завершение анимации;
- интерфейс должен оставаться понятным при полном отключении motion.

=== 10. ТЕХНИЧЕСКАЯ РЕАЛИЗУЕМОСТЬ ===

Для web по возможности предпочитай transform и opacity.
Не создавай layout animation через случайные width, height, top и left,
если тот же результат достигается transform или FLIP-подходом.

Переиспользуй существующие компоненты, токены и библиотеки.
Не создавай новый motion-token ради одного значения без объяснения.

Если Figma-эффект дорого или нестабильно реализуется в продукте:
- не скрывай ограничение;
- предложи ближайший визуально эквивалентный вариант;
- зафиксируй осознанное расхождение в handoff.

=== 11. ОБЯЗАТЕЛЬНЫЙ MOTION-QA ===

После создания проверь результат на скорости 1x и 0.5x.

Проверь:
- смысл движения понятен без объяснения;
- реакция на ввод начинается не позднее 100ms;
- нет layout shift и скачков между состояниями;
- нет двух конкурирующих primary motions;
- текст остаётся читаемым;
- длинные строки и локализация не ломают движение;
- повторный быстрый клик не запускает конфликтующие состояния;
- анимацию можно прервать там, где пользователь может действовать;
- back/close возвращает контекст и focus;
- reduced-motion сохраняет смысл;
- экспорт или код совпадает с Figma по timing и easing.

Если доступен viewport или preview, просмотри результат сам.
Не ограничивайся проверкой списка keyframes.

=== 12. ФОРМАТ РЕЗУЛЬТАТА ===

До изменения выдай: motion_intent, primary_focus, static_layers,
sequence, tokens, states, reduced_motion и handoff_risks.

После изменения перечисли затронутые frames/layers/components,
число keyframes, использованные токены, расхождения с планом
и способ проверить preview.

Если пользователь просит исследование, создай 3 явно подписанных варианта.
Если пользователь просит готовое решение, создай один спокойный вариант,
а не три случайных направления.

### Что должен вернуть агент до начала работы

Полезно требовать не длинное эссе, а компактный контракт. Например:

motion_intent: "Подтвердить добавление товара и сохранить связь с корзиной"
primary_focus: "ProductCard → CartBadge"
static_layers:
  - "Header"
  - "BottomNavigation"
sequence:
  - "Кнопка даёт pressed-feedback"
  - "Изображение товара уменьшается и движется к корзине"
  - "Badge обновляет значение"
tokens:
  press: "80ms"
  shared_element: "320ms / easing.enter"
  badge: "180ms / spring.soft"
reduced_motion:
  - "Убрать перелёт изображения"
  - "Оставить pressed-feedback и обновление badge через opacity"
handoff_risks:
  - "Нужна стабильная позиция CartBadge на разных брейкпоинтах"

Такой формат дисциплинирует и человека, и AI. До создания keyframes видно, что именно агент собирается сделать, какой смысл закладывает и где может возникнуть проблема при реализации.

## Как использовать MCP-сервер вместе с Motion

Figma MCP и Figma Agent — не одно и то же.

Figma Agent живёт внутри дизайн-файла и редактирует сам макет. Figma MCP соединяет файл с внешним агентом — например, Codex, Claude Code, Cursor или VS Code. Через удалённый MCP-сервер агент может читать структуру Figma, а при наличии write-to-canvas и нужных прав — работать с нативными слоями и передавать дизайн-контекст в код.

На момент публикации Figma официально описывает Motion через MCP прежде всего как handoff и read-контекст: keyframes, тип движения, timing и easing. Write-to-canvas документирован для frames, компонентов, вариантов, переменных и auto layout. Возможность создавать или менять именно Motion keyframes всегда проверяйте по фактическому набору tools текущей MCP-сессии.

Для Motion особенно полезны три сценария.

### Сценарий 1. Подготовить макет до анимации

Внешний агент может проверить имена слоёв, иерархию, компоненты, переменные и auto layout. Если remote MCP предоставляет write-to-canvas и у пользователя есть права записи, агент может создать аккуратные копии или варианты, на которые Figma Agent уже поставит keyframes.

Универсальный запрос:

Проанализируй выбранный Figma frame по ссылке.
Подготовь его к работе в Figma Motion:

- сохрани визуальный результат без изменений;
- переименуй слои по их роли;
- объедини элементы, которые должны двигаться как одно целое;
- отдели постоянную навигацию и фон от изменяемого контента;
- проверь компоненты, варианты и auto layout;
- создай рядом безопасную копию для анимации.

Не добавляй motion и не меняй дизайн. В конце перечисли структурные изменения.

### Сценарий 2. Передать анимацию в разработку

После того как Motion настроен, разработчик открывает frame в Dev Mode. Motion-раздел показывает read-only timeline и код в форматах CSS, React или JSON. Если текущий MCP-клиент поддерживает animation context, по ссылке на frame агент получает keyframes, тип движения, timing и easing.

Промпт для реализации:

Реализуй анимацию из этого Figma Motion frame: [ссылка].

Используй motion-контекст из Figma MCP как источник истины:
keyframes, длительности, задержки, easing и порядок слоёв.

Сначала найди существующие компоненты и motion-токены проекта.
Не создавай параллельную систему анимаций и не меняй layout.
Добавь вариант для prefers-reduced-motion.

После реализации сравни результат с Figma и перечисли осознанные расхождения.

Это полезнее, чем отправлять разработчику GIF. GIF показывает внешний вид, но не передаёт точные параметры.

### Сценарий 3. Проверить системность motion

MCP-агент может сопоставить анимацию с кодовой базой и найти расхождения: новые случайные duration, другая кривая, отсутствующий reduced-motion, анимация через свойства, которые плохо работают в браузере.

Сравни motion в выбранном Figma frame с системой анимаций проекта.

Проверь соответствие duration-токенам, easing-кривым,
правилам stagger и prefers-reduced-motion.
Найди параметры, для которых в кодовой базе нет эквивалента.

Не меняй Figma и код. Сначала подготовь таблицу:
параметр Figma → существующий токен → расхождение → рекомендация.

## Как подключить Figma MCP

Для большинства пользователей Figma рекомендует удалённый MCP-сервер: он не требует постоянно держать desktop-сервер включённым и предоставляет самый широкий набор возможностей.

Что важно по доступам:

• Figma Motion доступен на любом плане; для создания и изменения анимаций нужен edit-доступ.
• Remote MCP доступен на всех местах и планах, но конкретные tools зависят от клиента и прав пользователя.
• Write-to-canvas работает только через remote MCP, требует Full seat и edit-доступ к файлу.
• Desktop MCP доступен для Dev и Full seat на платных планах.
• Handoff Motion через Dev Mode требует платного плана и Full либо Dev seat.

Общая схема:

1. Убедитесь, что ваш AI-клиент поддерживается каталогом Figma MCP.
2. Откройте инструкцию для своего клиента в MCP Catalog: где-то доступен официальный plugin со skills, а где-то сервер добавляется вручную.
3. Авторизуйтесь в Figma и разрешите доступ.
4. Скопируйте ссылку на нужный frame через Copy link to selection.
5. Вставьте ссылку в запрос агенту.

В Codex подключение выполняется через раздел Plugins: выбрать Figma, установить интеграцию и пройти авторизацию.

Локальный desktop MCP нужен в основном для специальных корпоративных сценариев. Он включается в Figma Desktop через Dev Mode, после чего доступен по адресу:

http://127.0.0.1:3845/mcp

Если задача — читать Motion и передавать его в код, удалённая версия обычно проще. Для записи обратно на canvas нужны remote MCP, Full seat и edit-доступ. Если клиент поддерживает официальные Figma skills, подключите их: они направляют последовательность tools, но не добавляют новых MCP-возможностей.

## Как собрать motion-систему для интерфейса

Когда у каждой страницы свой easing и любимая пружина, продукт начинает ощущаться собранным разными командами. Поэтому после первых экспериментов стоит зафиксировать короткую motion-систему.

### Минимальный набор токенов

Duration:

• instant — мгновенная визуальная реакция;
• fast — hover, pressed, небольшие переключения;
• base — меню, подсказки, состояния компонентов;
• slow — крупное изменение layout или hero-переход.

Easing:

• enter — появление;
• exit — исчезновение;
• move — перемещение между состояниями;
• expressive — редкий брендовый акцент.

Distance:

• micro — едва заметная реакция;
• small — локальное появление;
• medium — переход между крупными состояниями.

Смысл токенов не в названиях. Команда должна знать, где каждый применяется, и не вводить новое значение без причины.

### Анимированные компоненты

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

Если motion существует только внутри одного hero-frame, он почти наверняка будет заново собран в следующем проекте — немного иначе. Компонент превращает удачную механику в системное решение.

### Референсный компонент для агента

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

Это надёжнее, чем каждый раз писать «плавно, современно и премиально».

## Типичные ошибки

### Анимировать всё, что можно выделить

AI резко ускоряет черновую генерацию, поэтому первая версия часто перегружена. Удаление лишних keyframes — нормальная часть процесса. Хороший motion-дизайнер не тот, кто больше двигает, а тот, кто знает, что оставить неподвижным.

### Просить «сделай красиво»

Агент выбирает усреднённый язык: fade, scale, spring, stagger. Получается аккуратно, но без связи с продуктом. Указывайте цель, главный элемент, характер, ограничения и то, что должно остаться статичным.

### Генерировать поверх грязной структуры

Случайные имена и вложенность приводят к случайной хореографии. Сначала слой и компонент, потом keyframe.

### Использовать один timing для всех объектов

Большая панель и маленькая иконка не должны двигаться одинаково. Размер, дистанция и смысл события влияют на длительность.

### Делать motion только для портфолио

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

### Передавать разработчику только видео

Видео хорошо для общего понимания, но плохо для реализации. Нужны keyframes, duration, easing, задержки, состояния и reduced-motion. Dev Mode и MCP как раз закрывают этот разрыв.

### Забывать про reduced motion

Уменьшение движения — не обязательно полное отключение. Большой пролёт можно заменить fade, параллакс убрать, а подтверждение состояния оставить. Главное, чтобы смысл и порядок интерфейса сохранялись.

## Финальный чеклист

• У анимации есть сформулированная функция, а не только настроение.
• Один фрагмент держится вокруг одного главного акцента.
• Слои названы по роли и собраны в понятную иерархию.
• Постоянные элементы отделены от движущегося контента.
• Timing соответствует масштабу и важности события.
• Stagger повторяет порядок чтения, а не создаёт случайный эффект.
• Анимация проверена в реальном размере и на целевом устройстве.
• Подготовлен вариант для reduced motion.
• Для повторяющегося паттерна создан анимированный компонент.
• Motion передаётся в разработку через параметры, Dev Mode или MCP, а не только видео.
• В портфолио показана продуктовая идея, а не коллекция всех эффектов.
• Экспортированный MP4, WebM, GIF или SVG проверен на вес, качество и бесшовность цикла.

## Практический итог

Раньше движение часто добавляли в конце: связали пару фреймов, выбрали Smart Animate и надеялись, что разработчик поймёт идею. Теперь анимацию можно собрать на timeline, превратить в компонент, описать через переменные, сгенерировать и массово исправить через Figma Agent, а затем передать в код через MCP со всеми keyframes, timing и easing.

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

Для портфолио это особенно заметно. Статичный экран говорит: «я умею компоновать». Хорошо поставленная анимация добавляет: «я понимаю состояния, внимание, причинность и поведение продукта». Но работает это только тогда, когда motion объясняет решение, а не пытается отвлечь от его отсутствия.

Начните с одного экрана и одного действия. Сделайте три варианта через Agent, выберите самый спокойный, уберите из него ещё треть эффектов, оформите удачный паттерн как компонент и передайте параметры через MCP. Этого уже достаточно, чтобы макет ощущался живым, а кейс выглядел цельнее и профессиональнее.