figmaのプロトタイプ スマホアプリでデバイスの枠は表示されるのか




プロクラスの堀口です。
figmaのプロトタイプについて調べたことを記事にしたいと思います。

pcでデザインのスマホ表示を確認するためにfigmaは便利です。
プロトタイプセッティングのデバイスをiPhoneなどに設定すると、実際にスマホで表示されたときの印象を確かめることができます。

▼pcで表示したプロトタイプ

しかし、同じデザインファイルをスマホアプリでも確認したいことがあります。
この場合、スマホアプリではデバイスの設定を反映せずに表示してくれるのでしょうか?

▼スマホアプリで表示したプロトタイプ

調べても分からなかったので、実際に試してみたところ、
pcではデバイスが表示されるが、スマホアプリではデバイスの表示なく確認するということができました。

スマホアプリで確認する際に、プロトタイプセッティングでデバイスの設定を解除するといったような手間は不要なようです。

figmaのプロトタイプでスマホ表示を確認する際に便利なもの

figmaのアセットとしてAppleが公開しているものがあります。
https://www.figma.com/community/file/1385659531316001292

より実際に近い印象を確かめるために、アセットは必須とも言えます。
Appleが提供しているもの以外にも様々なアセットが存在します。
ぜひ有効活用してください。