Figma Mirror: что это и зачем нужно

Рассказываем, как самостоятельно проверить макет прямо в телефоне, не привлекая к этому программистов.

Иллюстрация: Meery Mary для Skillbox Media

Вячеслав Лазарев

Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

Во время работы над приложением очень сложно сразу учесть все возможные проблемы, которые могут возникнуть у пользователя. Выявить их на этапе дизайн‑решения поможет проверка на реальном устройстве — это можно сделать с помощью Figma Mirror.

Рассказываем, как проверить свой прототип на телефоне с помощью Figma Mirror и быстро исправить все проблемы до передачи макетов в разработку.

9 марта Figma отменила коммерческие подписки для пользователей из России. На момент публикации бесплатная версия графического редактора работает.

Для начала — скачайте приложение Figma Mirror на свой телефон. Оно доступно и для iOS, и для Android. Затем войдите через него в свой аккаунт.

Заранее проверьте свои макеты — они должны быть свёрстаны внутри фреймов, групп или компонентов. Если вы попробуете запустить в Figma Mirror обычную картинку, то она не будет отображаться.

Просмотр готового прототипа

Сразу после входа в аккаунт Figma покажет вам прототипы, которые вы недавно редактировали. Нажмите на любой из них, и он сразу запустится на вашем телефоне:

На примере есть графические недочёты: лишние скругления и дыра в верхней части экрана. Это происходит из-за того, что макет разрабатывался под iPhone X, а запускается он на iPhone 8 Plus. Важно это учитывать, если вы хотите показать прототип приложения на презентации клиенту.

Кстати, если во время просмотра вы будете править макет, все изменения сразу отобразятся на телефоне.

Просмотр нужного экрана

Figma Mirror также позволяет проверить конкретный макет на телефоне, даже если вы не сделали из него прототип. Для этого на компьютере откройте любой файл и выберите нужный фрейм. Затем зайдите в приложение, перейдите во вкладку Mirror и нажмите на кнопку Begin Mirroring:

Если во время просмотра вы кликнете на любой другой фрейм на компьютере, он сразу отобразится в телефоне.

Дополнительные функции

Помимо проверки прототипов, в Figma Mirror можно посмотреть обычные файлы. Редактировать их нельзя, но дать комментарии дизайнеру в чате — можно:

Также Figma Mirror есть и в браузере для компьютеров. Работает она практически так же, как и на телефоне, — выберите нужный фрейм в файле и перейдите в Mirror. Выбранный макет сразу отобразится на экране.

Больше о прототипировании в Figma