今回はFigmaの基礎編を解説します。
デザインファイルまでの作成は前回紹介しましたので参考にしてください。
関連記事: Figmaの使い方〜準備編〜
本記事の完成デザインは下画像になります。
基本操作
画面のおおよその見方は以下の通りです。
- ヘッダーは操作系統
- 左サイドバーは作成したオブジェクト
- 右サイドバーは選択したオブジェクトの調整
Flame
まずは大元になる画面範囲を作成します。
フレームというパーツを使用して画面を表現していきます。
フレームは画面の範囲、要素の外枠などで多様するパーツで テンプレートがいくつか用意されているので、最初はそれを使うと簡単に作成できます。
Point
- ヘッダーのフレームアイコンをクリック
- 右ナビゲーションにフレームテンプレートが表示されるので、任意のフレームを選択
クリックすると中央にiPhone 13 Pro Maxに対応したフレームが作成できました。
右ナビゲーションには # iPhone 13 Pro Max と書かれたフレームが作成されてます。
大元になる画面範囲を作成できたので、ここからは画面内の要素作成に入ります。
まずはヘッダーを作成します。
先程はフレームのテンプレート機能を使いましたが、今回は自由作成でフレームを作成していきます。
Point
- ヘッダーのフレームアイコンをクリック
- 作成したい場所までマウスを持っていく
- ドラッグアンドドロップで範囲指定
自由作成では数ピクセル単位で作成するのは難しいので、大体の大きさで作成しましょう。
自由作成はヘッダーなどの大きな塊や、ボタンなどの小さな要素のベースを作成する時に使用します。
背景色の変更
自由作成で作成したフレームは真っ白の状態なので 認識しやすいようにヘッダー用のフレームに背景色をつけようと思います。
背景色などの細かな調整は、右ナビゲーション内で行います。
Point
- 調整したい要素を選択
- 右ナビゲーション内のFillという項目を見つける
- Fill項目の右に＋アイコンがあるのでクリック
- カラーコードが下に表示されるのでクリック
- カラーピッカーで任意の色を選択
これで背景色を黒く変更できました。
要素の移動、大きさの変更
ヘッダーの色は付けられましたが、位置も大きさもおかしいです。
持っていきたい位置と大きさに修正してきます。
Point: 位置の修正
- 調整したい要素を選択
- ドラッグアンドドロップで持っていきたい場所まで移動
- 中央や端まで移動すると補正が効きます
- Shit + 移動でx軸とy軸を固定できます
Point: 大きさの変更
- 調整したい要素を選択
- 大きさを変更したい要素の枠までカーソル移動
- ドラッグアンドドロップで大きさを調整
これでヘッダーがある正しい位置と大まかな大きさにできました。
しかしヘッダーの高さが数ピクセルずれてしまったので、微調整します。
Point: 要素の高さ微調整
- 調整したい要素を選択
- 右ナビゲーションのFrame内にあるHのテキストを選択
- 数値の変更をして指定したい値まで変更
- 方向キー↑↓で1ピクセル変更可
Frame内のX, Yは位置、W, Hは横と高さの値が表示され修正できます。
テキスト入力
ヘッダーの枠を作成したので、ヘッダー内の要素を作っていこうと思います。
今回は解説用にヘッダー内にテキストを表示させます。
Point
- ヘッダーのTアイコンをクリック
- テキストを表示したい箇所でクリック
- 入力状態になるので、任意の文字を入力
これでヘッダー内に「ヘッダー」という文字を表示できました。
フォントサイズ変更
今の状態では文字が小さすぎるので 見やすいようにフォントサイズを大きくします。
細かな調整なので他と同様、右ナビゲーション内で行います。
Point
- 調整したいテキストを選択
- 右ナビゲーション内のTextという項目を見つける
- Text項目右下に数字が書いてある項目を見つける
- 数字をクリック
- 数値の変更をして指定したい値まで変更
- 方向キー↑↓で1フォントサイズ変更可
これで見やすいフォントサイズまで変更できました。
要素の揃え方
フォントサイズは見やすい大きさまで調整できました。次にテキストの表示位置を修正しようと思います。
細かな調整なので他と同様、右ナビゲーション内で行います。
Point: 要素の横中央揃え
- 調整したい要素を選択
- 右ナビゲーション内の中央に縦線が引いてあるアイコンをクリック
Point: 要素の縦中央揃え
- 調整したい要素を選択
- 右ナビゲーション内の中央に横線が引いてあるアイコンをクリック
中央揃えした時と同行の他アイコンは整列系のアイコンです。
ヘッダーは完成したので、フッターを作成していきます。
フッターのデザインはヘッダーと同じデザインを使用するので、ヘッダーをコピーします。
Point: 要素の複製
- 複製したい要素を選択
- Ctrl + Cを入力
- Ctrl + Vを入力
これでフッター用にコピーできました。
しかしヘッダーと同じ位置にあるので、一番下に持っていきます。
Point: 要素の縦下揃え
- 調整したい要素を選択
- 右ナビゲーション内の下部に横線が引いてあるアイコンをクリック
これでフッターも完成です。
以上今回はFigmaの基礎編１を解説しました。
次回はFigmaで最も重要な機能たちを解説します。
関連記事: Figmaの使い方〜基礎編２〜