Figmaの基本操作と使い方まとめ

Figmaってどんなツール？

Figma（フィグマ）は、Webブラウザで使える無料のデザインツールです。

• ソフトのインストール不要

• Googleドキュメントのようにリアルタイム共同編集できる

• UIデザイン・バナー制作・資料づくり・プロトタイプもOK！

デザイン初心者でも直感的に使いやすく、学習コストが低いのが特長です。

まずはFigmaを始めてみよう！

Step1：アカウント作成（無料）

• 公式サイト にアクセス

• Googleアカウントでログインすればすぐ使えます！

Step2：新規ファイルを作成

• 「New design file」をクリック

• 白いキャンバス（作業画面）が開きます

Figmaの画面構成

Figmaを開くと、主に次の4エリアがあります

よく使う基本操作

バナーを作るときの基本ステップ

例：Instagramバナー（1080px × 1080px）

1. Fキーでフレーム作成（サイズを指定）

2. Rで背景を作る（色は右パネルで設定）

3. Tでキャッチコピーを入力、フォントを調整

4. 画像やアイコンをドラッグ＆ドロップで配置

5. ボタン風の図形や装飾を追加

6. File → ExportでPNGまたはJPGで保存

👀 完成したデザインはSNSやWebサイトにそのまま使えます！

よくある初心者のつまずきポイント

オブジェクトが揃わない

→ Shiftで等間隔に移動、Alignで整列可能

文字サイズが小さくて見えない

→ まずは20px以上で始めると失敗しにくい

レイヤーがごちゃごちゃになる

→ レイヤーに名前をつけて、グループ化（Cmd + G）を活用！

おすすめ無料素材サイト（Figma対応）

• Unsplash（写真）

• Iconify（アイコン）

• UI Store（Figmaテンプレート）

• Figma Community（無料デザイン素材やUIキット）

まとめ：Figmaはまず「触って慣れる」が最速の上達法！

• 無料で高機能なデザインツール

• フレーム→テキスト→画像配置で簡単なバナーがすぐ作れる

• 覚える操作は少なく、直感的に使える！