Figma：復習課題

学校サーバから「Figma課題.fig」と「Figma課題完成.fig」をダウンロードしてください。

Figmaに上記の2つのFigファイルをインポートして課題を開始してください。

Figファイルインポート方法

ファイル一覧画面右上の「インポート」ボタンをクリックします。

「コンピュータからインポート」ボタンをクリックしてFigファイルを選択すればインポート完了です。

作業手順に迷った方向けの手引き

下記の作業の流れはFigmaの復習用なので手戻りが多数発生します。
慣れている方は、先にスタイル・バリアブル、コンポーネントを作成しても構いません。

デザインする

基本

1. ロゴの書体を選んでかっこよくしましょう。
2. オートレイアウトやフレームを使ってパーツをフレーム化しましょう。
3. フレーム化したパーツの位置や間隔、余白・角丸などを調整しましょう。
4. 書体や文字の太さ、文字色を定義して文字をデザインしましょう。

プラグインや生成AIを使う

5. unsplashのFree画像を選択をして画像を入れ込みましょう。
6. 生成AIを使って仮テキスト部分に文章を入れましょう。
7. プラグインを調べてGoogleMapを埋め込みましょう

以上で、デザインが完成します。

変更に強いデザインにする

スタイル・バリアブルを登録する

8. よく使う色や書体設定をスタイル・バリアブルに登録しましょう。
9. 各パーツの色や書体設定をスタイル・バリアブルから選択しましょう。

コンポーネントを使う

10. コンポーネント化して修正に強い構成にしましょう。
11. ページ内のパーツをインスタンスに置き換えましょう。
    ※インスタンスに置き換えた時に画像や文字を再度設定する必要があります。

可変に強い幅にする

12. 各パーツの幅・高さを調整しましょう。
    オートレイアウトに内包されているオブジェクトは以下の3つから幅と高さを選択できます。
    • 固定幅・高さ（自分に幅・高さを指定）
    • コンテナに合わせて拡大（親にあわせて可変）
    • コンテンツに内包（子に合わせて可変）
13. 制約を設定しましょう。
    • 親の幅や高さが変わったときに自分がどの位置にいるか設定する

ボタンを作成する

14. ボタンをコンポーネント化してバリアントでホバー時デザインを作成しましょう。
15. ボタンにテキストプロパティを設定してバリアント間でテキストを共有しましょう。
16. ボタンにホバーインタラクションを設定しましょう。
17. ページ内のボタンをインスタンスに置き換えましょう。
    ※インスタンスに置き換えた時、テキストプロパティを使って文字を再度設定する必要があります。

以上で、変更に強いデザインが完成します。

動きを確認できるデザイン

プロトタイプ設定

18. ヘッダーから各コンテンツへページ内リンクさせてください
    ※調べて対応すること（確認時UIを表示しないを選択して確認）
    ※今回は申込みページへのリンクは作成しません
19. プロトタイプを使ってサイトの動きを確認してください。

以上で、動きを確認できるデザインが完成します。

編集しやすいデザイン

テキストプロパティ

20. テキストプロパティを設定した方がよいパーツがある場合は対応しましょう。

以上で、編集しやすいデザインが完成します。