Figmaの基本図形の作成

Figmaでは、図形（シェイプ）を自由に作れるようになると、バナー・ボタン・UIパーツなど、ほとんどのデザインが表現できるようになります。

このページでは、Figmaで最も使用頻度の高い「基本図形ツール」の使い方を学びます。
図形を正しく扱えるようになると、

アイコン
ボタンパーツ
カードデザイン
ワイヤーフレームの箱組み

など、UI制作の土台がスムーズに作れるようになります。

特に、図形の 塗り・線・影・角丸 は後のデザインで必ず使うので、ここでしっかり触っておきましょう。

Contents

1. フレームを1つ作成しよう

まずは練習用のフレーム（枠）を作成します。

下部のツールバーからフレームを選択
任意の大きさでフレームを作成します。
上の図では横800px * 640pxで作成しています。
キャンバスに白い枠ができます。

※フレームは「スマホ画面」や「バナーの土台」となる箱です。

2. 長方形ツールで図形を描く

ツールバーの「長方形ツール」を選び、フレームの内側に長方形を描いてみましょう。

ドラッグで大きさを自由に変更
Shiftキーを押すと「正方形」になります。
上の図では、200px * 200pxで作成しています。
拡大 / 縮小は角をドラッグします

大きさは右側プロパティレイアウト＞サイズ＞W(幅)とH(高さ) で数値指定することもできます。

3. 正円を描く（Shiftキー）

円を描くには「楕円ツール（O）」を使いますが、ただ描いただけでは “楕円” になってしまいます。Shiftキーを押しながら描くと正円になります。長方形と同じく、大きさはプロパティパネルで指定できます。200px の正円を書いてみましょう。

4. 塗り（Fill）を変更する

図形を選択すると、プロパティパネルの塗りが表示されます。

カラーをクリックするとカラーピッカーが開く
HEX / RGB / HSL の指定も可能
不透明度（Opacity）の変更もできます。

色を決めるだけでも楽しいので、四角や円に好きな色をつけてみましょう。

5. 線（Stroke）を追加する

図形に枠線をつけるには線（Stroke）を追加します。

線の右横の＋をクリック → 線の太さの設定
線の位置：中央 /内側 / 外側
線の色も塗りと同じく設定できます

Figma の「線（Stroke）」は初期設定では “中央に” 描かれます。そのため 線幅を大きくすると、図形自体のサイズが少し大きく見える ことがあります。

Stroke の位置は次の 3 種類
- Center（中央）
- Inside（内側）
- Outside（外側）

UI のピクセル管理が必要なときは Inside を選ぶと、図形の外寸に影響しないためおすすめです。

6. 影（Drop shadow）をつけてみる

図形に影をつけると、UIらしさが一気に出ます。

エフェクト横のプラスをクリック
「ドロップシャドウ」を選択
下記を調整してみましょう
- X / Y（影の位置）
- Blur（ぼかし具合）
- Spread（広がり）
- Color（影の色）黒で透明度25%が入っています。

カードUIやボタンで必ず使うので、練習しておきましょう。

7. グラデーションを使ってみる

塗りをクリックし、カスタムの下にある「グラデーション」をクリックします。

線形（左右または上下にグラデーション）
放射状（中心から広がるグラデーション)
円錐形
ひし形
ドラッグして角度を変えることもできます。

0% 横の塗りから色を変更できます。また+ をクリックすると色を増やすことが可能です。

【ポイント：グラデーションは“方向”が重要です】
2色以上の色を使うグラデーションは、ハンドルをドラッグする方向で見た目が大きく変わります。

横方向 → ボタン・見出しパーツ向け
縦方向 → 背景に使うと馴染みやすい
斜め方向 → アクセントに使いやすい

グラデーションは「色」だけでなく “角度” と “距離” を微調整すると、より上級者らしい仕上がりになります。

8. コピー＆複製の練習

図形は以下の方法で複製できます。

Option（Alt）＋ドラッグ → 一番速い
Cmd+C → Cmd+V → 単純コピー
Cmd+D → 連続して複製
右クリック → Duplicate

複製すると、整列・等間隔の練習がしやすくなります。