演習 – Figma を使用して自転車修理店のアプリを設計する

完了

この演習では、Figma UI キットを使用して特定のコンポーネントを確認し、自転車修理店のアプリを作成します。

シナリオ

あなたは自転車店に勤務しており、次回の VIP セールの責任者です。 プレゼンテーション トピックに関する顧客の希望に基づいて、このセールを計画する必要があります。

そこで、同僚が専用のタブレット PC を使用して潜在的な参加者を登録し、参加者の希望を収集できる、キャンバス アプリを設計することにします。

ここでの目的は、アプリケーションを設計し、店舗の所有者とマーケティング ディレクターがアプリケーションを確認してレコメンデーションを提供できるようにすることです。

アプリケーションでは、あなたと同僚が次の情報を収集できる必要があります。

• 顧客の名前、メール、および電話番号

• 希望するプレゼンテーション トピックの選択肢:

  • レースに向けての精神的、肉体的な準備

  • オフシーズンの 5 つのベスト プラクティス

  • 予防的メンテナンスのヒント

  • 子供から大人までの年齢に適した自転車のサイズの選び方

演習

このユニットの手順のデモについては、次のビデオをご覧ください。

1. Figma UI キットの Web ページに移動します。

2. Figma で開くを選択します。

   

3. 左側のナビゲーション ウィンドウの ファイル で、ページ の横にあるプラス (+) 記号を選択して、アプリ デザインのキャンバスを作成します。

   

4. ページの名前を自転車 VIP イベントに変更します。

   

5. スタジオのアセット セクションで、タブレット フォーム ファクターを選択し、インスタンスの挿入 を選択します。

   

6. 画面にコンポーネントを追加可能にするには、まず画面を切り離す必要があります。 画面コンポーネントを右クリックして、コンテキスト メニューのインスタンスの切り離しを選択します。

   

7. 情報テキスト ボックスを選択し、キーボードの Delete キーを押して、その情報テキスト ボックスを削除します。

   

8. 画面コンポーネントの名前を変更するには、画面コンポーネントの上部にあるラベルをダブルクリックし、その名前としてホーム画面と入力します。

   

9. タブレット PC リストから必須コンポーネントを追加します。 これらのコンポーネントを使用すると、従業員が顧客をイベントに登録できます。

   1. タブレット PC コンポーネント領域の 00 スクロール可能セクションで、フォーム コンポーネントを追加します。

   2. フォームのサイズ変更と移動を行って、次の座標と寸法を設定します。

      • X = 0

      • Y = 60

      • Width = 1366

      • Height = 648

   3. 手順 7 の指示に従ってフォームを切り離します。

      

   4. 左上のレイヤーを選択します。次に、ホーム画面の msft_Form の下にある情報テキスト ラベルを選択し、キーボードの削除キーを押して削除します。

      

10. フォームで、イベントの顧客情報を取り込むための入力フィールドを追加します。 タブレット PC フォーム ファクターとフォーム コンポーネントでのデータ入力を考慮して、左側の アセット ナビゲーション ウィンドウのタブレット PC/水平データカード セクションにある新しいコンポーネントをすべて選択します。

    

11. 次のコンポーネントを追加し、右側のナビゲーション ウィンドウを使用して、コンポーネントのプロパティを定義します。 それぞれの Text プロパティを変更するには、コンポーネント自体のテキストを 3 回クリックして選択し、テキストが青色で強調表示されたら、テキストを入力します。

    • 00 ヘッダー、区切り線 (次のプロパティを持つタイトル テキスト ボックス):

      テキスト: VIP イベント登録フォーム

    

    • 03 テキスト入力、ドロップダウン、コンボボックス (顧客名を取り込むための入力テキスト ボックス):

      テキスト: 顧客名:

    • 03 テキスト入力、ドロップダウン、コンボボックス (顧客のメール アドレスを取り込むための入力テキスト ボックス):

      テキスト: 顧客のメール:

    • 03 テキスト入力、ドロップダウン、コンボボックス (顧客の電話番号を取り込むための入力テキスト ボックス):

      テキスト: 電話番号:

    • 04 切り替え、チェックボックス、ラジオ (選択肢となる一連のプレゼンテーション オプション):

      • テキスト: 希望するプレゼンテーション:

      • オプション ラベル:

        • レースに向けての精神的、肉体的な準備

        • オフシーズンの 5 つのベスト プラクティス

        • 予防的メンテナンスのヒント

        • 子供から大人までの年齢に適した自転車のサイズの選び方

12. フォームの外に 送信 ボタンを追加し、X プロパティを 1194、Y プロパティを 580 に設定します。 ボタンのテキストを 送信 に変更します。

    

次の手順

以上で、Figma UI キットを使用してアプリを設計する方法の説明を終わります。設計したアプリはキャンバス アプリの作成に使用できます。 続いて、Figma デザインをベースにキャンバス アプリを作成する方法を説明します。