Прототипирование — это процесс превращения статического макета в интерактивный и динамический макет (более известный как прототип). Воплощение статического макета в жизнь, без сомнения, является одним из самых, если не самым захватывающим шагом в рабочем процессе проектирования.
Также очень важно, чтобы разработчики понимали пользовательский интерфейс дизайна и то, как он должен ощущаться и функционировать. Что может быть лучше для этого, чем использование Figma, лучшего инструмента дизайна в мире согласно обзору инструментов дизайна 2020 года?
Создавать прототипы с помощью Figma легко и приятно, если вы знаете, как это работает. Начните с дублирования этого статического макета (нажмите «Серия взаимодействий», а затем «Дублировать в мои черновики»), а затем на протяжении всего урока мы будем добавлять все больше и больше функциональной точности. Ваша локальная копия должна выглядеть так:
Примечание. Я предполагаю, что у вас есть хотя бы небольшой опыт работы с современными инструментами проектирования пользовательского интерфейса, такими как Figma или Sketch.
Шаг 1. Создайте рамку с горизонтальной прокруткой
Давайте начнем с монтажной области 1, сделав выбор карт, выходящих за пределы области просмотра, с возможностью прокрутки по горизонтали. Это один из примеров того, как мы можем сделать наши макеты динамичными без необходимости создавать то, что Figma называет «Соединениями». Соединения направляют нас к новым артбордам, но это не то, что мы будем делать на шаге 1.
Начните с выбора «Карты «на панели «Слои «(левая боковая панель), а затем на панели «Дизайн» (на этот раз справа) измените параметр «Группа «на «Рамка «, используя раскрывающийся список.
Figma: преобразовать группу во фрейм
Я не буду вдаваться в подробности, но основное различие между группой и фреймом заключается в том, что группы плотно оборачивают своих дочерних элементов, в то время как фреймы могут быть любого размера. Это значит, что:
сгруппированные дети масштабируются вместе с группой, тогда как дети с рамкой немного более упрямы (особенность, а не ошибка)
дочерние элементы в рамке выравниваются относительно своего фрейма, тогда как сгруппированные дочерние элементы
фреймы могут иметь переполняющее содержимое, которое можно прокручивать по горизонтали или вертикали (это то, что мы попытаемся сделать)
Подождите, значит ли это, что артборды на самом деле являются фреймами? Действительно: то, что другие инструменты дизайна пользовательского интерфейса называют артбордами, Figma называет фреймами. Вероятно, это связано с тем, что в Figma фреймы могут быть вложены в другие фреймы, что немного отличается от того, что делают артборды в других инструментах, таких как Sketch, Adobe XD и т. д.
Переключитесь в режим прототипа⌥ (+ 9), где теперь будет доступен параметр поведения переполнения, а затем измените параметр раскрывающегося списка с «Без прокрутки «на «Горизонтальная прокрутка «.
Figma: горизонтальная прокрутка
Теперь вы заметите, что тени странно обрезаны только что преобразованным фреймом, но на самом деле это стандартное поведение для переполнения содержимого, и его можно относительно легко исправить.
Поскольку переменная размытия тени равна 30, а размеры фреймов могут быть любыми, нам нужно изменить размер фрейма, чтобы обеспечить дополнительные 30 интервалов по краям. Должно быть достаточно легко изменить размер (shift+ ⌘+ ↑↓←→) и сдвинуть (shift+ ↑↓←→) объекты соответственно.
Изменение размера и смещение в Figma
Кстати, вы могли заметить (если щелкнуть по рамке), что карты и их интервалы можно довольно легко переставить. Это не относится к учебнику конкретно, но все равно здорово.
Настройка интервала в Figma Frames
Шаг 2: Создайте переход монтажной области
Для этого следующего шага давайте попробуем взаимодействие, которое соединяет одну монтажную область с другой монтажной областью, также известное как «Соединение».
Выберите рамку «Карты «(да, всю рамку, так как на самом деле не имеет значения, какая карта в конечном итоге будет нажата прямо сейчас). Затем, предполагая, что вы все еще находитесь в режиме прототипа, перетащите соединитель (то есть круг с рамкой, который показывает + при наведении курсора) в монтажную область 2. Эти монтажные области теперь подключены.
После перетаскивания Connector на Artboard 2 настройки Connection (которые теперь должны быть открыты) должны выглядеть так:
Детали взаимодействия
«При касании» (взаимодействие будет запущено при нажатии)
«Перейти к» / «Монтажная область 2» (нажатие заставит пользователя перейти к монтажной области 2)
Анимация
«Push» / «←» («Артборд 2» выдвинется на экран справа)
«Ease Out» / «300 мс» (в течение 300 мс анимация будет начинаться быстро и замедляться к концу)
Установите флажок «Умная анимация совпадающих слоев» (обычные элементы, такие как кнопка «Назад» и навигация, не будут анимироваться, если их оставить без изменений).
Создание анимированных взаимодействий Figma
Хотите увидеть, что мы уже сделали в действии? Нажмите кнопку «Подарить» (то есть значок воспроизведения) в правом верхнем углу. Если вы используете Figma в
Совет: нажмите R, чтобы перезагрузить прототип.
Шаг 3: Отступление!
Прежде чем мы двинемся дальше и углубимся в более сложные соединения, давайте удостоверимся, что можем вернуться к монтажной области 1 (или любой другой монтажной области, с которой мы пришли). Создайте еще одно соединение, на этот раз с помощью кнопки (кнопок) «Назад» со следующими настройками:
Детали взаимодействия
«На разлив»
«Назад»
Создание взаимодействия «Назад» в Figma
Настройки анимации в этот раз будут недоступны, так как параметры фиксированы. В частности, переход будет анимироваться в обратном порядке. Например, если мы перешли в артборд с помощью «Push ←», то мы перейдем обратно с помощью «Push →».
Шаг 4: Создайте (относительно) сложную синхронизированную анимацию
Во время этого следующего и последнего шага мы создадим единую анимацию, которая на самом деле охватывает несколько монтажных областей и индивидуально анимирует несколько объектов, а не всю монтажную область. В частности, мы будем поворачивать развернутую карточку влево по нажатию кнопки, а затем настроим таймер, чтобы повернуть ее вправо перед возвратом в исходное состояние.
По сути, качающаяся анимация.
Выберите объект «Кнопка «на монтажной области 2 и установите коннектор, который соединяется с монтажной областью 3. Используйте эти настройки:
Детали взаимодействия
«На разлив»
«Перейти к» / «Монтажная область 3»
Анимация
«Умный анимационный»
«Расслабление» / «300 мс»
Создайте еще одно взаимодействие в Figma
Примечание: так как мы выбрали «Умная анимация» в качестве типа анимации, слои, которые существуют в обеих монтажных областях, но визуально различаются, будут плавно переходить, но только если соответствующая структура слоев и имена слоев остаются согласованными. Если они не останутся согласованными, Figma не поймет, что слои — это одно и то же, и они не будут правильно анимироваться.
На панели «Дизайн» вы должны увидеть, что я сделал фон кнопки #FF0000и повернул карточку влево.
Но как нам затем повернуть его вправо после того, как
Вот как мы запускаем анимацию последовательно. В нашем случае первоначальное нажатие активировало «анимацию поворота влево», а затем по таймеру автоматически происходили следующие анимации.
Figma: синхронизированная анимация
Прототипирование с помощью Figma — это весело, верно?
Мы подошли к концу этого урока. Файл Figma на самом деле не должен выглядеть иначе (кроме нескольких видимых соединителей при использовании режима прототипа). Однако в режиме Present он должен работать совсем
Довольно круто, правда?
Хотя, безусловно, существуют более сложные стили анимации и типы взаимодействий, которые мы могли бы визуализировать, то, что мы рассмотрели здесь, должно охватывать около 99% того, что вам нужно знать. Когда дело доходит до взаимодействия, простота в любом случае лучше!
Для анимаций, требующих большей сложности, есть удобный плагин Figma под названием LottieFiles, который определенно стоит проверить.
