今回はFigmaの基礎編を解説します。

デザインファイルまでの作成は前回紹介しましたので参考にしてください。

本記事の完成デザインは下画像になります。

基本操作

画面のおおよその見方は以下の通りです。

• ヘッダーは操作系統
• 左サイドバーは作成したオブジェクト
• 右サイドバーは選択したオブジェクトの調整

Flame

まずは大元になる画面範囲を作成します。

フレームというパーツを使用して画面を表現していきます。

フレームは画面の範囲、要素の外枠などで多様するパーツで
テンプレートがいくつか用意されているので、最初はそれを使うと簡単に作成できます。

クリックすると中央にiPhone 13 Pro Maxに対応したフレームが作成できました。

右ナビゲーションには # iPhone 13 Pro Max と書かれたフレームが作成されてます。

大元になる画面範囲を作成できたので、ここからは画面内の要素作成に入ります。

まずはヘッダーを作成します。

先程はフレームのテンプレート機能を使いましたが、今回は自由作成でフレームを作成していきます。

自由作成では数ピクセル単位で作成するのは難しいので、大体の大きさで作成しましょう。

自由作成はヘッダーなどの大きな塊や、ボタンなどの小さな要素のベースを作成する時に使用します。

背景色の変更

自由作成で作成したフレームは真っ白の状態なので
認識しやすいようにヘッダー用のフレームに背景色をつけようと思います。

背景色などの細かな調整は、右ナビゲーション内で行います。

これで背景色を黒く変更できました。

要素の移動、大きさの変更

ヘッダーの色は付けられましたが、位置も大きさもおかしいです。

持っていきたい位置と大きさに修正してきます。

これでヘッダーがある正しい位置と大まかな大きさにできました。

しかしヘッダーの高さが数ピクセルずれてしまったので、微調整します。

Frame内のX, Yは位置、W, Hは横と高さの値が表示され修正できます。

テキスト入力

ヘッダーの枠を作成したので、ヘッダー内の要素を作っていこうと思います。

今回は解説用にヘッダー内にテキストを表示させます。

これでヘッダー内に「ヘッダー」という文字を表示できました。

フォントサイズ変更

今の状態では文字が小さすぎるので
見やすいようにフォントサイズを大きくします。

細かな調整なので他と同様、右ナビゲーション内で行います。

これで見やすいフォントサイズまで変更できました。

要素の揃え方

フォントサイズは見やすい大きさまで調整できました。次にテキストの表示位置を修正しようと思います。

細かな調整なので他と同様、右ナビゲーション内で行います。

中央揃えした時と同行の他アイコンは整列系のアイコンです。

ヘッダーは完成したので、フッターを作成していきます。

フッターのデザインはヘッダーと同じデザインを使用するので、ヘッダーをコピーします。

これでフッター用にコピーできました。

しかしヘッダーと同じ位置にあるので、一番下に持っていきます。

これでフッターも完成です。

以上今回はFigmaの基礎編１を解説しました。

次回はFigmaで最も重要な機能たちを解説します。