【BONO】バナートレースでFigma基本の復習

はじめに

Figma使用歴1年ほどのオイラが主に復習のためにバナーをトレースしてみる。

基本中の基本を振り返ることができた。

参考にしているFigma講座はこちら。

上……見本のバナー
下…作成したバナー

バナートレースの手順

1. フレーム作成

2. フレーム内にオブジェクト(テキスト・画像)を作成

3. テキストのサイズ・フォント調整　見本の情報を見ながら

4. 図形の挿入・配置・半径の調整

5. 余白の調整

学んだこと

移動ツールに切り替えでオブジェクト選択できる(ショートカットキー　V)
各ツールを選択したままだとオブジェクト作成/編集しかできない。
今まではEscキーで対処していたが、キーが遠く少々不便だった。

レイアウトの比率をテキスト大きめにする(4:6）)
バナーは詳細を閲覧してもらうのが目的。
バナーのテキストから概要を把握することが多いので、テキストに視線を誘導させる構成にする。
比率を大きめにした上で、その中でも余白を多めに取るなど。

四隅に均等な余白を設ける
グラフィックのバランスが整う。

『⇧ + 矢印キー」でオブジェクトが動くピクセル数は10ピクセル
Ctrl + 矢印キーでの移動(1ピクセルずつ)と組み合わせて活用したい。

『複数選択して整列』を活用する
手動で整列させるよりも便利。

『オブジェクトを選択してoptionキー』で他オブジェクトとの距離を表示
距離を知りたいオブジェクトにカーソルを合わせると距離を表示できる。

気づいたこと

• バナーのレイアウトがF型の視線誘導パターンに沿っている