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

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.

Последний метод, которым я поделюсь здесь, включает кодирование в 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 Очень ценятся дифференциация и еще одно о моушн-дизайне в дизайн-системах и, конечно, хлопки.