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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Самоучитель по Figma

Как в Figma сделать что угодно