Smart Animate в Figma: как система находит пары слоёв и почему вместо анимации — растворение
Smart Animate выглядит волшебно, пока не перестаёт работать. В этот момент дизайнер обычно двигает слои туда-сюда, пока что-то не «схватится».
Причина почти всегда одна: система не нашла пару. Разберём правила поиска по официальной документации Figma.
Основной принцип
Документация формулирует прямо: Smart Animate ищет совпадающие слои между двумя фреймами по имени слоя и позиции в иерархии.
То есть слой icon внутри Card / Header в первом фрейме ищет партнёра с именем icon в том же месте структуры второго фрейма.
Позиция в иерархии — не координаты на холсте, а место в дереве: родительские группы и фреймы.
Что происходит с непарными слоями
Три сценария:
- Слой есть только в исходном фрейме — он исчезает.
- Слой есть только в целевом фрейме — он появляется через dissolve (растворение).
- Слой есть в обоих и не изменён — анимации нет.
Исключение для текста
Текстовые слои — особый случай. Они могут совпадать по содержимому и стилю, а не только по имени.
Это сделано, чтобы текст, который меняется в макете, не превращался в растворение. Но и подвох здесь есть: если два разных текстовых блока имеют одинаковое содержимое и стиль, они могут «склеиться» неожиданным образом.
Практический совет: называйте текстовые слои осмысленно, даже если Figma может сопоставить их по содержимому.
Свойства, которые не анимируются
Часть свойств Smart Animate не поддерживает и заменяет переход на растворение по умолчанию:
- drop shadow и inner shadow;
- морфинг форм (shape morph);
- случайность в текстурах и шуме.
Это документированное поведение, а не баг. Если тень должна «переезжать» — анимируйте слой, а не свойство тени.
Чекбокс Smart animate matching layers
Отдельная настройка появляется при выборе типа перехода, отличного от Smart Animate, — например, Push, Slide или Move.
С включённым чекбоксом:
- несовпадающие слои анимируются основным переходом (Push/Slide/Move);
- совпадающие слои остаются на месте без перехода.
То есть вы получаете комбинацию: фон уезжает, а шапка, найденная по имени, остаётся статичной.
Это один из самых полезных и самых недооценённых приёмов в прототипировании.
Визуальная проверка пар
Документация упоминает, что при наведении на совпадающий объект Figma подсвечивает пару.
Практика: перед настройкой таймингов наведите курсор на ключевые элементы и убедитесь, что подсветка появляется. Если её нет — пара не найдена, и никакие настройки это не исправят.
Overlay и Smart Animate
Для оверлеев Smart Animate напрямую не поддерживается, но работает обходной путь: переход оверлей → оверлей со совпадающими слоями.
Это позволяет делать анимацию внутри модального окна, не выходя из структуры оверлеев.
Требования к доступу
Прототип можно настраивать только при праве Can edit на файл. В режиме просмотра вкладка Prototype недоступна.
Практическая схема: карточка раскрывается
- Фрейм «Card collapsed»: контейнер
Card, внутриImage,Title,Meta. - Фрейм «Card expanded»: тот же контейнер
Cardс теми же именами, но другими размерами. - Связь между фреймами.
- Переход — Smart Animate.
Что произойдёт: Image увеличится, Title переедет, новый слой Description появится через dissolve.
Что делать с Description, если нужен плавный въезд: добавить слой с тем же именем в исходный фрейм, но с нулевой прозрачностью или уменьшенным масштабом.
Практическая схема: смена вкладок
- Два фрейма с одинаковой шапкой.
- Основной контент отличается.
- Переход — Push с включённым Smart animate matching layers.
Шапка останется на месте, контент уедет. Без чекбокса шапка тоже поехала бы.
Почему dissolve — это нормально
Многие воспринимают растворение как ошибку. На самом деле для появления новых элементов это часто лучший вариант: он не требует ручной настройки и выглядит нейтрально.
Проблема возникает только тогда, когда вы ждали движения.
Производительность
Smart Animate считает промежуточные состояния на лету. На ноутбуке с 16 ГБ ОЗУ прототип с десятком анимируемых слоёв работает плавно.
Что замедляет:
- огромные фреймы с большим числом векторных слоёв;
- одновременная анимация десятков объектов;
- тяжёлые изображения без сжатия.
Если прототип «дёргается», упростите: меньше слоёв, короче переходы.
Как отладить переход за пять минут
Когда анимация не работает, действуйте по порядку, а не наугад.
- Наведите курсор на объект в режиме прототипа. Подсветка пары есть — сопоставление найдено. Нет — проблема в имени или иерархии.
- Сравните деревья слоёв двух фреймов. Разница в один уровень вложенности ломает сопоставление.
- Проверьте имена на скрытые символы: слой, скопированный из другого файла, иногда приезжает с пробелом в конце.
- Убедитесь, что тип перехода — Smart Animate, а не Instant.
- Посмотрите на свойства, которые не анимируются: тень или морфинг формы дадут растворение даже при идеальном совпадении.
Самый быстрый способ найти причину — временно переименовать подозрительный слой в обоих фреймах в одинаковое короткое имя без пробелов. Если анимация появилась, дело было в имени.
Частые ошибки
Разные имена слоёв в двух фреймах. Самая частая причина.
Слой вынесен из группы. Иерархия изменилась — пара не найдена.
Копирование слоя с суффиксом. Title и Title copy — разные имена.
Ожидание анимации тени. Тени не анимируются.
Отсутствие прав редактирования. Прототип не настроить.
FAQ
По чему Smart Animate сопоставляет слои?
По имени и позиции в иерархии; для текста — ещё по содержимому и стилю.
Что такое dissolve в Figma?
Растворение — переход по умолчанию для несовпадающих слоёв и неподдерживаемых свойств.
Зачем нужен чекбокс Smart animate matching layers?
Чтобы совпадающие слои оставались на месте при использовании Push, Slide или Move.
Можно ли анимировать тень?
Нет, для теней используется растворение.
Работает ли Smart Animate для оверлеев?
Напрямую нет, но переход оверлей → оверлей с совпадающими слоями работает.