Figma｜第6章歯医者さんサイトにプロトタイプを設定してみよう

INDEX

【6-1】プロトタイプとは？

Figmaにはウェブページのように、設定したリンクをクリックすると指定したフレームにジャンプする機能があります。

この機能を利用すれば、実際の導線の流れをチームやクライアント達と共有するのに便利です。是非活用してみましょう。

この動画はデモンストレーション動画になります。音声は入っておりません。

作ったワイヤーフレームに導線設定をして、リンク設定を加えてみましょう。

1 . プロトタイプを設定する方法は、まずは画面右側の「デザイン」を「プロトタイプ」に切り替えます。

2 . そして、リンク元にしたいオブジェクト（例えばボタンなど）を選択してみましょう。
　4方向に白丸/青枠（+マーク）のカーソルが確認出来ます。

3 . 白丸の接続ポイント（ノード）をドラッグして動かしてみましょう。

これをリンク先のフレームに接続してみましょう。　→ これが「フロー設定」です。

4 . これで導線の設定完了です。他のリンク部分にも設定してみましょう。
　※親コンポーネントからの設定であれば、子コンポーネントも一括してリンク先を設定する事が出来ます。

前章で解説したプレビューで、リンク設定したオブジェクトをクリックしてみましょう。

するとフロー設定した通りに、画面が遷移しています。

☑️ ※前章でも紹介しましたが、プレビュー方法は下記。

新しいタブに表示

画面右上の再生ボタンのアイコンより新しいタブに表示させる事が出来ます。

※ショートカットは、Ctrl + Alt + Enterキー ※macは Cmd + option + Enterキー
プレビュー

こちらは初回は読み込みに少々時間を要しますが、２度目のプレビューではパッと表示させる事が出来ます。

※ショートカットは、Shift + Spaceキー

必須の作業ではありませんが、設定することで実際の挙動に近い動作を加えることも可能です。

今回はスマートフォンで良く使われる「ハンバーガーメニュー」を設定してみましょう。

この動画はデモンストレーション動画になります。音声は入っておりません。

☑️ 手順

「共有ボタン」をクリックすると、ファイル共有パネルが表示されます。

以下のいずれかの方法で、自分が作成したFigmaデータを他の方に見て貰う事が出来ます。

※共有された相手がFigmaをインストールしていない場合でも、ブラウザ版で閲覧できます

「リンクをコピー」を選択すると、作成しているFigmaのURLを取得できます。

このURLをメールやチャット等で見て貰いたい方に送ればOKです。
メールフォームに招待したい方のメールを入力し「招待」ボタンをクリックして招待する事で、共有メールを送る事が出来ます。

※無料プランの場合、ファイルごとに招待できる編集者の数には制限があります。チームでの共同編集など、より高度な機能が必要な場合は有料プランへの移行を検討しましょう。