Figmaでバナー下書き

Figmaは案件現場でもよく使われる。
バナー案件でも、構成ラフ・文字組・余白設計はFigmaで十分、むしろ早い。

準備

1.Figmaを開く
2.New design file
3.右上の名前を変更

フレーム作成

1.左ツールバー→Frame(F)
2.右側パネル→Custom size
3.サイズ入力1080×1080(Instagram想定)

真ん中にキャンバスが来るが、白いキャンバスがない場合真ん中のどこかでクリックしたら出てくる。

文字を書く

1.Text(T)を選択
2.とりあえず3つ作る
  ・キャッチ(大)
  ・サブ(中)
  ・補足(小)
中身は適当でOK
位置と大きさだけ調整
  ・中央or左揃え
  ・行間は詰めすぎない
※フォント選びで悩まない、デフォルトのまま。

余白を作る

1.端に近すぎる文字を内側へ
2.四辺すべて同じくらい空ける
  →見て呼吸できる感じならOK

写真を置く

1.画像をドラッグ&ドロップ
2.文字と被らない位置に配置
3.写真は1枚だけ

※切り抜き・加工はしない
  →置くだけ

全体チェック

・一番伝えたい文字はどれ?
・それが一番大きい?
・ごちゃっとしてない?

この3つだけ見る。
修正は最大3回まで。

そのままPhotoshopへ
Figmaで作った下書きを見ながら作ろう!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次