WebDesigner's Memorandumウェブデザイナーの備忘録

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

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

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

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

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

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

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

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

Figmaでフレームを選択する

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

PCのFigmaでスマホサイズのフレームを選択する

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

Figma Mirror

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

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

Mirroring状態

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

Figma Mirrorを終了するとき

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

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

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね