ここではFigmaを使った制作方法について説明します。ワイヤーフレームの定義や一般的な制作手順については「ワイヤーフレーム」のページを参照してください。
新しいファイルの作成
Figmaデザインで新規のファイルを作ります。
フレームの作成
Frameツールで画面サイズを設定します。レスポンシブデザインを想定し、デスクトップサイズとモバイルサイズ、2つを並行して進めていきます。
例：デスクトップ 1440px、モバイル375px
レイアウトガイドの設定
ガイドを設定しておくと配置の目安になります。12列のガイドにすると、2、3、4、6列など柔軟に分割しやすくなります。
| デバイス | 列 | ガター | 余白 |
|---|---|---|---|
| デスクトップ | 12 | 24-32px | 80-120px |
| タブレット | 8 | 16-24px | 40-64px |
| モバイル | 4 | 12-16px | 16-24px |
基本要素の制作
長方形ツール、テキストツールなどを使って基本的な要素を配置していきます。
- ヘッダー（ナビゲーション）の作成
- メインビジュアルエリア
- コンテンツブロック
- フッター
コンポーネント（Component）
コンポーネントとはデザイン要素をひとまとめにして再利用しやすくする機能です。元のデザイン（マスター）を変更すると全てのコピー（インスタンス）が更新されます。ボタンやカード型レイアウト、ナビゲーションなど、同じデザインを繰り返し使う場合に効率よく制作が行えます。
①対象となる要素を作成し、グループ化する
- ボタン、カード、ヘッダーなどの要素を作成してからグループにします。
②コンポーネントに変換する
- メニュー、または右クリックから「コンポーネント作成」を選びます
③マスターコンポーネントの確認
- 菱形のアイコンと紫色の枠が表示され、アセットパネルにも登録されます
④インスタンスを使用する
- アセットからコンポーネントをドラッグ&ドロップします
- テキスト部分などはインスタンス毎に調整可能です
バリアント（Variant）
同じコンポーネントの状態違いをまとめて管理する仕組みです。例えば、ボタンの「通常」「ホバー」「無効時」など各動作による違いを設定しておき、切り替えることができます。
①複数のコンポーネントを作成
状態や種類ごとにコンポーネントを作ります。ボタンの「通常」「ホバー」「無効時」の３種類を作るのであれば、それぞれコンポーネントにしておきます。
②バリアント化
複数のコンポーネントを同時に選択し、右サイドメニューの「バリアントとして結合」を選んで、バリアントにします。これによって、複数のコンポーネントが１つの「バリアントセット」になります。画面上では紫色の枠で囲まれます。
③バリアントの設定
プロパティパネルに、プロパティやバリューという項目が表示されます。プロパティは状態やタイプの分類名、バリューは各バリアントの値です。
バリューについては、命名規則を統一し分かりやすくします。
- ボタン通常時
- ボタンホバー時
- ボタン無効時
④バリアントの使用
アセットからバリアントセットをドラッグ&ドロップし、プロパティ欄から状態を選ぶことで、外観が切り替わります。
フレームの活用
最初に画面を作るときにフレームを使いました。これは、IllustratorやXDなどにおけるアートボードのような使い方です。Figmaにおけるフレームは、グループに近い概念です。レイアウトの単位の１つで、フレームの中にフレームを作ることができます。
画面全体のフレーム内に、ヘッダー、各セクション、フッターごとにフレーム化しておくと、固定ヘッダーを設定するなど、フレームごとに挙動を変えられます。
参考