Урок зі створення анімації у Figma, використовуючи плагін Figmotion

7. Чудово! Все готове. Тепер давайте повернемося до нашого артборда (вибачте, кадру). Я хочу вам дещо сказати, якщо ви не використовуєте Android-девайси:

У вас не завжди буде доступ до різних інструментів і пристроїв, і іноді вам слід створювати дизайн для того, що ви ніколи раніше не використовували (допоможуть вам Youtube і Google). Не допустіть, щоб щось завадило формувати майбутнє дизайну!

Оскільки ви мені подобаєтеся, ви можете завантажити Google Фото UI kit на посилання нижче:

У наведених вище файлах ви знайдете елементи інтерфейсу Google Фото. Я настійно рекомендую вам не завантажувати UI Kit, доки ви не прочитаєте всю статтю, а для цієї статті нам потрібний лише перший файл (необхідні елементи).

У цій статті не описано, як спроектувати у Figma компонент або дизайн-систему. Я знаю найкращі способи створення компонентів, але для простоти ми використовуємо дані компоненти лише як необхідні елементи для відтворення Google Фото.

8. Скопіюйте та вставте необхідні елементи у ваш робочий простір (файл, який ви створили раніше). Тепер ви повинні побачити щось на кшталт цього:

Назвемо перший артборд "Photos"

Нам не потрібно більше двох артбордів, щоб окремо показати меню, що випадає (Dropdown menu) і бічну панель (Navigation Drawer). Отже, почнемо із цих простих анімацій. Перш ніж почати, я хочу розповісти вам дещо про Figmotion.

Figmotion працює як After Effects, і якщо ви хочете зробити анімацію, вам не потрібно створювати різні артборди, тому що цей плагін не може поєднувати різні артборди та виявляти зміни, які були застосовані до елементів артбордів.

Що таке статки?

Уявіть, що ви купуєте одяг у торговому центрі «А»; Через півгодини ви йдете до торгового центру «Б», щоб купити щось ще. Коли ви залишили торговий центр «А» і пішли до торгового центру «Б», ваше місцезнаходження на карті змінилося, але ви не змінилися (я маю на увазі, що ви все та сама людина).

Ми використовуємо цю філософію для створення анімації. Коли ви натискаєте на прямокутник "А", і цей прямокутник переміщається, ви не бачите два різні прямокутники. Ви просто бачите, як змінюється положення прямокутника на екрані. Іноді ми змінюємо інші атрибути елемента, такі як непрозорість, колір і т.д., але ми не змінюємо сам елемент, ми просто змінюємо його атрибути.

Ми все ще бачимо квадрат, змінився лише вигляд цього квадрата. Уявіть, що квадрат «переодягся»

Перша анімація: Поява бічної панелі

Оскільки ми хочемо зробити цей прототип реальнішим, ми відтворимо ефект кліка. Я маю на увазі, що ви натискаєте на гамбургер-меню і з'являється бічна панель.

Ми хочемо відтворити цю анімацію

Прочитайте наведені нижче кроки, щоб відтворити сторінку Photos, а також анімацію появи бічної панелі:

1. Створіть новий артборд і назвіть його Photos. Перегляньте gif-файл нижче, щоб додати необхідні елементи для відтворення сторінки «Photos»:

1. Тепер потрібно додати елементи, необхідні для бічної панелі. Ми додаємо Navigation Drawer з розділу «Assets», а потім створюємо чорний прямокутник, щоб приховати елементи позаду Navigation Drawer (змініть непрозорість чорного прямокутника зі 100% до 50%):

1. Відкрийте плагін Figmotion. Ми створимо 3 стани: 0 мілісекунд (A), 300 мілісекунд (B), 700 мілісекунд (C).Ми встановимо непрозорість чорного прямокутника для станів A та B рівної 0, а для стану C задамо непрозорість 0,5 (означає 50%):

№3 Ми змінили непрозорість чорного прямокутника з 0 на 0,5 третього стану. Таким чином, чорний прямокутник з'являється, коли бічна панель починає рухатися.

1. Тепер хочемо показати бічну панель. Вона з'являється з лівого боку екрана. Тому потрібно змінити її положення по осі X з (-410) для станів A і B на (0) для стану C:

1. Уважно прочитайте цей крок, тому що ми будемо використовувати його далі, щоб відтворити поведінку під час натискання.

• Нам потрібно створити коло (Розмір: 45px * 45px / Колір: C4C4C4 / Непрозорість: 50% / Ефект: Drop Shadow).
• На відміну від інших елементів, ми будемо використовувати для цього кола чотири стани: 0 мс (A), 250 мс (B), 300 мс (C) та 350 мс (D). 700 мс (E) буде використовуватися, щоб показати зміни, які були застосовані до непрозорості кола.
• Нам потрібно змінити його координати по осях X і Y (щоб показати користувачам, що коло рухається): A: X = 322 / Y = 138 B: X = 27 / Y = 250 C: X = 27 / Y = 250 D: X = 27 Y = 250
• Тепер нам потрібно зменшити його розмір, при натисканні на гамбургер-меню: A: Ширина = 45 / Висота = 45 B: Ширина = 45 / Висота = 45 C: Ширина = 35 / Висота = 35 D: Ширина = 45 / Висота = 45
• Як остання зміна, ми приховаємо коло після натискання на гамбургер-меню: A: Непрозорість = 0.5 (і B) C: Непрозорість = 0.5 ( і D) E: A: Непрозорість = 0

№5 Зміни, які потрібно застосувати до кола, щоб імітувати поведінку натискання

Гарна робота! Результат виглядатиме приблизно так:

Ми могли б покращити поточну форму анімації кліків або таймінг та навіть плавність. Обіцяю, у моїй наступній статті ви дізнаєтесь, як це зробити:)

Друга анімація: поява меню, що випадає

Тепер ми відтворимо зовнішній вигляд меню.

Ми збираємося відтворити цю анімацію

Просто прийміть до уваги! Ми використовуємо тінь для елементів, щоб показати користувачам, який елемент знаходиться нижче.

Який із них ближче до екрану? (Рада: щоб дізнатися, який елемент розташований поверх іншого, подивіться на їх тіні)

Щоб відтворити анімацію появи меню, нам знову потрібно створити артборд і використовувати необхідні елементи. Виконайте такі кроки, щоб відтворити сторінку «Photos», а також анімацію появи меню, що випадає:

1. Створіть новий артборд і назвіть його Photos. Подивіться на gif-файл нижче, щоб додати необхідні елементи для відтворення сторінки «Photos»:

1. Тепер нам потрібно додати необхідні елементи для меню, що випадає. Ми додаємо компонент «More» з розділу «Assets», а потім відключаємо його, тому що хочемо застосувати зміни до іконок і форми меню, що випадає окремо.

Нам потрібно змінити положення іконок меню, що випадає, а також ширину і висоту його форми, щоб відтворити другу анімацію:

1. Перетворіть групу «Icons» на компонент, тому що Figmotion не підтримує групи:

1. Відкрийте плагін Figmotion. Ми збираємося створити 3 стани: 0 мс (A), 300 мс (B), 700 мс (C). Спочатку ми змінимо положення компонента Icons по осях X і Y:

• Нам потрібно змінити положення X та Y (щоб показати користувачам, що цей компонент переміщається): A: X=210/Y=69 B: X=210/Y=69 C: X=190/Y=82
• Також нам потрібно змінити його непрозорість, тому що іконки не видно у станах A та B: A: Непрозорість = 0 B: Непрозорість = 0 C: Непрозорість = 1

1. Тепер нам потрібно попрацювати над формою меню, що випадає, і змінити його позицію X, а також ширину і висоту.Також нам потрібно змінити непрозорість форми меню, що випадає, оскільки воно не відображається в станах A і B:

• Нам потрібно змінити ширину і висоту шару Shape: A: Ширина = 180 / Висота = 318 B: Ширина = 180 / Висота = 318 C: Ширина = 219 / Висота = 387
• Крім того, нам потрібно змінити положення X шару Shape (ми змінюємо його, тому що ми хочемо, щоб права сторона залишилася незмінною) A: X = 217 B: X = 217 C: X = 178
• Як остання зміна ми змінимо непрозорість шару «Shape»: A: Непрозорість= 0 B: Непрозорість= 0 C: Непрозорість= 1

1. Як вправу відтворіть поведінку при натисканні на кнопку "More" (я вже пояснив послідовність дій вище).

Отриманий результат має виглядати приблизно так:

Я зменшив швидкість gif-файлу, щоб було краще видно, як працює ця анімація (ми змінили ширину і висоту прямокутника меню, що випадає, і його позицію X. Також ми змінили положення X і Y іконок меню, що випадає)

Третя анімація: зображення

Як третю анімацію ми збираємося відтворити анімацію появи зображення при натисканні на нього. Подивіться на малюнок нижче, щоб краще зрозуміти, що я маю на увазі:

Ми збираємось відтворити це

Якщо ви старанний учень, ви можете помітити, що в першому стані (перед тим, як ми натиснемо на зображення), це зображення маскується квадратом, а потім квадрат стає прямокутником, щоб показати всю картинку.

1. Створіть новий артборд, назвіть його Images і подивіться на gif-файл нижче, щоб додати необхідні елементи для відтворення сторінки Photos:

1. Тепер нам потрібно додати елементи "Image Actions" та "Image Options", коли ми хочемо повністю показати зображення:

№2 Додавання обов'язкових елементів

1. Оскільки ми збираємося змінити кожен шар елементів «Image Actions» та «Image Options», від'єднайте ці компоненти та перейменуйте шари. Видаліть шар прямокутника з цих елементів, тому що він не потрібний, а також видаліть іконку «More» з елемента «Image Actions».

1. Також нам потрібно від'єднати елемент Search Bar, тому що нам потрібна іконка More. Як ви можете помітити, нам потрібно змінити колір іконки More з сірого на білий, коли користувачі натискають на зображення.

1. Ми також повинні від'єднати "Navigation Bar" і "Status bar", тому що пізніше хочемо змінити колір їх іконок. Не забудьте перейменувати шари, щоб їх було простіше знайти у Figmotion:

1. Нарешті, ми також повинні від'єднати елемент Images, тому що перше зображення буде використано пізніше для завершення цієї анімації. Коли ви вимкнете цей елемент, ви побачите дві групи: «August» та «July». Знову перетворіть групу «July» на компонент, інакше її елементи не будуть видно у Figmotion:

1. Додайте чорний прямокутник, який відображатиметься під час натискання зображення. Встановіть його непрозорість на «0%:

1. Тепер ми готові відкрити плагін Figmotion та відтворити третю анімацію. Ми будемо використовувати три стани для цих елементів:

• Image: 0 мс (A), 300 мс (B) та 700 мс (C )
• Status bar, Navigation bar, іконка More, чорний прямокутник, Image actions та Image options: 0 мс (A), 300 мс (B), 500 мс (C )

Чому? Тому що ці елементи будуть змінені, перш ніж зображення відкриється повністю.

№9 Це зображення марно

1. Тепер відкриємо плагін Figmotion і змінимо поведінку «Image».

Нагадаю, що його стани: 0 мс (A), 300 мс (B) та 700 мс (C)

• Розмір: A: Ширина = 99 / Висота = 99 B: Ширина = 99 / Висота = 99 C: Ширина = 411 / Висота = 327
• Позиція: A: Y = 163 B: Y = 163 C: Y = 248

1. Тепер ми повинні змінити поведінку чорного прямокутника, який ми створили раніше:

Нагадаю, що його стани: 0 мс (A), 300 мс (B) та 500 мс (C)

1. На цьому етапі ми збираємося змінити поведінку елементів компонента "Image Actions": "Back", "Favourite" та "Upload".

Нагадаю, що його стани: 0 мс (A), 300 мс (B) та 500 мс (C)

1. Тепер ми хочемо змінити поведінку елементів "Navigation Bar", а також іконки "More".

Нагадаю, що їх стани: 0 мс (A), 300 мс (B) та 500 мс (C)

• Navigation Bar / Back A: Stroke Color = 0 B: Stroke Color = 0 C: Stroke Color = 1
• Navigation Bar / Home A: Fill Color = 0 B: Fill Color = 0 C: Fill Color = 1
• Значок "More" A: Fill Color = 0 B: Fill Color = 0 C: Fill Color = 1

1. Як останній крок ми змінимо колір іконок рядка стану:

Нагадаю, що їх стани: 0 мс (A), 300 мс (B) та 500 мс (C)

• Status Bar / Time A: Fill Color = 0 B: Fill Color = 0 C: Fill Color = 1
• Status Bar / Charge Percent A: Fill Color = 0 B: Fill Color = 0 C: Fill Color = 1
• Status Bar / LTE A: Fill Color = 0 B: Fill Color = 0 C: Fill Color = 1
• Status Bar / Network A: Fill Color = 0 B: Fill Color = 0 C: Fill Color = 1
• Status Bar / Battery / Charge (це іконка) A: Fill Color = 0 B: Fill Color = 0 C: Fill Color = 1
• Не змінюйте Status Bar/Battery/Shape!

1. Ми дещо забули! Що? Нам потрібно змінити непрозорість іконок Image Options.

Нагадаю, що їх стани: 0 мс (A), 300 мс (B) та 500 мс (C)

• Image Options / 1 A: Непрозорість = 0 B: Непрозорість = 0 C: Непрозорість = 1
• Image Options / 2 A: Непрозорість = 0 B: Непрозорість = 0 C: Непрозорість = 1
• Image Options / 3 A: Непрозорість = 0 B: Непрозорість = 0 C: Непрозорість = 1
• Image Options / 4 A: Непрозорість = 0 B: Непрозорість = 0 C: Непрозорість = 1

№15 Я застосував ці зміни до однієї іконки, але ви повинні це зробити і для інших іконок Image Options

Чудово! Я чекаю, що ви створили щось на зразок цього чи навіть краще. Як ви можете помітити, миша поводиться не дуже, але це не має великого значення! Давайте подивимося на gif-файл нижче:

Четверта анімація: перемикання між вкладками

Настав час найскладнішої анімації! Давайте спочатку подивимося на анімацію нижче:

На перший погляд, все виглядає дуже просто, але ви помітили, як змінюються іконки?

Дозвольте мені пояснити, що ми збираємося зробити:

• Змінити радіус країв прямокутника, щоб показати користувачам, що вибрано вкладку «Albums».
• Змінити стиль іконки Photos, тому я відтворю цю іконку.
• Змінити стиль іконки "Albums", тому я відтворю цю іконку.
• Показати вміст вкладки «Albums»

1. Давайте відтворимо це разом, створивши новий артборд та додавши необхідні елементи:

1. Оскільки нам потрібно показати вкладку "Albums", необхідно додати компонент "Albums":

1. Від'єднайте елемент «Bottom Bar» та створіть окрему групу для кожної іконки:

№5 Не бійтеся створити нову іконку чи відтворити те, що вже створено!

1. Ми повинні змінити назву шарів вкладки "Photos", як показано нижче:

• Mountain → Photos / Mountain
• Square → Photos / Shape
• Також зробіть копію шару "Photos/Shape" і змініть його ім'я на: "Photos/Shape/Back". Нам потрібно застосувати такі зміни до цього шару: видалити Fill, додати внутрішній кордон (Inside Border / Розмір: 2 / Колір: #767676). Він має бути нижчим, ніж шар «Photos / Shape».

Чому ми зробили копію шару «Photos / Shape»? Ми дізнаємося про це, коли він зникне.

1. Відтворення "Albums" буде досить складним, але, як я вже казав, не бійтеся цього! Ми спробуємо створити значок книги.

• Перший крок: створити квадрат і спробуйте розмістити його на квадраті основної іконки.
• Другий крок: створіть вектор, подібний до того, як на gif-файл нижче, і змініть радіус його основного кута на 2.

• Третій крок: змініть колір обведення квадрата на # 767676 (Видалить опцію "Fill" / розмір обведення = 2) і змініть векторну обведення на # 767676.

• Четвертий крок: створіть ще один вектор, як на gif-файлі нижче і залийте його наступним кольором: # 767676.

• П'ятий крок: перейменуйте квадрат і вектори: Square → Albums / Shape First vector → Albums / Line Second vector → Albums / Complete

Шостий крок: зробіть копію "Albums/Shape", видаліть опцію "Stroke" і позначте опцію "Fill". Залийте фігуру цим кольором: #1D6DDF і встановіть його непрозорість за промовчанням 0%.

Також змініть його ім'я на "Albums/Shape/Back" (коли "Albums/Shape" зникнуть, ми покажемо його):

• Сьомий крок: змініть порядок "Albums/Shape", "Albums/Line", "Albums/Shape/Back" та "Albums/Complete", як показано на малюнку нижче:

1. Створіть новий прямокутник (погляньте на основну анімацію, щоб зрозуміти, чому ми хочемо додати прямокутник на нижню панель!) та змініть його ім'я на «Rectangle / Tap». Його положення у вікні «Layers» має бути нижчим, ніж іконки, які ми створили раніше, та їхні мітки:

• Заливка: #1D6DDF Непрозорість: #10 Радіус: 40

1. Відкрийте Figmotion і давайте відтворимо останню мікровзаємодію. Нам потрібно використовувати три стани:

• Елемент "Albums": 0 мс (A), 700 мс (B), 900 мс (C)
• Інші елементи та шари: 0 мс (A), 300 мс (B), 700 мс (C)

Чому? Тому що елемент Albums з'являється після того, як користувач натиснув на вкладку Albums, а елемент Images зник.

Спочатку ми відтворимо анімацію зникнення елемента "Images":

Нагадую, його стани становлять: 0 мс (A), 300 мс (B) та 700 мс (C)

• Компонент "Images": Стан A: Непрозорість = 0 Стан B: Непрозорість = 0 Стан C: Непрозорість = 1

1. На цьому етапі настав час змінити ефект зміни стилю іконки вкладки «Photos»:

Нагадаю, що його стан дорівнює 0 мс (A), 300 мс (B) та 700 мс (C)

• Photos/Shape: ми змінимо його непрозорість зі 100% до 0%. Стан A: Непрозорість = 1 Стан B: Непрозорість = 1 Стан C: Непрозорість = 0
• Photos / Mountain: нам потрібно змінити колір з #FFFFFF на #272727. Стан A: Колір заливки = #FFFFFF Стан B: Колір заливки = #FFFFFF Стан C: Колір заливки = #272727
• Photos (Text): нам потрібно змінити його колір з #1D6DDF на #272727. Стан A: Колір заливки = #1D6DDF Стан B: Колір заливки = #1D6DDF Стан C: Колір заливки = #272727
• Не змінюйте непрозорість «Photos/Shape/Back», його непрозорість завжди має бути 1.

1. Тепер ми хочемо відтворити ефект натискання (я маю на увазі, що ми покажемо останній прямокутник, який ми створили для імітації ефекту натискання):

Його стани: 0 мс (A), 300 мс (B), 700 мс (C) та 900 мс (D).

• Прямокутник / Tap: ми збираємося змінити радіус його непрозорості з 0% до 10% (стан B -> стан C), а потім змінимо його на 0%, щоб приховати цей прямокутник (стан C -> стан D). Стан A: Непрозорість = 0 Стан B: Непрозорість = 0 Стан C: Непрозорість = 0.10 Стан D: Непрозорість = 0
• Прямокутник / Tap: також ми повинні змінити радіус його кутів із 40 на 0. Стан A: Border radius = 40 Стан B: Border radius = 40 Стан C: Border radius = 0

Ми не змінюватимемо радіус межі кутів цього прямокутника в останньому стані (900 мс).

1. На цьому етапі настав час змінити ефект зміни стилю іконки вкладки «Albums»:

Нагадаю, що його стани: 0 мс (A), 300 мс (B) та 700 мс (C)

Albums (мітка): нам потрібно змінити її колір з #272727 на #1D6DDF

Стан A: Колір заливки = #272727

Стан B: Колір заливки = #272727

Стан A: Непрозорість = 1

Стан B: Непрозорість = 1

Стан A: Непрозорість = 1

Стан B: Непрозорість = 1

Стан A: Stroke Color = #272727

Стан B: Stroke Color = #272727

Стан A: Колір заливки = #272727

Стан B: Колір заливки = #272727

1. Це останній крок, перш ніж я дам вам вправу! Знову погляньте на основний gif-файл, який використовувався для відтворення його мікровзаємодії. Ви могли помітити, що компонент "Albums" переміщається трохи вгору, а потім з'являється. Отже, нам потрібно змінити його позицію Y, а також його непрозорість:

Нагадаю, що його стани: 0 мс (A), 700 мс (B) та 900 мс (C)

• Albums (компонент, який був доданий на артборд на другому кроці): як я вже казав, нам потрібно змінити його позицію Y. Стан A: Y= 155 Стан B: Y= 155 Стан C: Y= 140
• Також нам потрібно змінити його непрозорість: Стан A: Непрозорість = 0 Стан B: Непрозорість = 0 Стан C: Непрозорість = 1

1. Як вправу створіть коло та змоделюйте поведінку натискання (я маю на увазі створіть коло, перемістіть його, а потім змініть його розмір, щоб імітувати поведінку натискання).

Тепер ми створили цю анімацію:

Ви дізналися, як створювати найкорисніші мікровзаємодії ОС Android.Я сподіваюся, що в якості вправи ви відтворите ще більше мікровзаємодії програми Google Фото, щоб краще засвоїти цю статтю.

Якщо ви дізналися про щось нове і вважаєте статтю корисною, ставте лайк і поділіться нею з колегами. :)

Тіні та розмиття у Figma: як налаштувати

Розповідаємо про базові налаштування ефектів та показуємо, як за дві хвилини зробити «матове скло».

Ілюстрація: Поліна Честнова для Skillbox Media

Базових ефектів у Figma всього два – тіні та розмиття. Але за допомогою них дизайнери інтерфейсів створюють скло та кнопки, які дуже схожі на реальні та допомагають користувачам зрозуміти, як користуватися додатком. Про те, де знайти всі ці ефекти і як їх налаштувати читайте в нашій інструкції.

Тіні

Drop Shadow — зовнішня тінь, підходить для відокремлення об'єкта від фону. Inner Shadow - Внутрішня, підходить для створення об'ємних об'єктів:

Щоб додати тінь, у розділі Effects натисніть на +. За замовчуванням Figma додасть звичайну тінь, але якщо натиснути на напис Drop Shadow, у меню меню налаштування можна змінити на Inner Shadow.

Базові налаштування у тіней однакові, але вони працюють трохи по-різному:

• Blur - Розмиття країв тіні.
• Spread - Розмір тіні.
• X і Y - Зміщення щодо центру об'єкта. X - ліворуч і праворуч, а Y - Вгору і вниз.
• Також у тіні можна налаштувати її колір та непрозорість.

Усунення і розмір зовнішньої тіні може бути будь-якими, оскільки явних кордонів вона немає. У внутрішній тіні самі параметри обмежені самим об'єктом.

Також у тіні можна змінити колір та режим накладання. Працює це так само, як і у Photoshop — залежно від режиму та кольору тінь підлаштовуватиметься під фон:

Зазвичай тіні використовують у інтерфейсах, щоб показати рівні взаємодії кнопок чи зробити їх схожими реальні аналоги. Про те, як правильно зробити тіні для вашої програми, читайте в інструкції дизайнера Марії Буліної: