簡単にできる！XDからFigmaへの変換・インポート方法
susan すーさんのweblog
【Figma】ミラーリング機能の使い方！スマホでデザインをプレビューする方法
susan
記事内に商品プロモーションを含む場合があります
Figmaのユーザーとして、デザインをスマホなどのデバイスで即座に確認できると便利だと思いませんか？これがFigmaのミラーリング機能で実現可能です。
このミラーリング機能を使うことでレスポンシブデザインのクオリティを下げることがなくなります。
本記事では、そのFigmaのミラーリング機能についてや使い方を詳しく解説していきます。
Webデザイナーにおすすめのパソコンはこちら！
Webデザインが学べるおすすめのスクールに関しては【初心者用】Webデザインが学べるスクール！おすすめの10校を徹底比較で詳しく紹介していますので、興味ある方はぜひチェックしてみてください。
あわせて読みたい
【初心者用】Webデザインが学べるスクール！おすすめの10校を徹底比較
フリーランスデザイナー用のおすすめのエージェントに関してはフリーランスのデザイナーが登録しておくべきエージェント8選！おすすめはどこ？で詳しく紹介していますので、興味ある方はぜひチェックしてみてください。
あわせて読みたい
フリーランスのデザイナーが登録しておくべきエージェント8選！おすすめはどこ？
Contents
figmaについて
Figmaは、AdobeXDやSketchと並ぶ人気のUI/UXデザインツールで、ブラウザ上で動作します。
これは、特定のOSやハードウェアに縛られずに利用できるという意味で、WindowsでもMacでも、デスクトップアプリケーションまたはウェブブラウザ上で動作します。
このため、デザイナーがどこでも作業を行うことが可能となり、柔軟性とアクセシビリティが高いツールです。
Figmaの学習におすすめの書籍
さらにFigmaの一番の特徴は、リアルタイムの共同作業が可能であることです。
チームのメンバー全員が同じデザインファイルを同時に編集することができ、誰が何を編集しているのかをリアルタイムで確認できます。
これは、デザインプロジェクトにおける共同作業をしやすくします。
以上のような機能の組み合わせにより、FigmaはUI（ユーザーインターフェース）とUX（ユーザーエクスペリエンス）のデザインツールとして、業界の中でも高い評価を受けています。
AdobeXD、SKetch、Figmaの比較に関しては【webデザインツール】AdobeXD、Sketch、Figmaのメリット・デメリットを徹底比較で詳しく解説していますので、ぜひチェックしてみてください。
あわせて読みたい
【UIデザインツール】AdobeXD、Figma、Sketchを徹底比較
Figmaのミラーリング機能とは
Figmaのミラーリング機能は、Figma Mirrorと呼ばれます。
これは、PC上で制作中のデザインをリアルタイムでモバイルデバイスに反映させるための機能です。
iOSやAndroidのスマートフォンやタブレットに対応しています。
この機能の目的は、作成中のデザインが実際のデバイス上でどのように見えるか、どのように動作するかを確認することです。
例えば、レスポンシブなwebデザインを制作している場合、PC上だけでなくモバイルデバイス上でも正しく表示されるかどうかを確認するために使用します。
また、Figma Mirrorはプロトタイピング(試作品)ツールとしても機能します。
これにより、作成したデザインを実際のサイトのように動かして、動作確認をすることができます。
このミラーリング機能は、デザイナーが制作中のデザインをモバイルデバイス上で直接確認できるという大きなメリットがあります。
これにより、ユーザーエクスペリエンスの向上や問題の早期発見、修正が可能となります。
Figmaのミラーリング機能のメリット・デメリット
Figmaのミラーリング機能は、デザインプロセスの中で非常に役立つツールですが、いくつかのメリットとともに、潜在的なデメリットも存在します。
ミラーリング機能のメリット
メリット
- リアルタイムプレビュー
- デバイス間の一貫性確認
- インタラクティブプロトタイピング
リアルタイムプレビュー
Figmaで行われるすべての変更が即座にデバイスに反映されます。
これにより、ユーザーはリアルタイムで自分のデザイン変更を確認することができます。
デバイス間の一貫性確認
Figmaミラーリングを使用すると、複数のデバイスとスクリーンサイズでデザインをテストできます。
これにより、デザインがさまざまなデバイス間でどのように表示されるかを確認できます。
インタラクティブプロトタイピング
Figmaのミラーリング機能は、実際のユーザーインタラクション（タッチ、スワイプ、クリックなど）を確認することができます。
これにより、デザインのユーザビリティを試すことができます
ミラーリング機能のデメリット
デメリット
- インターネット接続必須
- デバイス互換性の問題
- 高度な機能の欠如
インターネット接続必須
Figmaはクラウドベースのツールであるため、ミラーリング機能を使用するには安定したインターネット接続が必要です。
接続が不安定だと、リアルタイムのプレビューが遅延することがあります。
デバイス互換性の問題
一部のデバイスやブラウザでは、Figmaミラーリングが適切に動作しない場合があります。
そのため、特定のデバイスでのテストを計画している場合は事前に確認が必要です。
高度な機能の欠如
ミラーリング機能は非常に便利な機能ですが、実際のデバイスでのテストとは異なり、デバイス特有の機能（例えば、オリエンテーション変更やジャイロスコープ、特定のブラウザ特有の動作など）を完全に真似ることはできません。
Figmaのミラーリング機能の注意点
Figmaのミラーリング機能を利用する際には、以下の注意点を把握しておくと良いでしょう。
注意点
- 同一ネットワーク接続
- ブラウザの対応
- デバイスの互換性
- ファイルの同期
- デスクトップでのフレーム選択
同一ネットワーク接続
Figmaのミラーリング機能を使用するためには、モバイルデバイスとデスクトップが同じWi-Fiネットワークに接続されている必要があります。
それ以外の条件では、ミラーリング機能は利用できません。
ブラウザの対応
デスクトップ版Figmaは、一部のブラウザでしか正常に動作しないことがあります。
必ず対応しているブラウザを使用してください。
デバイスの互換性
Figma Mirrorは、最新バージョンのiOSおよびAndroidに対応しています。
しかし、古いモバイルデバイスや一部のデバイスでは、Figma Mirrorが正常に動作しない場合があります。
ファイルの同期
Figmaはクラウドベースのツールであるため、ネットワーク接続が不安定な状況では、デスクトップ版とモバイル版の間でデザインの同期に遅延が生じる場合があります。
デスクトップでのフレーム選択
ミラーリングするにはデスクトップ版Figmaでフレームを選択する必要があります。
選択されていないフレームはミラーリングされません。
Figmaのミラーリング機能の使い方
以下、Figmaのミラーリング機能の使い方を具体的に紹介していきます。
1.Figma Appのダウンロードとインストール
モバイルデバイスにFigma Appをインストールします。
AppleのApp Store（iOS）またはGoogle Play（Android）から無料でダウンロードできます。
もしくはこちらからアクセスしてダウンロードしてください。
2.Figma Mirrorへのログイン
インストールしたFigma Mirrorアプリを開き、Figmaのアカウント情報を入力してログインします。
ここで使用するアカウントは、デスクトップ版Figmaで使用しているものと同じものである必要があります。
3.デスクトップ版Figmaでデザインを開く
次に、デスクトップ版Figmaを開き、ミラーリングしたいデザインを選択します。
具体的には、デザインのフレームをクリックして選択します。(ここではサンプルと書かれたフレームを選択しています。)
4.Figma Mirrorでデザインを開く
モバイルデバイスのFigma Mirrorアプリを開きます。
すると、デスクトップ版Figmaで選択したフレームのデザインが、モバイルデバイス上でリアルタイムに表示されます。
もしアプリ上でデザインが表示されない場合
もし、アプリ上ですぐに表示されない場合、下のメニューから、一番右の「Mirror」アイコンをクリックします。
「Mirror」アイコンをクリック後、上のような画面が表示されるので、「Begin mirroring」ボタンをクリックします。
その後デザインがスマホ上で表示されるようになります。
5.デザインの調整
必要に応じて、デスクトップ版Figmaでデザインを調整し、その結果をモバイルデバイス上で確認します。
この調整と確認のプロセスを繰り返し行うことで、ユーザーエクスペリエンスを向上させることができます。
アプリ上でプレビュー画面を閉じる方法
スマホのアプリ上で見ているプレビューを閉じたい場合、二本指で画面を長押しします。
6.共有とフィードバック
最後に、Figma Mirrorを使ってデザインを共有し、他のチームメンバーやクライアントからフィードバックを収集します。
Figmaでは、デザインファイルのURLを共有することで、他の人もそのデザインを見ることができます。
これらのステップを通じて、Figmaのミラーリング機能を活用することができます。
この機能をうまく使いこなすことで、モバイルデバイス向けのUI/UXデザインの質を向上させることができます。
Figmaの学習におすすめの書籍
まとめ
Figmaのミラーリング機能、通称「Figma Mirror」は、デザイン開発のプロセスをスムーズに進めるための非常に便利なツールです。
モバイルデバイスでリアルタイムにデザインのプレビューを確認できることによってよりハイクオリティなレスポンシブデザインを作成でき、より効率的に作業を進めることができます。
ぜひ、Figmaのミラーリング機能を活用してみてください。
Webデザイナーにおすすめのパソコンはこちら！
Webデザインの勉強をしたい方はこちらの記事がおすすめ！
Webデザイナー用のエージェントをお探しの方はこちらの記事がおすすめ！
副業案件をお探しの方はこちらの記事がおすすめ！
ABOUT ME
30代web業界未経験
→オーストラリアにIT留学
→現地インターンを1年半経験
→フリーランスwebデザイナー・エンジニアとして活動
→月収80万円達成！
