Zenn
✨

Figmaの基本操作＆ショートカットまとめ！未経験からモック作成できるようになるまでに覚えた方が良い事

に公開
Figma
uiデザイン
初心者向け
ショートカットキー
業務効率化
tech

はじめに

最近、業務で画面イメージを作るために Figma を初めて使ってみました。
これまでの仕事ではあまり触れる機会がなかったのですが、Excelを使うような感覚で操作できて、思っていたよりもすぐに慣れることができました。

ただ、使いながら「もっと効率の良い方法やショートカットがあるのでは？」と感じることも多く、改めて Figma の便利な使い方を調べてまとめてみることにしました。

この記事は、

  • これから Figma を使ってみたい方
  • なんとなく使っているけど、もう少し効率よく使いたい方

に向けて、基本操作や便利なコツを紹介していきます。
少しでも参考になればうれしいです。

Figmaってなに？ざっくり紹介

Figma（フィグマ）は、Webブラウザ上で使えるデザインツールです。
アプリのUIデザインや画面モックの作成など、主にデザイナー向けのツールというイメージがありますが、実はエンジニアやディレクターでも直感的に使えるのが大きな特徴です。

Figmaの主な特徴

  • インストール不要、ブラウザだけでOK
    Web上で動くので、環境構築なしですぐに使い始められます。

  • リアルタイムで共同編集ができる
    Googleドキュメントのように、複数人で同時に編集できます。
    デザインの確認やコメントもその場で完結するので、チーム作業がとてもスムーズになります。

  • 無料プランでも十分使える機能
    基本的な機能は無料で利用できます。まずは個人で試してみたい場合でも安心です。

    Figmaの基本操作まとめ

ここでは、Figmaを初めて使う方向けに「これだけ知っていればまずは安心！」という基本操作をまとめています。
実際にモックを作るときに頻繁に使う操作ばかりなので、ざっと目を通しておくとスムーズに作業できます。

フレーム（アートボード）の作成

フレームは、キャンバスの中に作る「小さな箱」や「エリア」のようなものです！
もっとかんたんにたとえると…

  • フレーム（Frame）：その中にいろんなもの（テキスト・画像・図形など）をまとめて入れられるクリアファイル
  • ショートカットキー：A
  • スマホやPCなどの画面サイズを選んで、キャンバス上に配置できます。
  • 例：iPhone 13、Desktop、Tablet などのプリセットあり

図形・テキストの追加

  • 図形ツール（Rectangle, Circle など）

    • ショートカット：R（四角） / O（円）

  • テキストツール

    • ショートカット：T
    • クリックして文字を入力するだけ。サイズやフォントも上部バーで調整可能。

要素の整列・グループ化

要素の整列（アライン）

複数のオブジェクトをきれいに揃えたいときに使える機能です。
右側上部の「位置」パネルから「中央揃え」「上下揃え」などが選択できます。

整列の手順：

  1. 適当に図形を数個作成する
  2. 左側のレイヤー一覧 or キャンバス上で複数選択
    • Ctrl（Cmd） + クリック
    • Shift + クリック
  3. 右側の「位置」パネルで
    • 「中央揃え」
    • 「上下揃え」
      などをクリックで整列！

グループ化（Group）

複数の図形やテキストなどをひとつのセットにまとめる機能です。
たとえば、ボタンの背景・テキスト・アイコンを1つにまとめて、まとめて移動・コピーなどができるようになります。

ショートカット：

  • グループ化：Ctrl + G（Macは Cmd + G）
  • グループ解除：Shift + Ctrl + G（Macは Shift + Cmd + G）

グループ化の手順：

  1. 図形やテキストを数個作成する
  2. 複数選択する
    • 左側のレイヤーから Ctrl（Cmd） + クリック または Shift + クリック
    • キャンバス上で Shift + クリック で直接選択もOK
  3. Ctrl + G でグループ化
    または、右クリック → 「グループ化」を選択

グループ化するとレイヤーはどうなる？

  • 左側のレイヤーパネルに、"Group" という名前のフォルダのような構造が追加されます。
  • その中に、グループ化された図形やテキストが階層的にまとめて表示されるようになります。
  • グループ名は後から自由にリネームできます（ダブルクリック or Enter）。

色・フォント・サイズの変更

  • 塗りつぶしカラー（Fill）や枠線（Stroke） を右側のパネルから調整。
  • テキストのフォント・サイズも右パネル or 上部バーで変更できます。

ズーム・移動の操作

  • ズームイン/アウト：Ctrl + マウスホイール（Macは Cmd）
  • キャンバスの移動：スペースキーを押しながらドラッグ

このあたりを押さえておけば、Figma上で基本的なモックを作る準備はOKです。
次のセクションでは、さらに作業が快適になる「ショートカット＆便利機能」を紹介していきます。

便利なショートカット＆コマンド集まとめ

Figmaには作業をぐっと効率化できるショートカットがたくさんあります。
ここでは、特に「これだけ覚えておくと便利！」というショートカット・コマンドを厳選して紹介します。

よく使うショートカット

操作内容 Windows / Mac
フレームを追加 A
四角形を描く R
円を描く O
テキストを追加 T
選択ツールに戻る V
ズームツールに切り替え Z
グループ化 Ctrl + G / Cmd + G
グループ解除 Shift + Ctrl + G / Shift + Cmd + G
コピー Ctrl + C / Cmd + C
貼り付け Ctrl + V / Cmd + V

作業効率アップのちょっと便利な操作

複製（ドラッグ＋Alt）

Altキーを押しながらドラッグすると、要素をすばやく複製できます。
コピー → ペースト よりも素早く操作できるので、同じようなパーツを何度も使うときに便利です！

操作手順：

  1. 複製したいオブジェクトを選択
  2. Altキーを押しながらドラッグして複製
  3. 配置したあと、整列ツールを使って高さや間隔をそろえるとキレイに仕上がります
    • 例：「上下中央揃え」「等間隔配置」など

さらに！ Alt + Shift + ドラッグ

  • Shiftキーも同時に押すことで、縦 or 横方向にまっすぐ複製できます。
  • 特にボタンやカードなどを等間隔で並べるときに便利です！

同じ距離で複製（Ctrl + D）

直前の動作を繰り返すショートカット。複製＋位置をキープして繰り返し配置できます。
1.オブジェクトをAlt + Shift + ドラッグで一度複製する

2.Ctrl + Dで同じ距離で複製する

このあたりを使いこなせるようになると、Figmaでの作業スピードがかなり上がりそうですね。

さらに効率よく作るための便利機能（ざっくり紹介）

Figmaには、もっと効率よくデザイン作業を進めるための機能がいくつか用意されています。
どれも使いこなせると業務でもかなりの時短につながるので、簡単に紹介しておきます。

コンポーネント（Component）

よく使うパーツ（ボタンやカードなど）をひとつの「部品」として登録できる機能です。
同じデザインを何度も再利用できて、あとから一括で変更もできるので便利です。

「何度も同じパーツを作るのが面倒…」という時におすすめ。

コンポーネントの作り方

1.パーツを作成（例：ドロップダウンメニュー）

2.コンポーネント化したい要素をすべて選択
3.Ctrl + Alt + K（Macは Cmd + Option + K）
　または右クリック →「コンポーネントにする」を選択

4.レイヤーパネルに「Component」が生成される

5.左側の「アセット」タブからドラッグ＆ドロップで再利用できるようになります！

親子関係（マスターとインスタンス）

Figmaのコンポーネントは、「親子関係（マスター／インスタンス）」で管理されます。

  • マスターコンポーネント：最初に作成した元の部品
  • インスタンス：そのコピー（見た目は同じだけど、親に従って変化）

たとえばボタンの色やサイズをマスターで変更すると、すべてのインスタンスにも自動で反映されます。
ただし、インスタンス側でテキストなど**一部だけ上書き（オーバーライド）**することも可能です！

※ デザインシステムや共通UIを作るときには、コンポーネントを活用するのがとても効果的です

オートレイアウト（Auto Layout）

ボタンやリストなどの中身に合わせて、自動でサイズや位置を調整してくれる機能です。
レスポンシブなデザインを作りたいときにも役立ちます。

例えば「文字数が変わってもボタンの幅が自動調整される」といった使い方ができます。

グループとフレームの違い

複数の要素をまとめるには「グループ」もしくは「フレーム」を使います。
見た目は似ていますが、フレームは親要素として振る舞うため、オートレイアウトなどと組み合わせて使う場面が多いです。

「ただまとめたいだけならグループ」「レイアウト管理したいならフレーム」が目安。

まとめ

Figmaは最初こそ少し戸惑う部分もありますが、
基本操作やショートカットを覚えると、UIモック作成や簡単なデザイン作業がとてもスムーズにできるようになります。

今回は取り上げていませんが、**Figmaには「プラグイン」**という拡張機能もたくさん用意されているようです。
作業をさらに効率化したい方は、ぜひ調べてみるのもおすすめです！

また使う機会があったら、もっと深くFigmaを勉強してみたいと思います。

Discussion