Figmaで作ったスマホデザインを「Mirror」機能を使ってリアルタイムに実機確認をする

スマホのデザインを作るとき、実際にスマホに表示して見てみることが大切になります。
ボタンやフォントのサイズ感や、位置が本当にそこで押しやすいかどうかは、実際にスマホを持ってみることで気がついたりもするからです。

Figmaのスマホアプリにある「Mirror」を使うことで、Figmaでデザインを作りながらリアルタイムに実機で確認ができます。

Figmaのスマホアプリをインストール

FigmaのアプリはApp Storeからインストールできます。

App Store

‎Figma – prototype mirror share

https://apps.apple.com/jp/app/figma-mirror/id1152747299

‎Keep your designs mobile with the Figma app.Bring your creations to life, wherever you are, for convenient and immersive viewing. Share, browse, and view your designs with just a few taps.With the Figma app, you can now:- View, browse, and share files and prototypes- Navigate team and project…

インストール後はPCと同じFigmaのアカウントでログインしましょう（PCと別アカウントだと表示されないので注意が必要です）。

ログインしたら下のタブメニューの中から［Mirror］を選択します。
あとはPC版のFigmaを開きます。

Figmaでフレームを選択する

PCでFigmaを開いたらスマホサイズのフレームを選択します。

すると、スマホ版のFigmaに「Begin mirroring」というボタンと、選択しているフレームの名前が表示されます。
このボタンをタップします。

これでスマホ上にデザインがぴったり表示されました。

同じWi-Fiに接続している必要もありませんし、デザインを動かしたらそれがリアルタイムに反映されていくのでストレスがありません。

終了したいときは、画面を長押しすればメニューが表示されます。
プロトタイプ機能などで画面遷移をしたあとに元のページに戻りたい場合は「Restart」、終了したい場合は「Exit Mirror」です。

プロトタイプの設定をしていればプロトタイプの確認もできます。
ただ、プロトタイプを作ればホーム画面の［Recent］に作成したプロトタイプが表示されるようになるので、わざわざ［Mirror］の方を見る必要はありません。

ガッツリ作り込んで完成してから確認するというよりは、プロトタイプもまだ設定していない作りはじめの段階で、SPの表示を確認しながらフォントや各パーツのサイズ感を確認しながら作り上げていくイメージの機能ですね。

このリアルタイムに一瞬で反映されるのはさすがFigmaだなと感じます。