はじめに
Figmaで画面を作成して画面遷移させる手順を解説します。Figmaをまだ使ったことがない方は、 はじめてのFigma もご参考ください。
ファイルの階層構造
Figmaのファイルは「ファイル ＞ ページ ＞ フレーム」という階層構造になっています。ファイルの中には複数のページを作成できます。ページの中には複数のフレームを作成できます。
ページを作成する
ページの+マークを押下するとページを作成できます。デフォルトでPage 1が作成されているので、今回はそれを使用します。
フレームを作成する
画面を作成するための土台であるフレームを作成します。ツールバーから#を選択します。右側のメニューでフレームのサイズを選択できます。今回は通常のデスクトップサイズの画面を作成することとし、デスクトップを選択します。
コンポーネントを配置する
フレームにコンポーネント（ボタンなどの部品）を配置していきます。コンポーネントはアセットの中から探します。Figma標準で用意されているBasic website kit by Figmaから00 Buttonというコンポーネントを使用します。
プレビューを表示する
右上の▷を押下すると、プレビューを表示できます。
プレビュー画面でエディターで開くを押下すると、編集画面に戻れます。
画面遷移のさせかた
画面遷移をさせるために、もう1画面を作成してみます。先ほどと同じ手順でフレームを作成します。
プロトタイプを選択して、ボタンから作成したフレームに矢印をひっぱります。
プレビュー画面でボタンを押下すると、画面遷移していることがわかるかと思います。
おわりに
Figmaで画面を作成して画面遷移させる手順を解説しました。