スマホ版のデザインを確認できるfigma mirrorとは
figma mirrorとは、デザインツールのfigmaで制作したスマホ版のデザインをリアルタイムで確認できるアプリです。
実際にウェブサイトのデザインをしている時にスマホで見た時にどのように見れるのかはとても気になります。
フォントサイズがこのくらいで良いのか、ボタンの大きさや余白などを実際に自分のスマホで確認ができると安心してデザインを行うことができます。
figmaユーザーの方は、しっかりと使い方をマスターしてSP版のデザインを確認しながら制作してみてください。
figma mirrorでスマホ版のデザインを確認する方法
それでは、figma mirrorでスマホ版のデザインを確認する方法を紹介していきます。
今回の説明は、PC版のfigmaがダウンロードできている前提での解説となりますので、まだPC版がダウンロードできていない方は、【初心者必見!】figmaの導入から基本的な使い方まで徹底解説!を参考にまずはPC版のfigmaをダウンロードしてください!
スマホでfigma mirrorのアプリをダウンロードしよう!
App Storeでfigma mirrorと検索してダウンロードをしましょう!!
![](https://i.gyazo.com/03a00e572db754addf3f2e3351e88cb0.gif)
figmaのアカウントにログインしよう!
ダウンロードを終えてfigma mirrorのアプリを開くとこのようなログイン画面が表示されます!
![](https://pengi-n.co.jp/blog/wp-content/uploads/2020/04/d84a1e79afc2438dd0f9ad0900853d7a-139x300.png)
PC版のfigmaで作成したアカウントと同じ、メールアドレスとパスワードを入れることでログインができます。
![](https://pengi-n.co.jp/blog/wp-content/uploads/2020/04/8573e8996cd2d1d57663c8b10ed9a8a2-139x300.png)
ログインができるとこのような画面が表示されます。
この画面になったら1度PC版のfigmaを開きましょう!
figma mirrorでSP版のデザインを確認しよう!
PC版のfigmaを開いたら、SPサイズのフレームを用意し、そのフレームを選択した状態にしておきましょう!
![](https://i.gyazo.com/613db40e1732ebe76c6f303d1545c2a0.gif)
するとfigma mirrorの画面が以下のように変わり、SP版のデザインをスマホから確認できるようになります!
![](https://i.gyazo.com/7515228420de324cbc9d00b40b80d16a.gif)
まとめ
figma mirrorでスマホ版デザインを確認する方法を紹介していきました。
figma mirrorを活用することでしっかりと確認しながらSP版のデザインも制作できます♪
まだ使用したことがない方は、ぜひ活用してみてください!