Анимация прототипов с помощью комбо Principle и Figma

Principle — фантастически понятный и быстрый инструмент UI/UX дизайнера. Он здорово ускоряет воплощение любых ux-идей. А в связке с Figma — это просто пушка.
Иллюстрация Kasia Bojanowska: https://dribbble.com/shots/12129688-Best-Architecture-Software

Вы читаете перевод статьи “Animate your Figma designs with our new Principle integration”. Над переводом работали: Анастасия Свеженцева, Ольга Жолудова.

Вы наверняка в курсе, что Principle в паре с Figma помогают творить чудеса в создании интерактивных прототипов, Дак вот, в этой статье мы расскажем все так детально, чтобы вы по итогу просто взяли и попробовали эту пару на деле!

Интеграции Figma и Principle открывает просто безумные возможности по сборке не просто анимашек, а целых интерактивных систем приближенных к реальности (попробуй отличи!), т.е с этим комбо вы можете шлепать продвинутые анимации и воплощать все, что только вам придет в голову (и конечно зайдет юзерам!). А, да. Напомним, что Principle зарелизили в 2015 году, да так, что он сразу ворвался на пьедестал must-have инструментов для ux/ui дизайна. А значит, до интеграции Figma + Principle нужно было просто добраться естественным образом по бэклогу. Такие дела.

Что дает интеграция? Если кратко, вы импортируете свои исходники Figma в Principle, а затем накатываете анимацию поверх. Ну не просто анимацию конечно: прорабатываете микровзаимодействия, вытачиваете микро анимации, настраиваете мягкие переходы, в общем доводите прототип до уровня продакшн-реди. Больше никаких листов A4 в прототипах, ну или клик-клик переходов. Только моушн, только плавность, только текучесть, тягучесть, естественностью и непрерывность ux.

Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.

В этой статье мы постараемся дать самый полный ответ на вопрос: “Почему же поклонникам Principle ну просто крышу сносит!”. Кто-то говорит, что в нем идеальный баланс сочетания простой + функциональный + мощный. А кто-то считает, что в нем все, что только нужно для создания реалистичных прототипов и кодить не нужно. Сейчас все и посмотрим.

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

Дэниэл Хупер, создатель Principle

«А еще при переключении на инженрное мышление, у вас просто отключается визуальный аппрарат решения задачи. Вытачивать детали и творить чувственно-целое — это разные фазы решения задачи и разные стили мышления».

Дэниэл Хупер, создатель Principle
Интеграции Figma и Principle на практике

В Principle простой UI и здесь вам уже все будет знакомо. Интеграция работает крайне просто: открываете Principle и через функцию import вытягиваете нужный дизайн из аккаунта Figma.

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

Ребята в Figma говорят, что интеграция надежно вертится на Figma API, основатель Principle связывался с ними и серьезно попыхтел над докой, чтобы заточить все с инженерой точностью. В общем и API Explorer пригодился и дока, не зря делали!

В общем нам в Figma Principle зашел — это очень удобный инструмент для UI-анимации и моушн-дизайна в интерфейсов, даже для начинающих. Вот держите файлик и попробуйте его в деле. Principle скачать можно вот здесь. Спасибо, что были на связи!

Пример анимации Principle (по ссылке выше).
Инструменты ui-анимации

Посты в категории Анимация интерфейсов

Будущее моушн-дизайна в интерфейсах | Глава 4

Ольга Жолудова

4 июля 2020

Посты в категории Анимация интерфейсов

Как добавить ui-анимацию в дизайн-систему: обогащаем движением uikit | Глава 3

Ольга Жолудова

4 июля 2020

Посты в категории Анимация интерфейсов

Анимация в интерфейсах: 7 фундаметальных принципов UX-анимации | Глава 2

Ольга Жолудова

4 июля 2020