Figma Config 2026 — Анимация с помощью нового инструмента Figma Motion

19 Просмотры
Издатель
На конференции Figma Config 2026 разработчики представили функционал, который ждали все ui/ux дизайнеры — встроенный инструмент для анимации Figma Motion.
Обучение Figmaс нуля — https://cloudlessons.ru/c/27057

Теперь веб-дизайн и комплексная анимация в фигма выходят на совершенно новый уровень. Больше не нужно экспортировать слои в сторонние сервисы вроде After Effects, Gitter или Principle, чтобы создать анимацию прототипа. Всё делается нативно, быстро и внутри одной рабочей среды.

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

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

Ключевые кадры (Keyframes) и автоматическая анимация: Пошагово разберем, как анимировать позицию, масштаб (Scale), прозрачность (Opacity), размеры и цвет объектов. Настроим режим Toggle Auto Keyframing для автоматической расстановки ключей при перемещении элементов.

Режимы воспроизведения таймлайна: В чем разница между Loop (петля) и Pin-pong и как управлять характером цикличного движения.

Тайм-коды и комментарии: Фишка для командной работы — учимся оставлять правки прямо на таймлайне с жесткой привязкой к конкретному кадру

Продвинутая работа с графиками скорости (Easings): Уходим от линейного движения. Настраиваем физически корректный и реалистичный отскок объектов с помощью кривых скорости.

Переменные (Variables) и компоненты в Motion: Как создавать переменные для таймингов и изингов, тестировать разные варианты отображения без переделки сцены, а также делать красивое каскадное появление элементов (Stagger) для таблиц и списков через мастер-компоненты.

AI Агенты в Figma: Тестируем генерацию анимации по текстовому промту (пока функция находится в бете — это полностью бесплатно). Разбираемся, стоит ли отдавать рутину искусственному интеллекту?

Экспорт готового результата: Как правильно выбрать фрейм для рендера и сохранить анимацию в форматы MP4, WebM, GIF или SVG в высоком качестве.

#figma #ui #вебдизайн
Категория
AI Инструменты
Комментариев нет.