До Smart Animate Figma не придавала большого значения именам слоев. Поскольку Smart Animate зависит от имени слоя и иерархии, может потребоваться другой подход.
Ниже мы описали несколько способов устранения непредвиденных результатов Smart Animate.
Подсказка! Мы рекомендуем увеличивать длительность при создании вашего прототипа. Это позволяет вам видеть, что происходит, и вносить изменения.
Содержание статьи
Имена слоев
Один из быстрых способов создания фреймов для Smart Animate — их дублирование. Это сохраняет единообразие наименования между каждым фреймом. Затем при необходимости вы можете добавлять и удалять слои в каждый фрейме.
Figma называет фреймы и слои в зависимости от того, как вы их дублируете или копируете и вставляете.
- Внутри фрейма: Figma пронумеровывает их слои последовательно. Например: фрейм 1, фрейм 2 и т. д.
- Между фреймами: Figma использует одно и то же имя. Например: если вы скопируете прямоугольник 1 из одного кадра, Figma вставит его как прямоугольник 1 в следующий кадр.
У вас могут быть объекты или слои, которые существуют во фреймах, но имеют разные имена в каждом. Или у вас может быть противоположная проблема — слои с одинаковыми именами, которым вы не хотите сопоставлять.
Вы можете просматривать и обновлять имена слоев с помощью панели Layers (Слои) на левой боковой панели. Узнайте, как массово переименовывать слои.
Просмотр совпадающих слоев
Figma также упростила идентификацию слоев или объектов, которые существуют — или совпадают — между фреймами. Это применимо ко всем слоям, группам, фреймам и компонентам.
- Откройте вкладку Prototype (Прототип) на правой боковой панели.
- Наведите указатель мыши на объект или слой на холсте.
- Figma выделит этот слой в любых других фреймах, в которых он существует.
Порядок и иерархия слоев
Smart Animate и совпадающие слои Smart Animate учитывают порядок слоев или иерархию ваших слоев.
Обычно при перемещении внутрь или скольжения весь фрейм назначения перемещается над исходным фреймом. С совпадающими слоями Smart Animate Figma будет перемещать или сдвигать слои в зависимости от их иерархии, что может вызвать некоторые запутанные или неожиданные результаты.
На нашем скриншоте ниже у нас есть два совпадающих объекта между нашими фреймами (Explorer 1 и Explorer 2). Это строка состояния и навигация.
Если у нас есть слои над любыми совпадающими слоями, Figma анимирует их над фреймом назначения. На нашем скриншоте ниже мы видим, что слои из Explorer 1 появляются во фрейме назначения.
Вместо этого, перемещая наши совпадающие слои в верхнюю часть иерархии, мы можем убедиться, что все фреймы назначения скользят над исходным фреймом.
Чтобы быть более точным при выборе Smart Animate, Figma сопоставляет слои на основе их имени и иерархии. Это также позволяет быстро не совмещать слои между фреймами.
Допустим, у нас есть пять прямоугольников в каждом из наших фреймов. Эти прямоугольники содержат различное содержимое для каждого фрейма. Мы обозначили их как Поездка 1 — Поездка 5 во всех трех фреймах.
Когда мы пытаемся применить переход Push, Smart Animate распознает их как совпадающие слои. Вместо того, чтобы рассматривать эти прямоугольники как новый контент, Figma Smart Animates изменяет их положение.
Чтобы изменить это поведение, мы можем сгруппировать поездки прямоугольника в каждом кадре и дать им уникальное имя.
При предварительном просмотре нашего перехода Smart Animate больше не распознает их как совпадающие слои. Наш контент будет объединяться, делая наш прототип более реалистичным.
Умная анимация Slide In (Скольжение) и Move In (Движение)
При использовании совпадающих слоев Smart Animate с переходами Slide или Move необходимо учитывать несколько моментов.
Если этот параметр выбран, Figma будет анимировать любые совпадающие слои между фреймами. Это означает, что Figma не может анимировать весь конечный фрейм (B) поверх исходного фрейма (A), как обычно.
Figma также не включает заливку фрейма как часть анимации. Это может привести к наложению слоев, из-за чего переход будет выглядеть неаккуратно.
Чтобы предотвратить это, мы можем добавить прямоугольник со сплошной заливкой позади других наших слоев. Теперь, когда мы смотрим на наш прототип, содержимое каждого фрейма объединяется.
Загрузка...
