Анимация прототипов с помощью комбо 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 нужно было просто добраться естественным образом по бэклогу. Такие дела.

Рекомендуем также обратить внимание на курс по 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 скачать можно вот здесь. А если вы не знакомы с Figma, то рекомендую подобрать курс по Figma и стартовать. Спасибо, что были на связи!

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

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

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

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

4 июля 2020

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

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

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

4 июля 2020

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

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

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

4 июля 2020

19 000+ участников – здесь ваши друзья, напарники и новые идеи

Присоединиться

Продуктовые дизайнеры
Продакты
UX/UI-дизайнеры
UX-аналитики
Веб-дизайнеры
Менеджеры проектов
Продуктовые аналитики
Бренд-менеджеры
Digital-стратеги
Арт-директора
Аналитики данных
UX-исследователи
Графические дизайнеры
Веб-разработчики
Дизайнеры интерфейсов