Creative Ideal
デザイン

Figma入門｜デザイン初心者が最初に覚えるべき基本操作

Figmaの基本操作を初心者向けに解説。アカウント作成から、フレーム、シェイプ、テキスト、コンポーネントまで、UIデザインに必要な機能を網羅。

Figmaは、ブラウザで動く無料のデザインツールです。

インストール不要で、チームでのリアルタイム共同編集もできるため、Web/アプリのUIデザインで最も使われているツールの一つになりました。

Figmaを始める

アカウント作成

  1. figma.com にアクセス
  2. 「Get started for free」をクリック
  3. Googleアカウントまたはメールで登録

無料プランでも十分使えます。個人利用なら有料プランは不要です。

デスクトップアプリ vs ブラウザ

環境メリット
ブラウザインストール不要、どこでも使える
デスクトップアプリオフライン作業可、動作が軽い

どちらでも機能は同じです。まずはブラウザで試してみましょう。

画面の基本

インターフェース構成

Figmaの画面は大きく4つのエリアに分かれています：

  • 左パネル: レイヤー一覧、ページ切り替え
  • 中央: キャンバス（作業エリア）
  • 右パネル: プロパティ、デザイン設定
  • 上部ツールバー: 各種ツール

基本操作

操作ショートカット
移動スペース + ドラッグ
ズームCmd/Ctrl + スクロール
全体表示Shift + 1
選択範囲に合わせるShift + 2

フレーム - デザインの土台

フレームとは

フレームはデザインの枠です。スマホ画面やPC画面のサイズを指定できます。

作成方法：

  1. ツールバーから「Frame」を選択（ショートカット: F）
  2. キャンバスにドラッグ、または右パネルからプリセットを選択

よく使うプリセット

デバイスサイズ
iPhone 15 Pro393 x 852
iPhone SE375 x 667
MacBook Pro 14”1512 x 982
Desktop1440 x 900

フレームの入れ子

フレームの中にフレームを入れることで、ヘッダー、コンテンツ、フッターなどの構造を作れます。

Frame (iPhone 15 Pro)
├── Frame (Header)
├── Frame (Content)
└── Frame (Footer)

シェイプ - 基本図形

図形を描く

ショートカット：

  • R: 長方形（Rectangle）
  • O: 楕円（Ellipse）
  • L: 線（Line）

角丸の設定

長方形を選択して、右パネルの「Corner radius」で角丸を設定：

  • 4つの角を一括で変更
  • 個別に設定も可能（アイコンをクリック）

色と線

  • Fill: 塗りつぶしの色
  • Stroke: 線の色と太さ

グラデーションや画像での塗りつぶしも可能です。

テキスト

テキストを追加

  1. Tキーでテキストツールを選択
  2. キャンバスをクリック、またはドラッグ

テキストプロパティ

右パネルで設定できる項目：

プロパティ説明
Fontフォントファミリー
Weight太さ（Regular, Bold など）
Size文字サイズ
Line height行間
Letter spacing文字間隔

日本語フォント

Figmaには日本語フォントも搭載されています：

  • Noto Sans JP
  • Noto Serif JP
  • M PLUS 1p

Google Fontsのフォントも利用可能です。

オートレイアウト

オートレイアウトとは

要素を自動で並べてくれる機能です。ボタンやカードなど、内容に応じてサイズが変わる要素に便利。

設定方法

  1. 要素を選択
  2. 右パネルの「Auto layout」をクリック（または Shift + A）

主な設定

設定説明
方向横並び / 縦並び
Gap要素間の余白
Padding内側の余白
Alignment配置（左寄せ、中央、右寄せ）

ボタンの例

オートレイアウトを使うと、テキストの長さに応じてボタンの幅が自動調整されます：

  1. テキストを作成
  2. Shift + Aでオートレイアウトを適用
  3. Paddingを設定（例: 左右16px、上下8px）
  4. 背景色を設定

コンポーネント

コンポーネントとは

再利用可能なパーツです。一箇所を変更すると、すべての複製に反映されます。

作成方法

  1. 要素を選択
  2. Cmd/Ctrl + Option/Alt + Kでコンポーネント化
  3. 紫色の枠が表示されたらOK

インスタンス

コンポーネントをコピーすると「インスタンス（複製）」になります：

  • メインコンポーネント: 原本（紫の◆アイコン）
  • インスタンス: 複製（白抜きの◇アイコン）

メインコンポーネントを変更すると、すべてのインスタンスに反映されます。

バリアント

同じコンポーネントのバリエーション（状態違い）を作れます：

  • ボタン: Default / Hover / Disabled
  • チェックボックス: On / Off

プロトタイプ

プロトタイプとは

画面遷移などの動きを再現する機能です。クリックで次の画面に移動するなど、実際のアプリのような動作を確認できます。

設定方法

  1. 右パネルの「Prototype」タブを選択
  2. 要素を選択し、青い丸をドラッグして遷移先に接続
  3. トリガー（On click など）とアニメーションを設定

プレビュー

右上の再生ボタン（▶）でプロトタイプを実行できます。

便利なショートカット

覚えておくと作業効率がアップします：

操作MacWindows
コピーCmd + CCtrl + C
ペーストCmd + VCtrl + V
複製Cmd + DCtrl + D
グループ化Cmd + GCtrl + G
コンポーネント化Cmd + Option + KCtrl + Alt + K
オートレイアウトShift + AShift + A
取り消しCmd + ZCtrl + Z
やり直しCmd + Shift + ZCtrl + Shift + Z

次のステップ

基本操作を覚えたら、以下に挑戦してみましょう：

  1. 既存のUIをトレース: 好きなアプリやWebサイトを模写
  2. UIキットを使う: 無料のUIキットを参考に
  3. コミュニティを活用: Figma Communityで他の人のファイルを見る

Figmaは機能が豊富ですが、まずは今回紹介した基本機能を使いこなすことから始めましょう。

CI
Creative Ideal編集部
クリエイターのための情報をお届けします