UI/UXデザインツール『Figma』入門

5-1. プロトタイプを作成する

Figmaではプロトタイピング機能を使用することで、リンクや画面遷移をつけたプロトタイプを作ることができます。。このレッスンではプロトタイプを作成する方法を解説していきます。

  • UIデザイン
  • UXデザイン
  • プロトタイピング

公開日:2019/09/15最終更新日:2020/01/26

1.プロトタイプとは

図1 プロトタイプ

プロトタイプは、制作したUIを実際に近い形でデザインを確認することができるものです。実装前に問題点の洗い出しや、さまざまな概念をテストしたりと、作業の後戻りを防ぐことができます。

このレッスンでは、プロトタイピングの設定や使い方について説明していきます。

2.画面をプロトタイプモードに切り替える

プロトタイプを作るには、プロパティパネル上部の図2赤枠の「Prototype」を押しプロパティモードを変更します。

図2 プロトタイプ

プロトタイプモードのプロパティは、「Trigger」、「Action」「Prototype Settings」の3つの項目があります。

  1. Trigger
    クリック・タップ・ホバー、または別のマウス/タッチ操作など、どんなアクションをきっかけにページが切り替わるか選択できます。

  2. Action
    使用することで、アクションを行ったときの、次のフレームを選択することができます。

  3. Prototype Settings
    シミュレーションのデバイスや、背景色など、プロトタイプをどのように表示するかの設定を行うことができます。

図3 プロパティ

3.リンク先を選択する

リンク先は、フレーム内の(子)オブジェクトから接続するこができます。 これにより、プロトタイプ内のそのオブジェクトに接続線が作成されます。 

リンク先を選択するには、図4のように接続するオブジェクトを選択し、選択オブジェクトにある青丸をドラッグし、リンク先のフレームへドロップします。

図4 接続

また、プロパティパネル「Aciton」セクションからも次の遷移先を選択することができます。

図5 遷移先の選択

4.トリガーを設定する(タップ・ホバーなど)

画面遷移のきっかけのアクションを「Trigger」で設定することができます。通常のクリック(タップ)だけではなく、PCのWebサイトであるようなホバーや、タップを押したとき・離したときなど、様々な種類が用意されています。

図6 遷移先の選択
  1. Ontap

    これは最も一般的に使用されるトリガーであり、オブジェクトがクリックまたはタップされた後にのみアクションが実行されます。

  2. While Hoverring

    このトリガーは、カーソルが触れているときにのみ、実行され、カーソルを外すともとに戻ります。
    ※PCのシュミレーションように用意されたものなので、モバイル版では、While HoverringはOntapに自動的に変換されます。

  3. While Pressing

    While Pressing Triggerは、マウスまたはトラックパッドでクリックしているときにのみ実行されます。クリックを離すと、元のフレームが再び表示されます。

  4. Mouse Enter

    マウスがボタン領域に入ったときと、Enterキーを押したときに画面が遷移します。ホバリングと似ていますが、こちらは、マウスを戻しても元のフレーム戻ることはありません。

  5. Mouse Leave

    このトリガーは、ユーザーのマウスが領域から出たときに次の画面を遷移します。

  6. Touch Down

    マウスが最初に押されたとき、またはユーザーの指がプロトタイプ内のオブジェクトに最初に触れたときにモバイルデバイスの場合に、 Destinationフレームをトリガーします。

  7. Touch Up

    マウスクリックが解放されたとき、またはモバイルデバイスの場合、ユーザーの指がプロトタイプ内のオブジェクトへのタッチを停止したときに、 フレムーがトリガーされます。

5.アクションを設定する

アクションは、トリガーを介して、プロトタイプをどこでどのように進行させるかを決定できます。

アクションセクションのプルダウンメニューには、画面先を選択する以外にも、以下の4つのアクションがあります。

  1. None
    アクションが必要ない場合に使用します。

  2. Back
    前の画面に戻ることができます。 これは、プロトタイプの戻るボタンのシミュレーションに適しています。

  3. Close Overlay
    元のフレームの上に表示されたオーバーレイを閉じたり閉じたりできます。 これは、画面上のプロンプトや警告が消えるのを複製するのに最適です。

  4. OpenURL
    プロトタイプの外部のURLにユーザーを誘導できます。 
    選択したら、次のフィールドにURLを入力できます。

フレーム

画面遷移先を選択すると、いくつかの追加設定が使用可能となります。
まずこれがどのタイプのアクションになるかを図8から選択する事ができます。左から順に説明していきます。

  1. Navigation
    2つのフレーム間の単純な遷移です。 

  2. Swap
    スワップは、通常のフレームの接続部からトリガーされると、 ナビゲートオプションと同様に動作します。

  3. Overlay
    現在のフレームの上にフレームが表示されます。 これは、デザイン内のボタンまたは他のオブジェクトから、モーダルやアラートを表示する際に役立ちます。オーバーレイオプションは全部で8つあります。
    ・Centered
    ・Top Left
    ・Top Center
    ・Top Right
    ・Bottom Left
    ・Bottom Center
    ・Bottom Right
    ・Manual

図7 Overlayオプション

 

図8 アクション設定

6.トランジションを選択する

トランジションとは画面と画面が切り替わるときに起こるアニメーションのことです。スライドインしたり、ふわっと切り替わったりと様々な効果を選ぶことができます。これにより、実際の設定でデザインがどのように表示され、どのように反応するかをシミュレートできます。

選択を行うには、プロトタイププロパティから「Transtion」セクションのプルダウンメニューから選択することができます。

図9 Transtion
  1. Instant
    インスタントトランジションは、 アクションが行われてたときにフレームをすぐに表示します。

    図10 Instant
  2. Dissolve
    Dissolveトランジションは、次のフレームへフェードインします。 

    図11 Dissolve
  3. Move in
    Move inトランジションは、フレームの上に次のフレームの上に表示します。

    図12 Move in
  4. Move Out
    Move OutトランジションはMove inの逆の動きをします。

    図13 Move Out
  5. Push
    プッシュトランジションは、次のフレームへスライドされます。

    図14 Push
  6. Slide in
    Slide inトランジションは、 Move inと同様に、 次のフレームへ移動します。ただし、フレームは、2つの動作間で異なる方法で処理されます。

    図15 Slide in
  7. Slide Out
    Slide Outトランジションは、 Slide inと逆の動きをします。

    図16 Slide out

フレームの移行動作に加えて、次の設定もプロトタイププロパティから調整できます。

  • Direvtion
    次のフレームが入る方向を選択できます。 Left 、 Right 、 Top 、Bottomから選択できます。

  • Duration
    移行が完了するまでにかかる時間を決定します。

  • Easing
    開始時、終了時、または開始時と終了時の両方で遷移の一部を遅くすることができます。

  • Preserve scroll positon
    Preserve scroll positonにチェックを入れると、2つのフレーム間を移動するときに同じスクロール位置を維持できます。

理解度チェック

UI/UXデザインツール『Figma』入門

1. Figmaの概要とインストール

2.Figmaの基本操作

3.ツールバーの操作

4. プロパティパネルの操作

5. プロトタイピング

6. 共有とバージョン管理

7. 料理写真投稿アプリを作ってみよう

このレッスンの著者