UI/UXデザインツール『Figma』入門

5-2. Figma Mirrorを使って実機確認する

6-1で作成したプロトタイプを実機(スマホ)で確認する方法を解説していきます。Figma Mirrorを使用すると、Wi-Fi経由で制作したUIのプロトタイプをプレビューすることが出来ます。

  • UIデザイン
  • UXデザイン
  • プロトタイピング

公開日:2019/09/15最終更新日:2020/01/26

1.Figma Mirrorをダウンロードする

図1 Figma Mirror

Figmaでプレビューを行う方法は以下の2つがあります。用途に応じて使い分けましょう。

  1. アプリからの確認
  2. モバイルブラウザからの確認

iOSおよびAndroid用のFigma Mirrorアプリは、App StoreまたはGoogle Play Storeからダウンロードすることができます。

2.スマホで確認する

ダウンロードを終えたら、iOSデバイスまたはAndoroidデバイスででFigma Mirrorを起動します。

※iOS版で解説します

図2 ログイン

Wi-Fi経由で接続する

Wi-Fi経由で接続を行う場合、同じFigmaアカウントにログインしていれば、同じネットワークに接続を行わなくても接続をすることができます。

接続を行ったら、表示したいフレームを図3のように選択することで、Figma Mirrorで表示させることが可能です。またFigma Mirrorアプリはプレビューしているデバイスの幅に合わせてコンテンツをスケーリングします。

図3 アプリで確認する

3.ブラウザで確認する

ブラウザで確認を行うには、まずお手持ちのデバイスでhttps://www.figma.com/mirrorにアクセスします。

アプリと同じように同じFigmaアカウントでログインすることで図4のようにブラウザからプレビューを行うことが可能となっています。  

図4 ブラウザで確認する

理解度チェック

UI/UXデザインツール『Figma』入門

1. Figmaの概要とインストール

2.Figmaの基本操作

3.ツールバーの操作

4. プロパティパネルの操作

5. プロトタイピング

6. 共有とバージョン管理

7. 料理写真投稿アプリを作ってみよう

このレッスンの著者