【エンジニア向け】Figmaでスマホアプリのワイヤーフレームを作成する

Figmaで新規デザインを開始すると、下のスクリーンショット画像のような画面が現れます。

画面上に特にこれといって目立つようなものは見当たらず、とてもシンプルな画面ですね。何もかもが初めてという方は、この時点で「ここから何をどうすればいいの？」と、少し不安になるかもしれません。

Figmaで何かをデザインする際、ターゲットデバイス（PCやスマホなど）の画面サイズに合わせたフレームを準備する必要があります。

Figmaの扱いに慣れてきたら、ライブラリやテンプレートを活用してこういった準備作業を効率的に行うこともできますが、ここでは慣れるために手動で準備作業を行っていきましょう。

今回はスマホアプリの画面デザインを行っていくので、スマホサイズのフレームを作成していきます。

画面上部に何やら様々なアイコンが表示されているエリア（ツールバー）がありますが、ここから井形をしたアイコン（Frame）をクリックし、選択します。

すると画面右側に、Phone、Tablet、Desktopなど、ターゲットデバイスの選択メニューが現れるので、ここでは Phone > iPhone 13 & 14 を選んでみましょう。

すると、スマホ画面サイズのフレームが自動で作成されます。このフレーム内にボタンなどのパーツを配置してデザインを行っていくことになります。