はじめに

Figmaで画面を作成して画面遷移させる手順を解説します。Figmaをまだ使ったことがない方は、はじめてのFigma もご参考ください。

ファイルの階層構造

Figmaのファイルは「ファイル＞ページ＞フレーム」という階層構造になっています。ファイルの中には複数のページを作成できます。ページの中には複数のフレームを作成できます。

ページの+マークを押下するとページを作成できます。デフォルトでPage 1が作成されているので、今回はそれを使用します。

画面を作成するための土台であるフレームを作成します。ツールバーから#を選択します。右側のメニューでフレームのサイズを選択できます。今回は通常のデスクトップサイズの画面を作成することとし、デスクトップを選択します。

フレームにコンポーネント（ボタンなどの部品）を配置していきます。コンポーネントはアセットの中から探します。Figma標準で用意されているBasic website kit by Figmaから00 Buttonというコンポーネントを使用します。

右上の▷を押下すると、プレビューを表示できます。

プレビュー画面でエディターで開くを押下すると、編集画面に戻れます。

画面遷移をさせるために、もう1画面を作成してみます。先ほどと同じ手順でフレームを作成します。

プロトタイプを選択して、ボタンから作成したフレームに矢印をひっぱります。

プレビュー画面でボタンを押下すると、画面遷移していることがわかるかと思います。

Figmaで画面を作成して画面遷移させる手順を解説しました。