Продвинутые советы по анимации и прототипированию в Figma
Поскольку вам всем так понравились ежегодные советы по Figma, представляю вам специальное издание только для прототипирования. Здесь я кратко расскажу о некоторых жемчужинах, которые я обнаружила в Figma и которые помогли оптимизировать мои рабочие процессы.
В этой статье я решила сосредоточиться на практических приемах, а не на экспериментальных анимациях (хотя перед некоторыми все-таки не смогла устоять). Не поймите меня неправильно. Меня всегда впечатляли фантастические анимации в Figma (только недавно Double Glitch поразил меня своей лава лампой в Figma). Однако в этой статье сосредоточимся именно на повседневном рабочем процессе.
Видеоверсия этой статьи:
Несколько полезных шорткатов, прежде чем мы начнем:
Вот мои любимые шорткаты, когда дело доходит до работы над прототипами в Figma:
alt + 8 / alt + 9 → переход между дизайном и меню прототипирования (нет, больше не Shift E). И да, как вы уже догадались, alt 0 — проверка (inspect), а alt 1, 2 — слои и ресурсы.
cmd/ctrl+alt+enter → открыть режим презентации, чтобы увидеть свой прототип.
alt + cmd/ctrl + стрелка влево/вправо → переход между открытыми файлами. Это очень полезно, когда у вас открыт файл дизайна и презентация прототипа.
Z → нажмите Z в режиме презентации, чтобы переключаться между различными вариантами презентации (показать 100%, растянуть по размеру экрана и т. д.)
1. Auto layout и smart animated components — идеальное сочетание
Начнем с моего любимого трюка, который наверняка поразит вас. Figma становится действительно мощной, когда вы комбинируете автоматическую компоновку, интерактивные компоненты и умную анимацию. Только подумайте об этом: auto layout автоматически заполняет любое освободившееся пространство. Таким образом, если вы создадите интерактивные компоненты с помощью смарт-анимации, а затем упакуете экземпляры во фрейм с автоматической компоновкой, это позволяет вам играть с разными размерами. Идеальный метод для создания таких вещей, как аккордеоны.
Имитация удаления:
Также можно комбинировать несколько состояний и создавать эффект гладкого удаления элементов при перетаскивании. Ключ к выполнению этой задачи — установка для вашего последнего варианта высоты 0. Все остальное будет двигаться вверх, создавая видимость, что экземпляр был удален. При этом он все еще будет на месте, но невидимый из-за нулевой высоты.
💥Совет: Figma не позволяет использовать высоту 0, поэтому нам приходится выбирать 1 пиксель. Это тоже смотрется нормально, но если вы установите, к примеру, высоту 0,004, Figma будет вынуждена округлить ее до 0.
2. Фиксация состояния с помощью секций
Секции в Figma — отличный способ лучше организовать рабочую область и создать дизайн с сохранением состояния.
Без секций
Итак, допустим, наши посетители просматривают дизайн. Они уже прошли шаги (фреймы) A и B и заканчивают взаимодействие на шаге C. Со стандартной настройкой в Figma после этого мы всегда возвращаемся на экран A. В реальной жизни это бы очень раздражало, например, при необходимости повторно вводить все личные данные. Кроме того, сам процесс прототипирования становится очень запутанным из-за большого количества связей между фреймами. И мы всегда вынуждены выбирать экран, на который нужно вернуться при закрытии процесса. Но ведь мы наверняка хотели бы вернуться туда, откуда пришли, а это может быть даже другой страницей с той же кнопкой призыва к действию.
С секциями
Инструмент «Секции» можно найти в меню фрейма или просто нажать Shift+S. Мне нравится использовать их для организации работы, потому что секции не отображаются в режиме презентации (в отличие от фреймов). Когда же дело доходит до прототипирования, они позволяют нам создавать проекты с сохранением состояния.
В этом случае я нарисовала секцию вокруг шагов A, B и C. Это все, что мне нужно сделать, чтобы Figma запомнила последний просмотренный фрейм в этой секции при повторном входе из любых (!!!) других точек. Абсолютное спасение, когда дело доходит до тестирования экранов регистрации.
💥Совет: При работе с секциями обязательно устанавливать для них параметр «navigate to» (открытый оверлей не сработает), но внутри секции можно связать фреймы, как если бы они были оверлеями. Это имеет то преимущество, что теперь вы можете использовать действие «назад» на кнопке закрытия, добавляя возможность вернуться точно в то место, откуда вы вошли в секцию! Это просто любовь!
3. Вложенные прототипы в презентациях
Как и все в Figma, прототипирование — это вложение фреймов. Очень важно понимать концепцию, согласно которой мы добавляем поведение к отдельным фреймам независимо от того, где они расположены. Это значит, что мы вполне можем вложить весь прототип в презентацию. И установить для него связи так же, как и с любым другим прототипом. Это обязательно произведет на всех впечатление на вашем следующем рабочем митинге.
4. Scroll to! Горизонтальный, вертикальный и смешанный
«Scroll to» это отличная вещь, часто упускаемая из виду! С помощью «Прокрутки до» вы можете установить якорные точки в разных направлениях.
«Вертикальная прокрутка до» для создания хорошей навигации
Отлично подходит для очень простых анимаций, вроде одностраничного меню. Кстати, если вам интересно, для чего нужны значения хедер (offset values), так это на случай, если у вас есть липкий заголовок (sticky header) или какое-то пространство, которое нужно учитывать при прокрутке.
«Горизонтальная прокрутка до» для создания слайд-шоу
Просто поместите изображения во вложенный фрейм с overflow, а затем установите для этого фрейма горизонтальную прокрутку (в меню Prototype→Overflow scrolling). Теперь вы можете связать миниатюры, которые находятся за пределами фрейма, с изображениями. Круто, не правда ли!
«Горизонтальная и вертикальная прокрутка до» для интерактивных карт
Да-да, мы можем использовать прокрутку в обоих направлениях: и вертикально, и горизонтально. Все, что нам здесь нужно, — это карта, размещенная во вложенном фрейме с обрезанным содержимым (clip content) и горизонтальной и вертикальной прокруткой. Тут важно только, чтобы карта была больше, чем фрейм.
На карту я помещаю метки, некоторые — в обрезанную область. А затем связываю кнопки через «scroll to». Вот и все!
💥Совет: чтобы метки располагались посередине карты при прокрутке, я установила смещение, равное половине размера фрейма с картой (то есть +/- 345, так как моя карта имеет ширину и высоту 690).
5. Комбинируйте умную анимацию (smart animate) и анимацию движения (moving animations) в Figma
Движущиеся переходы и умную анимацию можно комбинировать. Этот функционал немного скрыт в меню анимации (обнаруживается только при выборе анимации движения).
Допустим, вы добавляете переключение фрейма с помощью pushing in, но хотите, чтобы меню сверху по-прежнему анимировалось. В этом случае просто используйте движущийся переход (moving transition) в качестве основной анимации и обязательно установите флажок «Smart animate matching layers». Теперь Figma будет «смарт-анимировать» слои с одинаковыми именами и настройками иерархии.
💥Совет: это приведет к умному анимированию всех слоев с одинаковым именем и иерархией. Если вы хотите, чтобы это касалось только некоторых из них (например, в этом случае навигации, а не изображений), обязательно переименуйте другие слои (или группу, в которой они находятся). Тогда они станут частью движущейся анимации (moving animations).
💥Еще один совет: фоновый переход может вызвать у вас некоторые проблемы с прозрачностью. Если это произойдет, просто добавьте дополнительную фоновую фигуру к целевому фрейму, чтобы исправить ситуацию.
6. Анимация перехода круга в прямоугольник
В Figma нельзя применить смарт-анимацию к фигурам так, чтобы прямоугольник плавно превращался в звезду. Но есть небольшая хитрость, которую можно использовать, если вы хотите превратить прямоугольник в круг или наоборот. Секрет в скруглении углов. Правда, работает это только для всех четырех углов (да, я пыталась анимировать логотип Figma в Figma, но не получилось).
7. Интерактивные компоненты — моя большая любовь!
Интерактивные компоненты потрясающи! Если вдруг кто не знает, вы можете создавать анимации в наборе компонентов с вариантами, и все экземпляры будут наследовать заданное поведение. Это очень полезно для таких вещей, как кнопки, переключатели и все микровзаимодействия.
Итак, теперь давайте посмотрим на другие простые примеры такой магии:
8. Добавляйте масштабирование при наведении с помощью интерактивных компонентов
Эффект зума это еще один одна анимация, которой можно добиться с помощью интерактивных компонентов. Просто увеличьте изображение в целевом кадре и настройте смарт-анимацию между ними при наведении. В дизайне используйте экземпляр, а текст и изображения переопределяйте. Готово!
💥Совет: рекомендую вам использовать инструмент масштабирования. Просто нажмите K, а затем используйте коэффициент масштабирования. А также запишите его в заметки, чтобы потом добавить коэффициент масштабирования для преобразования CSS в свою документацию.
9. Видео-анимация при наведении
Интерактивные компоненты также отлично работают в сочетании с видео. Давайте настроим видео-анимацию при наведении.
Сначала зададим параметры для карточки с видео (работает только на платном тарифе Figma, извините). Затем сделаем копию этой карточки и заменим видео неподвижным изображением. Простой способ добиться этого — выбрать видео, нажав shift+cmd+C. Так png скопируется в буфер обмена. Теперь просто вставим png как замену видео в стартовом фрейме. Убедитесь, что оба фрейма настроены как варианты в наборе компонентов, и просто подключите смарт-анимацию, срабатывающую при наведении курсора. Свяжите фреймы и нажмите кнопку воспроизведения. Вуаля!
10. Смарт-анимация для меню
Как обычно, с помощью капельки «смарт-анимационной» магии можно создать небольшие приятные эффекты, вроде меню, которое открывается и закрывается. Главный секрет в том, что я использую одни и те же линии с одинаковыми именами (!) и просто меняю их положение. Пока имена и иерархия остаются прежними, можно выполнять умную анимацию между позициями.
Помните, что с помощью смарт-анимации мы можем взаимодействовать с цветом, положением, вращением, прозрачностью и размером, НО нам нужно сохранять иерархию и одинаковые названия в ключевых фреймах.
11. Анимация увеличения при наведении
Представьте себе, добавление автоматического макета (auto layout) дает еще больше возможностей. Итак, здесь у меня есть смарт-анимированный интерактивный компонент с изменением размера, а экземпляры объединены во фрейм с auto layout, поэтому при наведении они увеличиваются в размере, отодвигая в сторону все на своем пути.
💥Совет: Если вы хотите, чтобы крестик анимировался правильно, то вам нужно, чтобы у элемента (в данном случае креста) в обоих вариантах были одинаковые настройки и название! Я просто установила непрозрачность на 0 в большей версии, чтобы создать эффект затухания.
Предостережение по поводу умной анимации: все это еще нужно превратить в код!
Итак, вот где я начинаю медленно дрейфовать в опасные области смарт-анимации (но не сильно, не переживайте). Опасные, потому что в Figma все это ооочень просто! Буквально по одному щелчку мыши я могу получить плавную и отполированную анимацию. Но этот щелчок в Figma может быть не так просто повторить с помощью анимации CSS/SVG.
Помимо планирования анимации для повышения удобства использования (а вот и отличная статья об этом), когда-то настанет момент и ее воссоздания. Так что все эти сумасшедшие изогнутые карусели и индикаторы загрузки в виде цветных парящих шариков крутые, и я уверена, что кто-то где-то как-то сможет их реализовать. Видит Бог, у них могут быть даже более творческое решение! Но иногда имеет смысл поумерить свой творческий пыл (если только мастера CSS-анимации не окружают вас неограниченным бюджетом, тогда вы должны позвонить мне).
Извините, что омрачила наш смарт-анимационный парад, но сначала обязательно посоветуйтесь с вашим разработчиком, чтобы убедиться, что дизайн осуществим и поддерживается кодом. Это не значит, что вы не можете разгуляться и проявить творческий подход. Просто имейте в виду, что Figma — это не конечный продукт.
Советы по документированию и организации прототипов
Хорошо, давайте взглянем на некоторые советы, которые менее кричащие, но очень полезные, когда дело доходит до организации и документирования вашего прототипа:
12. Используйте внешние ссылки для подключения прототипов к разным страницам и файлам
В прототип можно добавить любую внешнюю ссылку. И помимо отсылания ко внешним страницам, это можно использовать для подключения других прототипов. Например, с другой шириной экрана или хранящихся на других страницах и во внешних файлах (немного ниже я опишу работу с потоками), которые невозможно подключить другим способом.
13. Избавляемся от всех связей в прототипе
Не могу поверить, что я так долго не знала об этом. Убедитесь, что вы находитесь на вкладке прототипирования, а затем просто щелкните правой кнопкой мыши по холсту и удалите все соединения. Аххххх!
14. Встраивайте прототипы (как я сделала здесь)
Вы можете вставить ссылку на свой прототип во многие места, такие как Notion, Medium, ZeroHeight и т. д. Это замечательно, потому что позволяет продемонстрировать определенные части прототипа с дополнительной документацией или объяснением. И, конечно же, все автоматически обновляется. Вот, попробуйте:
Также это помогает лучше прописывать микровзаимодействия во внешних документациях. В этом случае я просто создала фрейм с экземпляром моей карточки, который загрузила в Zeroheight в качестве прототипа как часть документации компонента. Таким образом, продуманное мной микровзаимодействие будет видно любому, кто просматривает код компонента и информацию о дизайне.
15. Упакованные «компоненты-воронки»
Вы не можете создавать связи между разными страницами в Figma, но предположим, что у вас есть хедер, и вы хотите, чтобы он ссылался на одни и те же места. Это будет невозможным, если компонент хранится во внешней библиотеке или даже на другой странице в том же файле (а компоненты следует хранить в отдельных местах).
Уловка, которую вы можете использовать, заключается в том, чтобы создать экземпляр, а затем снова упаковать этот экземпляр как компонент. Это немного похоже на то, что мы делали с _base компонентами в старые добрые времена (они вам больше не нужны, но это уже отдельная история). Теперь вы можете установить соединения из этого нового компонента и использовать экземпляры в качестве хедера. Все соединения будут унаследованы, но поскольку мы, по сути, просто используем экземпляр, упакованный в отдельный компонент, он также будет следовать всем изменениям основного компонента. Немного странно вникать в это в первый раз, но на деле все проще, чем кажется:
💥Совет: если вы назовете компонент _name или .name, он не будет синхронизирован с вашей библиотекой компонентов. Это имеет смысл, так как вы хотите, чтобы синхронизировался только основной компонент навигации, а не ваша воронка, которая существует только для того, чтобы помочь вам создать прототип.
Спасибо Ридду, который недавно написал в Твиттере об этой технике (скорее всего, он называет ее по-другому). С тех пор я постоянно использую этот способ!
16. Используйте потоки, чтобы управлять просмотром прототипа
Вы можете добавить потоки (flows) в свой прототип, и они появятся в режиме презентации. Поток будет отображаться в виде маленькой синей метки, которую можно переименовывать и перемещать.
💥Совет: к потокам также можно добавлять описания — они будут отображаться в режиме презентации. Мне нравится использовать это для руководства тестированием.
Просмотр потоков
Если вы щелкнете по холсту, выбрав вкладку прототипирования, вы увидите все ваши потоки. Да, потоков на странице можно иметь сколько угодно (или ни одного). Обратите внимание, что для отдельных потоков можно копировать ссылки!
Часто я копирую ссылки на разные потоки и делаю отдельный фрейм с их перечислением и интерактивными ссылками в Figma. Благодаря этому каждый, кто открывает мой файл, может сразу сориентироваться в прототипе. Страницу обзора потоков также можно добавить в качестве вводной для тестирования или презентации. Это действительно очень помогает разобраться в файле.
17. А вы в курсе, что ссылки запоминают настройки прототипа?
Когда вы делитесь ссылкой из своего прототипа, он запоминает все настройки! Таким образом, вы можете установить размер на 100% или по размеру экрана, выбрать, хотите ли вы видеть потоки или нет, и, конечно же, хотите ли вы задать устройство просмотра. После этого он откроется для всех, кто нажмет на вашу ссылку, именно в том виде, который вы установили.
💥Совет: Если вы задаете устройство просмотра, вы задаете его для всей страницы, а не только для одного фрейма! Вот почему мне нравится отделять мобильный прототип от десктопной версии.
Делитесь этой статьей с друзьями, которые тоже не прочь выжать из Figma максимум и рассказывайте о своих открытиях в комментариях в наших соцсетях.
