Дизайнер і Product Manager Тоні Пінкевич розробляє плагін Aninix для анімації інтерфейсів у Figma. Тоні розповів, чому він звернув увагу на цю тему, які проблеми виникають у процесі створення анімованих інтерфейсів та як новий продукт допоможе їх розв’язати.

Передісторія

Я став євангелістом UI-анімації ще у 2016 році. Мій шлях почався з воркшопів, пізніше був запуск невеликого курсу. Й на кожному потоці було кілька людей, які запитували в мене: «Чому After Effects такий складний? Коли випустять Sketch для анімації»? Я ж відповідав, що «скоро Adobe мають випустити якийсь софт для полегшення роботи». Але ось настав 2021 рік, і жодна компанія так і не зробила гарний аналог After Effects для анімації інтерфейсів.

Технології змінюються кожні п’ять років, а софт для анімації не отримав великих оновлень з 1997 року. Розробники додають незначні поліпшення та невеликі функції, та ми досі працюємо в старій парадигмі мислення про анімацію. З того часу ми отримали чудові інструменти для створення статичного дизайну та колаборації над ним. Ми можемо швидко створювати прості прототипи, але над складною анімацією завжди працюємо окремо. Хоча до кожного інтерфейсу так чи інакше входить анімація.

Я в захваті від того, як Figma змінила наше сприйняття роботи, наскільки це зручний інструмент для старту й подальшої роботи над дизайном і дизайн-системами. Але вона не охоплює важливий етап — роботу з анімацією.

Проблема № 1. Інтерпретація властивостей елементів для розробників

Типовий процес анімації інтерфейсу виглядає так: дизайнер імпортує готові дизайни в After Effects за допомогою скрипта AEUX. Скрипт хороший, але працює неідеально, зміщує шари, ламає структуру текстів та іконок. Дизайнер вимушений виправляти майже кожен елемент дизайну. Це рутина, якою мають займатися інструменти, а не люди.

Але після того, як дизайнер усе імпортував і зробив анімацію, починається ще один дуже неприємний процес — етап підготовки документації для розробника. Як я вже казав, After Effects працює у старій парадигмі мислення, та всю анімацію, створену в After Effects, не можна просто перенести в інтерфейс, чи то веб, чи то нативний додаток.

Дизайнеру потрібно інтерпретувати усі властивості, які він анімував, у зрозумілий для розробника формат. І цей великий етап роботи забирає дорогоцінний час, який команди могли б витратити на поліпшення свої продуктів, а не на рутинний переклад з однієї «мови» на іншу.

 Проблема № 2. Одна зміна = безліч змін

Другою важливою проблемою є те, що дизайн, анімація та код зберігаються в різних місцях. Якщо не змінюється дизайн, потрібно йти та знову проходити процес анімації та її підготовки для програміста. Програмісту простіше, він не перелагоджує з нуля те, що вже готове, а просто вносить зміни. Чому ж тоді анімацію потрібно щоразу переробляти наново?

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

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

Проблема № 3. Ніде коментувати

Третя проблема полягає в тому, що обговорення анімації інтерфейсів розділене між кількома додатками. Сам дизайн можна коментувати у Figma чи InVision. Код можна коментувати прямо в GitHub. А де коментувати анімацію інтерфейсів? Є frame.io, але він пристосований більше до моушн-дизайну та фільмування та ніяк не пов’язаний з поточною екосистемою.

Проблема № 4. Зворотний зв’язок

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

З інтегруванням анімації в код взагалі «темний ліс». Ніколи не знаєш, що в результаті вийде. Навіть якщо дизайнер усе підготує ідеально та передасть у розробку, є велика ймовірність, що щось піде не так. І чим довше буде йти зворотний зв’язок, тим довше буде відбуватись розробка та інтеграція.

50% часу ми виконуємо завдання, які взагалі не мають існувати

Щоб було наочніше, давайте для прикладу розглянемо невеликий компонент:

1. Дизайн — 2 години.
2. Імпортувати дизайн в After Effects — 1 година.
3. Зробити анімацію в After Effects — 1 година.
4. Підготувати документацію для розробника — 2 години.
5. Інтегрувати компонент у код — 4 години.
6. Перевірити створений компонент і написати коментарі — 1 година.
7. Внести коментарі — 1 година.

У результаті: 12 годин на створення простого компонента. Й це навіть ми не говоримо про те, що цей компонент має перевірити Q&A-відділ. І що з цих 12 годин є корисною роботою? Тільки пункти 1, 3, 5, тобто сім годин. Решту п’ять годин (майже половина!) роботи займають завдання, які взагалі не мають існувати.

Як плагін Aninix може розв’язати ці проблеми

Aninix — плагін для Figma, який дозволяє створювати інтерактивні прототипи та анімацію для промовідео та генерувати код сніпетів для розробників.

Візуалізація роботи Aninix.

Коли я почав працювати над Aninix, планував створити простий інструмент для анімації інтерфейсів, який допоможе відійти від After Effects і зробити процес роботи приємнішим. Але зараз я бачу, що проблема більш значуща. Проблема не тільки в анімації, а загалом у спільній роботі над створенням компонентів. Усі члени команди працюють у своїх інструментах, тому флоу розрізнений. Доводиться даремно витрачати багато часу на комунікацію замість конструктивної роботи.

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

Подальший план дій

Роадмап з етапами роботи та функціями плагіна.

 Ми плануємо:

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

І все це всередині Figma.

Зараз плагін знаходиться на бета-тестуванні, реліз публічної версії відбудеться в кінці вересня 2021 року.