Figma оверлеи - переход протипирования на новый уровень
Наш канал в

Проектирование современных интерфейсов – это больше, чем просто статические экраны, соединенные вместе. И поскольку дизайнерам часто приходится тестить эти интерактивные сценарии в пользовательских интерфейсах, они создают прототипы, чтобы воплотить свои проекты в жизнь. Но процесс создания прототипов часто повторяется, отнимает много времени и просто болезненный. Особенно, когда дизайнеры хотят показывать контент поверх другого контента для имитации таких элементов, как боковые панели, модальные и всплывающие окна.

Сегодня мы рады объявить, что создание прототипов в Figma стало намного веселее! Благодаря новой функции наложения (оверлеев) в Figma вы теперь можете гибко отображать один контент поверх другого, взаимодействовать с ним и даже открывать несколько наложений. Читайте дальше, чтобы узнать, как работает наложение в Figma…

Как это работает

Простые оверлеи

Мы переосмыслили добавление оверлеев. Теперь, после добавления ссылки на прототип для соединения двух фреймов, вы увидите новую опцию на панели свойств. Эта опция позволит вам установить целевой фрейм в качестве оверлея. После выбора вы можете настроить место наложения и способ его отображения.

Простые оверлеи в Figma

Наше относительное позиционирование поддерживает такие случаи использования, как модальные окна и листы действий (action sheets), когда вы хотите показать оверлей по отношению к устройству. Для других случаев использования, таких как всплывающие подсказки и выпадающие списки, вы можете вручную расположить его относительно объекта, из которого он открывается.

Несколько оверлеев

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

Несколько оверлеев в Figma

Взаимодействия на оверлеях

Поскольку прототипы представляют собой интерактивный опыт, мы тщательно продумали, как разрешить взаимодействие на оверлеях. После подключения двух фреймов у вас есть возможность применять свайп. Свайп заменит весь фрейм новым, но не уберет оверлей. Это позволит вам добавлять такие взаимодействия, как наведение курсора на кнопки, на оверлеях тоже!

Взаимодействия на оверлеях в Figma

Другие мелкие детали

Теперь вы можете выбрать «Назад» или «Закрыть» непосредственно на холсте, перетаскивая соединение наложения, вместо выбора этих параметров на панели «Слои». Сочетание клавиш: при перетаскивании и наведении курсора на фрейм назначения вы можете удерживать клавишу option, чтобы быстро выбрать swap-соединение. Совет от профессионала: используйте swap-ссылки для более гибкого действия «Назад», которое пропустит swap-ссылки, чтобы показать последний фрейм, с которого вы использовали навигацию, вместо значения по умолчанию – предыдущий фрейм.

Figma оверлеи - переход протипирования на новый уровень

Посмотрите наше видео, чтобы ознакомиться с пошаговой инструкцией и прочитайте нашу документацию здесь.

В заключение

Мы надеемся, что функция наложения оптимизирует все ваши случаи использования для гибкого показа одного контента поверх другого. Она также дополняет другие мощные функциональные возможности прототипирования, которые уже есть в Figma на сегодня: взаимодействияпереходырамки устройствфиксированные объекты и продвинутый скроллинг.

Мы хотим поблагодарить всех, кто помогал нам создавать эту функцию в течение последних нескольких месяцев – ваш фидбек был невероятно ценным и помог подготовить этот релиз. Зайдите в наше сообщество Spectrum, чтобы оставить отзыв. Мы всегда рады узнать ваше мнение!

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Архитектура компонентов в Figma

Вот несколько идей, как вы можете максимизировать модульность, а в некоторых случаях сократить количество необходимых компонентов.

Почему вы должны перейти из Sketch на Figma

Я прочитал множество статей, сравнивающих эти две программы, но я думаю, что…

Сравнение Sketch vs Adobe XD vs Figma

Когда вышла первая версия Sketch, он полностью изменил мир дизайна интерфейсов, но…