Figma: 5 способов добавить анимацию в свой дизайн

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

Как дизайнер/разработчик я всегда ищу новые инструменты, как в области дизайна, так и Что касается разработки, мы явно находимся в золотом веке новых инструментов в обоих направлениях.

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

Почему-то я вижу, что многие люди смотрят на Adobe XD. , Protopie, UXPin или Principle за их функции анимации, поэтому я решил написать эту статью, чтобы вы знали, что возможно в Figma в наши дни.

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

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

  1. Метод №1: Добавление GIF-файлы
  2. Метод № 2: Figmotion
  3. Метод № 3: Простое прототипирование в Figma
  4. Метод №4: Умная анимация Figma
  5. Метод № 5: кодируйте свои анимации

Эта статья — результат семинара, который мы провели в Google For Startups в прошлом месяце в кампусе TLV. Было очень приятно увидеть реакция на лица людей, когда мы дошли до анимационной части.

Все примеры, показанные здесь, были сделаны в сотрудничестве с Ноа Шпинат от Peanuts Studio и Идо Зайфман , лидера местного сообщества Figma, большое спасибо обоим.

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

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

Вы можете найти GIF-файлы по всему Интернету, вы можете искать анимированные GIF-файлы как в Google , так и в DuckDuckGo , щелкнув вкладку Изображения и отфильтровав результаты по Типу, а затем выбрав GIF (или Анимированный GIF , в зависимости от поисковой системе).

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

Не можете найти идеальный GIF? Сделать свой собственный! Для получения дополнительных сведений см. Метод № 2.

GIF-файлы можно создавать с помощью различных инструментов. В первую очередь это Adobe Photoshop, но это Figma, поэтому давайте создадим GIF с Figmotion, плагином для Figma, который позволяет создавать анимацию на основе ключевых кадров (вроде мини-версии After Effects).

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

Как установить плагин в Figma?
Прежде всего, если у вас не установлен плагин, перейдите в приложение Figma и в меню Плагины выберите Управление плагинами, здесь вы увидите несколько рекомендуемых плагинов. Если Figmotion там нет, перейдите в Просмотреть все плагины , и там будет список всех доступных плагинов, вы можете перейти к окну поиска в правом верхнем углу и просто ввести Figmotion .

Теперь, когда у нас установлен плагин, давайте начнем прямо сейчас, чтобы открыть Figmotion, перейдите в Plugins и выберите Figmotion, Open Figmotion , плагин откроется в новом окне поверх всего остального.

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

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

Совет!
Если вы выберете рамку Figma и затем откройте Figmotion, он автоматически выберет выбранный фрейм в качестве фрейма, над которым вы будете работать.

Теперь вы должны видеть свои элементы в слоях Figmotion, и вы можете анимировать их по своему желанию. Вы также можете перейти непосредственно к определенному элементу, выбрав его из списка в правом верхнем углу окна плагина.

Теперь предположим, что вы хотите анимировать вращение своего элемента, сначала найдите в список свойств, которые можно анимировать, строка rotation , а затем нажмите кнопку ключевого кадра (выглядит как ромб, как в After Effects).

Мы можем очистить временную шкалу или просто использовать 0 мс , 100 мс , 200 мс ссылки (да, эти метки являются интерактивными ссылками), а затем создайте другой ключевой кадр, нажав ту же кнопку ключевого кадра, что и на приведенном выше снимке экрана.

После создания ключевого кадра мы можем просто щелкнуть по и вручную измените значение в это время или измените поворот элемента в Figma, а затем щелкните ключевой кадр, чтобы отредактировать его, и щелкните значок кисти, чтобы получить текущее состояние Figma, это w orkflow, показанный на снимке экрана ниже.

После вас ‘ После завершения анимации Figmotion может отобразить ее как видео или GIF, нажав кнопку Render и выбрав соответствующий формат.

Плагин также может экспортировать вашу анимацию в виде кода, нажав кнопку Экспорт , вам нужно будет выбрать между CSS и JSON , хорошее практическое правило — экспортировать CSS для Интернета и JSON для мобильных приложений, даже если иногда вас просят нарушить это правило, просто спросите своих разработчиков или экспортируйте оба.

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

Прототипирование — это простой процесс соединения разных экранов (или фреймов в Figma) для создания интерактивной симуляции вашего приложения или продукта. В этом методе мы рассмотрим все варианты прототипа, которые может предложить Figma, кроме функции Smart Animate, которую мы рассмотрим в следующем методе (метод №4)..

Если вы переключитесь в режим прототипа из вкладки Prototype (в правой части экрана есть 3 вкладки: Дизайн , Прототип и Code ) вы заметите, что каждый выбранный вами объект, включая рамки Figma, имеет небольшую белую точку с правой стороны.

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

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

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

Я не буду описывать все триггеры но есть несколько важных:

  1. On Click : означает, что взаимодействие произойдет, когда пользователь нажимает на выбранный вами объект. Если взаимодействие находится во фрейме, то пользователь сможет щелкнуть в любом месте этого фрейма, чтобы инициировать взаимодействие.
  2. При наведении : ваше взаимодействие начнется, когда пользователь наводит курсор на выбранный объект или фрейм, и оно вернется в исходное состояние, когда пользователь закончит наведение.
  3. Mouse Enter/Mouse Leave : взаимодействие начнется, когда мышь войдет в выбранный элемент (или фрейм) или покинет его, что очень похоже на при наведении курсора, но не отскакивает автоматически при наведении закончено, и с помощью мыши, и при входе, и выходе, вы можете имитировать взаимодействие, которое ощущается примерно одинаково. Лучше всего использовать, когда вы хотите, чтобы что-то происходило при вводе мыши, а не возвращалось автоматически при наведении курсора. Подумайте, например, о меню и подменю.
  4. After Delay : это взаимодействие происходит автоматически по истечении указанного времени , если ваша задержка составляет 200 мс, взаимодействие начнется через 200 мс, начиная с того момента, когда пользователь прибыл в этот кадр. Этот тип взаимодействия ограничен только фреймами, вы не можете выбрать этот тип взаимодействия, например, при создании прототипов кнопок.

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

Вы также можете использовать Open Overlay для замены объектов в кадре без полного изменения всего кадра, это взаимодействие также может добавить полупрозрачный фон и возможность закрыть наложение при щелчке за пределами объекта, подумайте о всплывающих окнах или предупреждениях.

Ваше взаимодействие почти готово, все, что нам нужно сделать, это выбрать Анимацию , которую мы хочу из меню. Выбрав один из них, вы увидите, как он выглядит в небольшом превью с поддельными экранами A и B (как на GIF-изображении выше) в меню анимации в Prototype tab.

Для анимации в Figma можно задать 3 параметра: тип анимации, время и продолжительность.

Тип анимации : Figma предлагает вам несколько предустановок анимации на выбор: Instant означает, что ваш поток изменится мгновенно, без анимации. Dissolve — переход между двумя кадрами, Move In/Out , Push и Slide In/Out — все распространенные варианты прототипирования пользовательского интерфейса. узнайте их, просто используя мобильные приложения на этом этапе.

Время : это означает плавность, каждая анимация в Figma может быть установите значение Ease In , Ease Out или Легкость входа и выхода . Под замедлением понимается медленность движения в вашей анимации. Ease In означает, что ваша анимация будет начинаться медленно и ускоряться по мере продвижения, Ease Out наоборот, ваша анимация начнется очень быстро и медленно затухнет. Ease In And Out означает, что ваша анимация будет начинаться медленно, ускоряться и затем медленно умирать в конце.

Продолжительность : в Figma , продолжительность любой анимации устанавливается в миллисекундах (это то, что означает мс), это означает, что у вас есть 1000 мс за 1 секунду, поэтому, если вы хотите, чтобы анимация занимала полсекунды, это 500 мс. Обычно в анимации пользовательского интерфейса ничего не требуется более 500 мс, и большинство анимаций должно быть еще более быстрым на 200–300 мс.

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

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

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

I Я уверен, что вы видели в параметрах Прототипирование небольшую опцию под названием Smart Animate и поинтересовался, что там делает, ну теперь пора перейти к самому интересному инструменту анимации Figma.

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

Вы можете думать о кадрах Figma как о ключевых кадрах анимации, а не как о монтажных областях, так это более интуитивно понятно, вы делаете состояния A и B (ключевые кадры), а Figma создает промежуточные кадры для вас.

Давайте сделаем простой пример, этот вращающийся квадрат, который вы видите ниже, состоит из двух кадров (Кадр A и кадр B), Figma переключается между ними при нажатии на них, вы можете видеть оба кадра слева и получившийся прототип справа.

Взаимодействие Smart Animate осуществляется так же, как и любое другое другое прототипирование в Figma (подробнее см. Метод № 3), вы просто выбираете фрейм или объект, который хотите подключить (наш фрейм A), убедитесь, что вы находитесь в Прототип в Figma, а затем просто перетащите его от белой точки в правой части окна выбранный объект или кадр.

После этого не забудьте выбрать Smart Animate из Анимация и выберите желаемое время (Ease In, Ease Out и т. д.) и Продолжительность (в миллисекундах), и все, Figma позаботится обо всем остальном.

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

Также вы не можете редактировать фактические векторы вашего объекта в анимации, даже радиус угла. Думайте о Smart Animate как о преобразовании, которое вы выполняете поверх своего объекта, вы можете изменить положение, поворот и масштаб объекта, но не более того, это правильный метод для анимации и в веб-браузерах, поэтому Figma действительно подготовит вас к изучению CSS в будущем (метод № 5).

Совет!
Сохраняйте простоту и сохраняйте порядок слоев , не меняйте порядок слоев в середине анимации и не меняйте размер кадра или векторы объектов.

Хорошим примером этого может быть этот милый персонаж, смотрящий на ваш курсор мыши (см. выше), все это было сделано с помощью Smart Animate и невидимые прямоугольники, которые меняют кадры при наведении курсора.

Вы также можете смешивать и сочетать эти методы анимации при наведении курсора кнопки эффект создается с помощью Open Overlay , который мы видели в методе № 3, хотя все остальное было сделано с помощью Smart Animate , вы также можете вставлять файлы GIF в смесь, как мы видели в методе №1.

 Кадры Figma для создания указанной выше анимации, обратите внимание на наложение кнопки в конце ширины

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

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

Figma — отличный инструмент для проектирования, но инструментов анимации, которые мы обсуждали до сих пор (методы №1–4), немного не хватает, например, я не могу просматривать свою анимацию с некоторым настраиваемым замедлением, а не только с постепенным увеличением или уменьшением.

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

Для внесения изменений в файл SVG, который вы экспортировали из Figma откройте его с помощью какого-нибудь редактора кода, например Visual Studio Code, Brackets, Atom, Sublime Text или любого другого, что выделяет ваш код.

Прежде всего, после того, как мы дважды открыли файл SVG (один раз в вашем браузере и один раз в редакторе кода), нам нужно выяснить, что мы хотим переместить, самый простой способ для этого в браузере просто наведите указатель мыши на объект, который вы хотите анимировать (зрачок в моем случае), щелкните его правой кнопкой мыши и выберите Inspect .

Теперь он должен автоматически выделять строку в вашем коде, где находится этот элемент, эту строку вы можете искать в своем редакторе кода, как только вы ее найдете, вам нужно добавить id к вашему элементу, поэтому в моем случае это такая строка:


, и получилось так:
id = ”myCircle” cx = ”180 "cy =" 155 "r =" 19 "fill =" # 363F41 "/>

После этого вам нужно будет перейти в начало кода и сразу после при открытии тега svg вам нужно добавить тег style , чтобы ваш код выглядел очень аналогично этому (по крайней мере, по структуре):

 


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

  
#myCircle {
fill: red;
}

Это должно дать вам представление, если что-то пошло не так. Если вы сохраните код и обновите страницу в браузере, выбранный вами элемент теперь должен быть окрашен в красный цвет. Если ваш объект не имеет заливки, вы можете попробовать то же самое с помощью обводки: красный; вместо заливки, если ничего не изменилось, убедитесь, что идентификатор, который вы указали для своего элемента, и приведенный выше код совпадают. В CSS вам нужно вставить знак # перед любым идентификатором, поэтому в моем примере выше идентификатор — myCircle . наконец, убедитесь, что у вас есть открывающие и закрывающие скобки. Обычно я забываю } в конце.

Хватит этой структурной работы, пора анимировать наш элемент, поэтому вернемся к нашей части CSS (тег стиля ) нам нужно добавить некоторые свойства анимации и несколько ключевых кадров.

В приведенном ниже примере все свойства внутри #myCircle являются свойствами анимации (вы можете удалить fill: red; из предыдущего) и все свойства внутри @keyframes myAnim являются ключевыми кадрами:

 #myCircle {
имя-анимации: myAnim ;
продолжительность-анимации: 1500 мс;
функция-время-анимации: кубический-Безье (0,21, -0,44, 0,79,1. 45);
animation-iteration-count: infinite;
}
@keyframes myAnim {
0% {transform: translate (0,0);}
20% {transform: translate (0,0);}
30% {transform: translate (-10px, -5px);}
50% {transform: translate (-10px, -5px);}
60% {transform: translate (8px, 2px);}
90% {transform: translate (8px, 2px) ;}
100% {transform: translate (0,0);}
}

Вот как работает CSS-анимация: вы добавляете свойства к объекту, например продолжительность анимации, 1500 мс (полторы секунды) в этом случае, вы добавляете имя анимации, которое мы придумали, похоже на ваш идентификатор элемента, но это идентификатор ключевых кадров анимации.

Затем вы добавляете свои ключевые кадры, которые вы размещаете на заранее определенной временной шкале длиной 1500 мс, потому что это продолжительность анимации, которую мы добавляем к нашему элементу, ключевые кадры, которые мы добавляем сейчас, будут ссылаться на эту временную шкалу. поэтому 50% означает, что ключевой кадр будет в 750 мс от начальной точки.

Некоторые более важными свойствами являются animation-iteration-count, который дает вам возможность зацикливать вашу анимацию, infinite означает, что она будет повторяться вечно, а число вроде 3 означает, что она будет повторяться 3 раза, а затем анимация будет стоп.

Еще одна функция — animation-timer-function, которая дает вам возможность настраивать время (замедление), вы можете указать легкость входа, легкость выхода, легкость выхода, линейность и многое другое, но самое интересное — это вариант cubic-bezier , вам не нужно сдвигать числа вручную, вы можете использовать инструмент cubic-bezier, чтобы сделать тяжелую работу и просто скопировать и вставьте его в свой код.

Этот метод анимации SVG подходит для таких вещей, как значки, логотипы или эмодзи, но для большинства вещей разработчик будет строить весь экран из HTML + CSS, а не из SVG, но все же это дает вам гораздо более богатый способ быстро добавлять анимацию, вы не застрянете только с легкостью, а разработчик, который мог бы воссоздать это в HTML по-прежнему является отличным ориентиром для анимации, потому что и HTML, и SVG могут использовать для этого один и тот же код CSS.

Если вы хотите создать свои прототипы в «реальном» HTML-коде, вы можно начать с копирования и вставки того, что дает вам Figma, на вкладке Code (рядом с Prototype tab), это покажет вам все стили вашего текущего выбранного объекта, и вы можете многому научиться из этого.

Вы также можете ткнуть анимацию, которую я сделал для этого проекта, используя HTML + CSS для анимации кнопки и мигания этого персонажа, вы можете редактировать код столько, сколько хотите, он доступен открыто по этой ссылке.

В Figma гораздо больше методы для добавления анимации, чем думает большинство людей, вы можете добавлять GIF-файлы, добавлять анимацию с помощью Figmotion, Prototype, Smart Animate, а если этого недостаточно, вы всегда можете экспортировать его в SVG, а затем настроить свой код для его анимации.

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

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

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

Если вам понравилась эта статья, у меня есть еще одна хорошая статья о Button Очень ценятся дифференциация и еще одно о моушн-дизайне в дизайн-системах и, конечно, хлопки.



Освоение анимаций в Figma путем создания 7 общих анимаций пользовательского интерфейса

Jurn

10 июля 2020 г. · чтение 15 минут

Первоначально опубликовано в моем личном блоге .

Большинство дизайнеров тратят много часов на совершенствование каждого пикселя своих Они не тратят времени на совершенствование переходов между этими страницами.

Когда вы разрабатываете мобильное меню, вы разрабатываете оба состояния, открытое и закрытое меню. Но если пользователь щелкает, чтобы открыть меню, оно появляется внезапно? Это скользит? С какой стороны? Как быстро? Является ли анимация линейной или она легко появляется и/или исчезает?

Если вы просто предоставите разработчику, реализующему дизайн, два статических экрана, возникает много неясностей. Добавление к нему однострочной заметки, в которой говорится, что «он скользит внутрь», недостаточно детализировано.

Движение играет важную роль в ваших дизайнах и может помочь пользователю понять, что происходит, когда они взаимодействуют с и перемещайтесь по своему приложению.

 Изображение для сообщения

Изображение для сообщения

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

Изображение для сообщения

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

Важно: все из этих примеров доступны в Figma, так что вы можете протестировать и поэкспериментировать с каждой демонстрацией самостоятельно.

Почти на каждом (мобильном) веб-сайте и в приложении есть одно, печально известное гамбургер-меню. К счастью, это очень легко создать в Figma с помощью функции Smart Animate.

Изображение для сообщения

Как создать эту анимацию

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

Изображение для сообщения

Затем мы добавим соединение, триггер и анимацию, как описано в основах.

  1. Выберите значок гамбургера в первом кадре и откройте вкладку прототипа на правой боковой панели. Выберите On Tap в качестве взаимодействия для установки триггера анимации.
  2. Установите для взаимодействия значение Navigate To и выберите другой кадр. с мобильным меню в открытом состоянии или щелкните узел и перетащите его в следующий кадр.
  3. В разделе Анимация выберите Smart Animate из поля Transition .
  4. (необязательно) Примените Easing или измените Продолжительность перехода.

Изображение для сообщения

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

Повторите предыдущие шаги для второго кадра, но установите Navigate To обратно в кадр с меню в закрытом состоянии.

Изображение для сообщения

Вот и все! Затем вы можете перейти к тестированию анимации, щелкнув значок воспроизведения в правом верхнем углу Figma, чтобы открыть представление презентации. Теперь вы можете открывать и закрывать гамбургер-меню и видеть переход между двумя состояниями.

Изображение для сообщения

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

Как создать эту анимацию

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

Изображение для сообщения

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

Один для касания заголовка вкладки, а другой для перехода между разными вкладками.

Начнем с первого спусковой крючок; щелкнув заголовок вкладки.

  1. Выберите слой заголовка вкладки и снова откройте вкладку «Прототип» на боковой панели. Выберите On Tap в качестве взаимодействия для установки триггера анимации.
  2. Установите для взаимодействия значение Navigate To и выберите экран с помощью другая вкладка.
  3. В разделе Анимация выберите Push в Переходе Поле и выберите стрелку влево . Поскольку новая вкладка расположена справа от текущей вкладки, мы хотим, чтобы она двигалась справа налево.
  4. Убедитесь, что совпадающие слои Smart Animate имеют значение проверено . Таким образом, Figma не применяет переход к общим элементам обоих фреймов, таким как фон вкладки или строка состояния телефона.

Изображение  for post

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

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

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

  1. Для этого мы выберем всю группу, которая составляет содержимое вкладки, и добавим При перетаскивании .
  2. Установите для взаимодействия значение Перейти к и выберите экран с другой вкладкой.
  3. Мы можем использовать те же настройки анимации, что и первый триггер. В разделе Анимация выберите Push в поле Transition , но на этот раз мы выберем Стрелка вправо . Поскольку вкладка, к которой мы хотим перейти, теперь находится слева от нас.

Изображение для сообщения

И пролистывание, и касание заголовка вкладки теперь будут работать для первой вкладки, но мы пока не можем перемещаться обратно на главную страницу, поэтому нам нужно добавить те же триггеры для вкладки «Популярные».

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

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

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

Изображение для сообщения

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

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

Изображение для сообщения

Как создать эту анимацию

Во-первых, давайте скопируем дизайн, использованный в нашей предыдущей анимации скользящей вкладки. Затем мы добавим дополнительный фрейм между ними, содержащий наш дизайн состояния загрузки.

Изображение для сообщения

  1. Теперь мы можем добавить те же триггеры и анимацию, что и раньше, но вместо того, чтобы сразу переходить к вкладка «Популярные». Установите для него значение Navigate To и выберите кадр с состоянием загрузки.
  2. На кадре с нашим состоянием загрузки. Выберите триггер After Delay и установите для него значение Navigate To к следующему кадру в последовательности. В данном случае это вкладка «Популярные».. Вы можете установить задержку на столько, сколько хотите, в нашей анимации она будет ждать 800 мс , прежде чем «завершит» загрузку и содержимое станет видимым.
  3. Установить Animation на Smart Animate , чтобы экран скелета заменялся фактическим содержимым с плавным переходом затухания.

Изображение для сообщения

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

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

Изображение для сообщения

С годами приложения стали намного сложнее в потоке и иерархия, чем просто загрузка новой страницы по каждой ссылке. Мы регулярно «накладываем» контент поверх другого контента, особенно в одностраничных приложениях (SPA). Это означает, что мы не выполняем полную загрузку страницы, а вместо этого перемещаем контент внутрь и наружу в разных направлениях и хотим смоделировать это в наших проектах.

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

Как создать эту анимацию

Мы создадим справочник животных со страницей для каждого животного. Для выполнения этого перехода важно, чтобы имя слоя содержимого страницы соответствовало, чтобы Figma могла сопоставить их с помощью Smart Animate.

Изображение для сообщения

  1. Выберите один из блоков животных, в данном случае слона и установите триггер на On Tap и Navigate To на соответствующую страницу с животными.
  2. Установите тип перехода на Smart Animate . Вы можете настроить параметры замедления и скорость, но это необязательно.

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

Смахните, чтобы закрыть

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

  1. Выберите содержимое страницы, добавьте триггер При перетаскивании и установите для него значение Перейти к наша страница каталога животных.
  2. На вкладке Анимация выберите переход Slide Out и нажмите стрелку вправо , чтобы мы могли смахнуть в нужном направлении, чтобы закрыть его.
  3. Не устанавливайте флажок Smart Animate Match Layers , так как мы хотим смахнуть всю страницу вместо имеющий плавный переход между двумя страницами.

 Изображение для сообщения

Изображение для сообщения

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

Как создать эту анимацию

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

Изображение для сообщения

Мы Начну со списка выпусков подкастов. Чтобы включить эту анимацию, нам нужно превратить всю эту группу слоев в кадр. Превратив его в кадр вместо группы слоев, мы можем сделать содержимое этого кадра больше, чем его размеры, чтобы обеспечить вертикальную прокрутку.

Содержимое «Проверка обновлений» уже есть в первом кадре, хотя он еще не виден, поскольку скрыт за заголовком страницы.

Изображение для сообщения

Кадр 1 — кадр 2

Мы установим первый кадр в нашей последовательности на On Drag и Navigate To для второй страницы в нашей последовательности «Pull to refresh 01». В этом втором кадре мы сделаем копию первого кадра, но переместим содержимое вниз, чтобы теперь была видна группа «Проверка обновлений».

Изображение для публикации

Кадр 2 в кадр 3

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

Мы продублируем второй кадр для третьего кадра, но в в 3-м кадре мы установим поворот спиннера на -165 °

Изображение для сообщения

Для перехода между этими двумя кадрами мы будем использовать After Delay и установить это для перехода к третьему кадру в нашей последовательности после 500 мс . Мы установим переход на Smart Animate и используем Ease In в качестве типа перехода с задержкой 500 мс . . Задержка загрузки следующего кадра и перехода одинаковы.

Кадр 3 — кадр 4

В этом кадре мы создадим место для нового контента, который будет загружен. Этот шаг делает анимацию более плавной вместо того, чтобы контент появлялся из ниоткуда. Не удаляйте группу «Проверка обновлений» полностью, а поместите ее за заголовком страницы, как это было в первом кадре, и оставьте точное количество вертикального пространства, которое требуется для нового содержимого.

Изображение для сообщения

Чтобы он выглядел так, как будто данные были получены и загружены, мы настроим еще один After Delay и Navigate To к следующему кадру после задержка 1000 мс .

Для Animation мы будем использовать переход Dissolve поэтому статус «Проверка обновлений» исчезнет. Мы будем использовать более короткую продолжительность 100 мс для этой анимации, чтобы она быстро исчезла.

Изображение для сообщения

от кадра 4 до кадра 5

Все, что осталось, это показать только что загруженный контент в пространстве, которое мы создали в нашем предыдущем кадре. Добавьте новый контент в последний кадр и установите еще одну After Delay с очень короткой задержкой 25 мс перед переходом к последнему кадру.

Так как пользователи проводят обновление вниз, это выглядит более естественно, если контент скользит сверху, поэтому мы установим для Animation значение Slide In и нажмите стрелку вниз , чтобы новый контент скользнул в поле зрения. Мы можем добавить длительность этого перехода 200 мс .

Изображение для сообщения

Изображение для сообщения

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

Как создать эту анимацию

Чтобы прототипировать это в Figma, мы создадим два дизайна. Один в «нормальном» состоянии, а второй — в котором действия видны. Для последнего очень важно, чтобы действие не перекрывалось, а «выталкивало» старый контент, потому что, как и в случае с анимацией pull to refresh, нам нужно, чтобы контент превышал размер кадра, чтобы включить прокрутку.

Изображение для сообщения

  1. Выберите элемент, для которого нужно активировать действие, и выберите триггер On Drag , затем установите для него значение Navigate To второй вид, где видны действия.
  2. Для Animation выберите Smart Animate , и Figma автоматически узнает, как для перехода между этими двумя состояниями.

После того, как действия станут видимыми, нам нужно предоставить пользователю две возможности: отменить действие или выполнить действие. Мы создадим триггер для каждого из них, нажатие на эпизод подкаста отменяет действие. Нажатие кнопки удаления приведет к переходу к следующему кадру в последовательности.

Изображение для сообщения

Для отмены действия: выберите весь элемент, за исключением кнопки удаления. Установите для триггера значение On Tap и просто выберите Back в раскрывающемся списке действий, чтобы вернуться к предыдущему кадру.

Чтобы удаление элемента: нажмите кнопку удаления, выберите триггер On Tap , установите для него значение Navigate To и выберите следующий кадр в последовательности. Тип анимации — Slide In и выберите стрелку влево в том же направлении, что и наше смахивание, чтобы открыть кнопку удаления.. Обратите внимание, что вы можете просто перейти к следующему кадру, в котором элемент пропал, но, чтобы этот переход выглядел лучше, я сначала сделаю всю строку красной, чтобы показать, какой элемент был удален.

Для последнего кадр, мы просто снова добавляем триггер After Delay и устанавливаем для него значение Navigate To последнего кадра, в котором элемент удаляется после задержки 100 мс .

Мы можем снова использовать Smart Animate для перехода между этими двумя кадрами.

  Изображение для сообщения

Изображение для сообщения

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

Как создать эту анимацию

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

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

Изображение для сообщения

  1. Выберите кнопку или ссылку, которую вы хотите использовать для запуска модальное открытие. Выберите триггер On Tap и используйте Open Overlay , чтобы связать его с фреймом, содержащим ваше модальное окно.
  2. В Overlay , вы можете выбрать настройки для вашего модального окна. В этом случае мы выберем позицию По центру и отметим опцию Закрывать при нажатии снаружи .
  3. Затем сделайте так, чтобы убедитесь, что параметр Добавить фон за наложением установлен . Мы установим черный фон (# 000) и установим непрозрачность 40%. Это помогает модальному окну выделиться и показать пользователю, что остальная часть страницы недоступна, пока модальное окно открыто.
  4. Для Animation мы выберем Переместитесь в направлении вниз, нажав стрелку вниз . Это переместит модальное окно сверху.

Когда пользователь щелкает для подтверждения, он получает диалоговое окно подтверждения, поэтому нам нужно добавить дополнительный шаг к нашему модальному окну. Нажмите кнопку «Подтвердить» и используйте On Tap , чтобы установить ее в качестве триггера. Затем выберите Swap With и выберите следующий шаг в нашем модальном окне. Установите для этой анимации значение Instant .

Изображение для сообщения

Все, что осталось сделать пользователю, это закрыть модальное окно. Выберите текстовую ссылку «Закрыть» и используйте триггер On Tap для действия Close Overlay . Вы также можете применить эту опцию к кнопке «Отмена» на предыдущем шаге нашего модального окна.

Изображение для сообщения

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

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

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

Если вам нужна помощь с вашим следующим проектом, напишите мне по электронной почте: hello@jurn.io

Изображение для сообщения

Оцените статью
clickpad.ru
Добавить комментарий