Как сделать фрейм в фигме

Обновлено: 07.07.2024

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

Зачем нужна анимация в дизайне

Наряду с градиентами и 3D-элементами, анимация является одним из главных трендов в дизайне, согласно исследованию сервиса Canva. Она привносит не только эмоциональные ощущения во время просмотра, но и делает интерфейс удобнее, так как анимация имитирует взаимодействие объекта с реальным миром.

В маркетинге анимация может влиять на конверсию: по данным Marketing Sherpa, компания Dell провела email-кампанию с использованием gif-анимаций и добилась конверсии на 109% больше обычного – более чем в два раза. Звучит круто! Но как сделать анимацию?

Инструменты для создания анимации в Фигме

В Фигме есть несколько способов создания анимации. Будем идти от простого к сложному.

Анимации в прототипировании

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

Создадим новый фрейм. Для знакомства с инструментами не обязательно рисовать полноценный интерфейс, достаточно любой фигуры. Нарисуем на нем прямоугольник или, как он обозначается в Фигме, Rectangle. Затем продублируем фрейм и уменьшим размеры нашей фигуры.

Выделим первый созданный Rectangle и перейдем во вкладку Prototype — она расположена в меню справа. В графе Interaction нажмем кнопку с плюсиком — так мы создадим новые взаимодействия с фигурой.

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

On click — при клике на объект (если выбран весь фрейм, а не объект, – то при клике на любую область фрейма).
On drug — при перетаскивании.
While hovering — при наведении.
While pressing — при удержании клика.
Key/gamepad — при нажатии на горячую клавишу.
Mouse enter — при появлении курсора в области объекта.
Mouse leave — при покидании объекта курсором.
Mouse down — в начале клика.
Mouse up — в конце клика.

Для примера оставим On click.

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

None — ничего не происходит.
Navigate to — перейти к (другому объекту/фрейму).
Open overlay — наложить поверх текущего фрейма.
Scroll to — пролистать до другого объекта в рамках одного фрейма.
Swap overlay — заменить один фрейм другим.
Back — перейти назад.
Close overlay — закрыть объект, наложенный поверх фрейма с помощью Open Overlay.
Open link — перейти по ссылке.

Чтобы наш большой Rectangle из первого фрейма превратился в маленький из второго, укажем в данном меню пункт Navigate to. Поскольку у нас всего два фрейма, Фигма проставляет его автоматом. Если фреймов больше, тогда нужно выбрать его из списка рядом с Navigate to или кликнуть на кружочек на боковой стенке объекта, после чего перетащить появившуюся синюю стрелочку к нужному фрейму.

Таким образом мы указали, что при клике на квадрат необходимо переходить на фрейм с маленьким квадратом.

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

Ниже в меню мы видим заголовок Animation, где мы как раз можем выбрать, каким образом будет происходить переход:

Instant — мгновенно.
Dissolve — растворение.
Smart animate — умная анимация (о ней поговорим ниже).
Move in — перемещение внутрь.
Move out — перемещение наружу.
Push — смахивание.
Slide in / Slide out — перемещение с растворением.

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

Linear — линейно (плавно).
Ease in — анимация начнется медленно и будет ускоряться к концу.
Ease out — анимация начнется быстро и будет замедляться к концу.
Ease in and out — анимация начнется медленно, ускорится и затем снова замедлится.
Ease in back — анимация отскакивает назад от исходной точки, а затем ускоряется.
Ease out back — анимация начинается быстро, затем замедляется и проскакивает вперед от конечной заданной точки.
Ease in and out back — анимация медленно отскакивает назад от исходной точки, ускоряется и снова замедляется, проскакивая вперед от конечной точки.
Custom — пользовательский вариант, позволяет вручную установить и настроить плавность.

Попробуем в нашем примере поставить переход Dissolve и плавность Ease in.

Таким образом мы задали анимацию изменения квадрата при клике на него. Запустим ее с помощью кнопки Present в верхнем меню справа или нажав на синюю стрелочку Flow 1 рядом с фреймом.

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

Умная анимация (Smart animate)

Smart animate — это один из типов переходов в Фигме, который самостоятельно анимирует схожие объекты. При этом Фигма учитывает имена объектов и их место в иерархии, распознает различия и только затем применяет переход для анимации между ними.

Продолжим работать с нашими квадратами и применим Smart animate. Для разнообразия сделаем второй квадрат зеленым и повернем его на 45 градусов. Затем зададим взаимодействие между квадратами и установим переход Smart animate.

Примеры простых анимаций

Изменение кнопки при наведении

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

В блоке Animation выбираем Dissolve и Easy out, чтобы анимация получилась плавной. Теперь смотрим, что получилось:

Перетаскивание ползунка

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

Создаем элементы дизайна: с помощью Rectangle – столбцы и сам ползунок с закругленными краями. Эллипсом делаем круг, который будем перетягивать на другую сторону.

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

Дублируем эти же настройки для нашего второго фрейма, только там в качестве события Navigate to будет первый фрейм. И смотрим, что получилось:

Выпадающее меню

Итоги

Параллакс анимация в Figma

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

Что будет в этом уроке

Мы сделаем такой красивый, эффектный и простой параллакс эффект:

Что такое параллакс эффект в веб-дизайне

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

Подготовка рабочего пространства в Figma, выбор фрейма

На основной панели инструментов Figma или с помощью клавиши F выберите нужный вам Frame — то рабочее пространство, где вы будете работать над созданием проекта.

Выбор фрейма на основной панели инструментов

Я выбрал для примера фрейм iPhone 11 Pro Max с размерами 414 х 896.

Рабочее пространство в Figma готово

Исходники

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

Поиск изображений

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

Мои фотографии для создания параллакс эффекта

Подготовка композиции в Photoshop

Дальше вырежем нужные фрагменты в фотошопе и создадим из них композицию с размером фрейма, который мы выбрали в Фигме. Это можно сделать с помощью любой техники обтравки: лассо, волшебная палочка, маски, каналы и так далее. Просто вырезаем нужный фрагмент и размещаем его на новом слое Photoshop (Ctrl+J).

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

Точно так же с помощью лассо и каналов создается подвесной вагончик.

Отделение вагончика от фонового изображения

Исходник для основной части облаков вырезать не пришлось, потому что нашлась фотография сразу с прозрачным фоном. Когда основные элементы готовы, создаем новый фрейм (артборд) в Photoshop с размерами 414 х 896 и переносим туда все вырезанные фрагменты:

Готовая композиция в Photoshop

Сохраняем отдельно каждый слой в формате PNG и переходим в фигму, у меня получилось 8 PNG файлов:

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

Размещение элементов на фрейме в Figma

Теперь все полученные PNG изображения нужно аккуратно разместить на созданном ранее рабочем пространстве в Figma.

Повторяем композицию в Figma

Возьмите за правило давать четкие и простые названия слоям, чтобы при работе с ними было проще ориентироваться в созданной композиции.

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

Добавление элементов — логотип, бургер меню и надпись

Frame готов, можно приступать к созданию анимации первого экрана.

Создание анимации первого экрана

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

Копируем Frame

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

Создание копии первого фрейма

Анимация в Figma работает следующим образом: фрейм проекта дублируется и на первом фрейме вносятся изменения, например можно передвинуть логотип и меню наверх. Затем с помощью режима Prototype создается связка со вторым фреймом и настраивается интерактив, то есть то как первый фрейм взаимодействует со вторым. Итог анимации в данном случае будет плавное появление логотипа и меню. Анимация в Figma это переключение между фреймами, здесь нет ключевых кадров как например в After Effects.

Сдвигаем объекты шапки первого фрейма

Убираем логотип и бургер меню вверх, за пределы фрейма:

Сдвигаем логотип и бургер меню на первом фрейме

Тут есть один нюанс: когда выносишь элемент за пределы фрейма то он выносится из фрейма и на панели слоев.

Объекты вынесены за пределы фрейма на панели Layers

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

Возвращение элементов внутрь фрейма

Отлично, разобрались с объектами и фреймом, вернемся к анимации. Чтобы посмотреть получившуюся анимацию нужно связать первый фрейм со вторым, настроить анимацию и перейти в режим просмотра прототипа в реальном времени (Present).

Режим Prototype

Справа на панели свойств выбираем вкладку Prototype (режим прототипирования), переходим на первый фрейм, в середине появится кружок с синей обводкой. Захватываем этот кружок мышкой и тянем появившуюся стрелку до второго фрейма, после того как стрелка прилипнет к нему, справа появится окно настройки интерактивного взаимодействия с интерфейсом и анимации (Interactive details & Animation).

Связываем два фрейма в режиме Prototype

Настраиваем анимацию

Выставляем следующие параметры:

В блоке Interaction Details (детали взаимодействия) выбираем After Delay (действие с задержкой) и напротив ставим тайминг 200ms, этого будет вполне достаточно чтобы не ждать появление элементов долго, но в тоже время чтобы они не появились мгновенно, нужно успеть все рассмотреть. В блоке Animation (анимация) из выпадающего списка выбираем пункт Smart Animate (умная анимация), ниже указываем свойство анимации Ease Out (плавное затухание), а тайминг ставим 800ms, это нужно для того чтобы анимация была плавной. Протестируем и посмотрим что получилось, для этого в верхнем правом углу есть кнопка Present (представлять).

Кнопка Present для перехода в режим просмотра прототипа

Тестируем анимацию

Нажимаем на кнопку Present и в режиме просмотра прототипа смотрим результат:

Получившаяся анимация в режиме просмотра прототипа

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

Настраиваем режим просмотра прототипа

Еще одна важная деталь: фон и корпус смартфона в режиме просмотра также можно поменять. Кнопка Show Prototype Settings (показать настройки прототипа) на вкладке Prototype:

Настройка фона и модели для режима просмотра прототипа

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

Настраиваем появление всех элементов первого экрана

Горы и нижние облака вместе с надписью опускаем чуть ниже, надпись не выносим за пределы фрейма, а в свойствах на вкладке Design устанавливаем прозрачность 0% также как фоновой картинке и верхнему небосводу, облако посередине сдвигаем влево.

Настройка прозрачности и перенос элементов

Тестируем анимацию первого экрана

Нажимаем на иконку Present для того чтобы протестировать анимацию.

Анимация появления первого экрана

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

Настройка прозрачности слоя с вагончиком

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

Создание интерактивной анимации

Для создания интерактивной анимации понадобится третий фрейм. Его легко создать из второго фрейма сделав копию — зажимаем мышкой левый верхний угол второго фрейма и тянем его вправо с зажатой клавишей Alt. Далее на третьем фрейме делаем те же манипуляции что и на первом: смещаем слои и используем прозрачность. Затем связываем фреймы в режиме прототипа и настраиваем интерактив и анимацию.

Настраиваем появление элементов третьего фрейма

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

Элементы третьего фрейма

Связываем второй и третий фрейм в режиме Prototype и настраиваем анимацию

Переходим на вкладку Prototype и стрелочкой связываем второй и третий фрейм. В появившемся справа окне указываем следующие параметры:

В первом блоке выбираем On Drag (перетаскивание), это нужно для интерактивного взаимодействия с прототипом, ну как будто мы пальцем сдвигаем страницу вверх, во втором блоке скорость анимации меняем на 1100ms, все остальное оставляем без изменений. Тестируем:

Тестирование интерактивной анимации в режиме просмотра прототипа

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

Настраиваем обратную связь для возврата на предыдущий фрейм

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

Связываем третий фрейм со вторым в обратном порядке

Далее в настройках выбираем On Drag, а анимацию на возвращение делаем чуть быстрее — 1000ms, все остальное без изменения:

Тестирование интерактивной анимации скроллирования вверх и вниз

Отлично, для финального варианта не хватает контента на темном фоне. Добавьте его самостоятельно, можно добавить блок текста или карточки:

Финальное тестирование интерактивной анимации

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

Финальный результат

Финальный результат с появлением первого экрана и интерактивной анимацией

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

P/S/ Запилю чуть позже гайд по созданию верхней иллюстрации (если будет лень то не запилю), которая готовилась специально для этого урока

Чтобы в разы ускорить разработку - использование клавиатурных сокращений обязательно.

Найти все клавиатурные сокращения вы можете, нажав в левом нижнем углу на знак вопроса и, перейдя во вкладку “Keyboard Shortcuts”. Или вы можете использовать клавиатурное сокращение “Ctrl + Shift + ?”.

Ниже я привел скриншоты с разделами, а также с переводом.

Вкладка №1 (Основные параметры)

Вкладка №2 (Инструменты)

Столбец №1:

1 - Стандартный инструмент выделения
2 - Инструмент создания фреймов
3 - Инструмент “Перо”
4 - Инструмент “Карандаш” (Как “Перо” только рисовать можно любые формы)

Столбец №2:

1 - Инструмент “Текст”
2 - Инструмент “Прямоугольник”
3 - Инстурмент “Элипс”
4 - Инструмент “Линия”
5 - Инструмент “Стрелка”

Столбец №3:

1 - Добавить или показать комментарии к текущему макету
2 - Инструмент “Пипетка”
3 - Инструмент “Нож” (Вырезает область в виде картинки)

Вкладка №3 (Просмотр):

Столбец №1:

1 - Показать/Скрыть “Линейки”
2 - Показать/Скрыть “Обводки всех элементов”
3 - Показать/Скрыть “Пиксельный просмотр”

Столбец №2:

1 - Показать/Скрыть “Сетку”
2 - Показать/Скрыть “Пиксельную сетку”

Столбец №3:

1 - Показать/Скрыть “Боковые панели”
2 - Показать/Скрыть “Курсоры других пользователей”
3 - Показать/Скрыть “Только слои”
4 - Показать/Скрыть “Только компоненты”
5 - Показать/Скрыть “Многопользовательская библиотека”

Вкладка №4 (Масштабирование):

Столбец №1:

1 - Перемещение по рабочему пространству
2 - Увеличение масштаба
3 - Уменьшение масштаба
4 - Включить отображение 1:1 к экрану

Столбец №2:

1 - Масштабировать все рабочее пространство
2 - Масштабировать выделенный элемент
3 - Масштабировать предыдущий фрейм
4 - Масштабировать следующий фрейм

Столбец №3:

1 - Предыдущая страница
2 - Следующая страница
3 - Предыдущий фрейм
4 - Следующий фрейм

Вкладка №5 (Инструмент “Текст”):

Столбец №1:

1 - Выделить жирным
2 - Выделить курсивом
3 - Подчеркнуть
4 - Вставить и сопоставить элемент

Столбец №2:

1 - Выровнять текст по левому краю
2 - Выровнять текст по центру
3 - Выровнять текст по правому краю
4 - Выровнять текст по ширине

Столбец №3:

1 - Изменение размера текста
2 - Изменение расстояния между символами
3 - Изменение расстояния между строками

Вкладка №6 (Векторные изображения):

Столбец №1:

1 - Перо
2 - Карандаш
3 - Заливка

Столбец №2:

1 - Удалить заливку
2 - Удалить обводку
3 - Поменять местами обводку и заливку
4 - Преобразовать в кривые
5 - Также преобразование в кривые (но функция отличается, я ей не пользуюсь)

Столбец №3:

Работа с точками векторных изображений (Эти функции я не использую)

Вкладка №7 (Выделение):

Столбец №1:

1 - Выделить все
2 - Выделить все, кроме…
3 - Отменить выделение
4 - Выделение слоев, которые находятся под другими слоями
5 - Выделение слоя на боковой панели

Столбец №2:

1 - Выделить дочерний элемент
2 - Выделить родительский элемент
3 - Выделить следующий по порядку элемент
4 - Выделить предыдущий по порядку элемент

Столбец №3:

1 - Сгруппировать элементы
2 - Разгруппировать элементы
3 - Преобразовать в фрейм
4 - Показать/Скрыть элемент
5 - Заблокировать/Разблокировать элемент

Вкладка №8 (Курсор):

Столбец №1:

1 - Выделение элемент при клике
2 - Копирование элемент при движении

Столбец №2:

1 - Выделение слоев, которые находятся под другими слоями
2 - Показывается иерархия выделенного элемента

Столбец №3:

1 - Изменение размера относительно центра элемента
2 - Изменение размер пропорционально
3 - Перемещение во время изменения размеров элемента

Вкладка №9 (Редактирование):

Столбец №1:

1 - Копировать
2 - Вырезать
3 - Вставить
4 - Вставить поверх выделенного элемента

Столбец №2:

1 - Создание копии
2 - Переименование
3 - Экспорт элемента

Столбец №3:

1 - Копировать свойства элемента
2 - Вставить скопированные свойства

Вкладка №10 (Трансформирование):

Столбец №1:

1 - Отразить по горизонтали
2 - Отразить по вертикали
3 - Создать маску

Столбец №2:

1 - Включить редактирование векторных объектов или изображений
2 - Вставить изображение
3 - Обрезать изображение

Столбец №3:

1 - Задать прозрачность элементу - 10%
2 - 50%
3 - 100%

Вкладка №11 (Выравнивание):

Столбец №1:

1 - Переместить на 1 уровень ближе к переднему плану
2 - Переместить на 1 уровень дальше от переднего плана
3 - Переместить на передний план
4 - Переместить на задний план

Столбец №2:

1 - Выровнять по левой стороне
2 - Выровнять по правой стороне
3 - Выровнять по верхней стороне
4 - Выровнять по нижней стороне

Столбец №3:

1 - Выровнять согласно горизонтальной линии элементов
2 - Выровнять согласно вертикальной линии элементов
3 - Не пользуюсь функцией
4 - Выравнивание с распределением горизонтального пространства
5 - Выравнивание с распределением вертикального пространства

Вкладка №12 (Компоненты):

Также очень важный вопрос: как отменить действие в фигма? Для того чтобы отменить действие в Figma - нужно всего лишь нажать клавиатурное сокращение "Ctrl + Z". И в зависимости от количества нажатий, вы отмените предыдущие действия.

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

Анна, привет! Если ты хочешь обрезать изображение — можно воспользоваться специальной для этого функцией — Crop Image. А внутри фрейма как двигать — сначала кликаешь на изображение, и когда оно выбрано — двигаешь. Если выбирается фрейм — нужно два раза кликнуть по изображению, чтобы его выбрать, и потом двигать. И если нужно скрыть изображение за границами фрейма — убедись, что у фрейма стоит вот эта галочка в правой панели.

Доброго времени! Заранее простите за долгое и путаное объяснение :)

Есть такой текст (прилагаю скрин ниже). Я хочу, чтобы нижняя строка была отцентрирована относительно верхней (чтобы средние вертикальные линии заглавных букв совпадали). Текст "монолитный" (на одном слое). Если пытаюсь увеличить отступ для нижней строки (чтобы отцентрировать относительно верхней), вместе с ней в ту же сторону "едет" и верхняя. Понимаю, что проблему можно было бы решить, расположив верхнюю и нижнюю строки на разных слоях, но тогда "теряется" цветовой градиент (нужно, чтобы цветовая растяжка была именно как на представленном скрине).
Пыталась все-таки создать два слоя, объединить их выделением с помощью Shift и поставить те же самые цветовые настройки (мне казалось, тогда Фигма посчитает их единым целым, как если бы строки были на одном слое), но не получилось, цветовая растяжка выходит не такой, как раньше :(
Помогите, пожалуйста.

White, привет! Чтобы градиент растягивался на оба слоя, можно слои объединить при помощи булевой операции объединения — Union Selection. Подробнее о булевых операциях можно узнать из видео.

Читайте также: