目次
はじめに
今回の実践編では、Figmaの「基本操作」と「応用操作」の2つに分けてご紹介します。
これらの操作をマスターすれば、複数ページのデザイン一覧や修正指示の管理、さらには共通デザインパーツの一括修正などが効率的に行えるようになります。
他のデザインツールとの違いやFigmaの権限設定（プラン）については、前回の「Figmaについて（概要編）」でご紹介していますので、そちらもぜひご覧ください。
公式サイト：Figma
Figmaの基本操作（レビュー・修正指示編）
まずは、Webサイトの修正指示など、チームでデザインをレビューする際に必須となる基本操作を見ていきましょう。
- １. 土台の設定（修正対象の貼り付け）
- ２. コメント機能での修正指示
- ３. 画面の共有（権限の設定）
土台の設定
修正したいWebサイトのスクリーンショットや、デザイン画像をFigmaのキャンバスにドラッグ＆ドロップで貼り付けます。
※ただし、縦横いずれかが4000pxを超えるような大きな素材は、貼り付けた際に画像が荒くなることがあるのでご注意ください。
画像を貼り付けたら、ツールバーの「Frame」（# のようなアイコン）で対象の画像を囲むことをおすすめします。一手間かかりますが、後の作業が格段に楽になります。
Frame設定をおすすめする理由
- Frameに名前を付けられるため、検索や管理がしやすい
Frameの名前を修正対象のページURLなどにしておくと、どのページの修正か一目で分かります。 - レイヤーを整理しやすい
修正指示のコメントや追加の図形（シェイプ）、テキストが増えても、Frameごとに管理されるためレイヤーパネルが整理され、管理しやすくなります。
もちろん、先にFrameを作成してサイズを指定してから、その中に画像を貼り付ける方法でも問題ありません。やりやすい方法で試してみてください。
コメント機能での修正指示
ツールバーの「Comment」（吹き出しのアイコン）をクリックすると、コメント入力モードになります。
- コメントを残したい場所（修正箇所など）をクリックします。
- 修正指示などの内容を記入し、「Post」ボタンをクリックして投稿します。
対応が完了した課題（コメント）は、「Resolve」（コメント右上のチェックマーク）をクリックすると非表示にできます。
解決済みのコメントを再表示したい場合は、右サイドバーの「Comments」パネルを開き、「Show resolved comments」にチェックを入れると確認できます。
コメントの編集や削除は、各コメントの右上のメニュー（…）から行えます。
画面の共有（権限の設定）
ツールバー右上の「Share」ボタンをクリックし、招待したい人のメールアドレスを入力します。
デフォルト（初期設定）では権限が「can view」（閲覧のみ）になっています。もし相手にも編集作業を許可したい場合は、権限を「can edit」（編集可）に変更してから招待しましょう。
招待できる人数やプランについては、前回の「Figmaについて（概要編）」でご紹介しています。
Figmaの応用操作（デザイン作業編）
次に、デザイン作業を効率化するための応用操作をご紹介します。
画像を縦横比を変えずに指定の大きさにしたい
画像を選択し、Shiftキーを押しながら角をドラッグすると、縦横比を保ったまま拡大・縮小できます。
また、右サイドバーの「Design」パネル内にあるサイズツール（W: 幅, H: 高さ）でも数値を指定して調整できます。
この時、WとHの間にある鎖のアイコン（Constrain proportions）をクリックしてリンク状態にしておくと、縦横比が固定されます。
定規表示したい・ガイドを引きたい
左上のメインメニュー（横三本線のアイコン）から [View] > [Rulers] を選択（ショートカット: `Shift + R`）すると、キャンバスの上部と左側に定規（ルーラー）が表示されます。
Photoshopなど他のデザインツールと同様に、定規の上（または左）からドラッグすることでガイドラインを引き出せます。
マスクをかけたい
Figmaでは、シェイプの形で画像を簡単に切り抜く（マスキングする）ことができます。
- マスクの「型」として使いたいシェイプ（円や四角形など）を作成します。
- マスクをかけたい画像を、そのシェイプの上に重ねて配置します。
- レイヤーパネルまたはキャンバス上で、画像とシェイプの両方を選択します。
- ツールバーにある「Use as Mask」（欠けた月のようなアイコン）をクリックします。
これだけで、シェイプの形で画像が切り抜かれます。マスクした後でも、画像やシェイプの位置・サイズは自由に調整可能です。
画像を一気に流しこみたい
あらかじめ画像を配置したいシェイプ（例：四角形を6個）が用意されている場合に便利な機能です。
- ツールバーのシェイプツール（四角いアイコン）のドロップダウンメニューから「Place Image…」を選択します。（ショートカット: `Shift + Command + K` / `Ctrl + Shift + K`）
- 流し込みたい画像を複数（例：6枚）選択します。
- マウスポインタが画像のサムネイルに変わったら、配置したいシェイプを順番にクリックしていきます。
- クリックするたびに、選択した画像がシェイプのサイズに合わせて自動で流し込まれます。
※これはシェイプの「Fill（塗り）」として画像を指定する機能です。そのため、マスクとは異なり、シェイプ内で画像の拡大や移動はできません。
流し込んだ画像を解除したい場合
対象のシェイプを選択し、右サイドバーの「Fill」パネルにある画像のサムネイルをクリックし、表示されるマイナス（ー）ボタンをクリックします。
コピペの土台を作る（コンポーネント）
Webサイトで共通して使うボタンやヘッダーなどのデザインパーツは、「コンポーネント」機能を使うと管理が非常に楽になります。
- 共通パーツの「元」デザインとなるオブジェクト（シェイプやテキストなど）をすべて選択します。
- ツールバーの「Create Component」（4つの菱形アイコン）をクリックします。
これだけで、選択したオブジェクトが「メインコンポーネント（設計図）」になります。
コピペしたものを全て修正したい（コンポーネントの活用）
「メインコンポーネント」をコピー＆ペーストして作成したものは「インスタンス（実体）」と呼ばれます。
- メインコンポーネント： レイヤーパネルで4つの菱形（◆◆◆◆）アイコンで表示されます。
- インスタンス： レイヤーパネルで1つの菱形（◆）アイコンで表示されます。
最大のメリットは、「メインコンポーネント」のデザイン（色、形、テキストなど）を修正すると、すべての「インスタンス」にその変更が一括で反映される点です。
「ボタンの色を全ページで統一して変更したい」といった場合に、設計図であるメインコンポーネントを1つ修正するだけですべての作業が完了します。
（もちろん、インスタンス側で個別に色やテキストを変更＝オーバーライドすることも可能です。）
画像を書き出したい
デザインした画像やFrameを書き出す（エクスポートする）方法です。
- 書き出したいオブジェクトまたはFrameを選択します。
- 右側のサイドバー（インスペクタ）の一番下にある「Export」パネルを開きます。
- 「+」ボタンを押し、書き出す形式（PNG, JPG, SVG, PDF）や倍率（1x, 2xなど）を設定します。
- 「Export [レイヤー名]」ボタンをクリックして、保存場所を指定します。
ページで画面切り替えできる
Figmaでは、1つのファイル（プロジェクト）内で複数の「ページ」を作成し、作業領域を分けることができます。
左側のレイヤーパネル上部にある「Page 1」と書かれた部分の横にある「+」ボタンをクリックすると、新しいページ（Page 2, Page 3…）を追加できます。
例えば、1つのWebサイト案件（ファイル）の中で、以下のようにページを分けて管理できます。
- PCサイト [Page]
- TOP [Frame]
- 会社概要 [Frame]
- SPサイト [Page]
- TOP [Frame]
- 会社概要 [Frame]
また、あるページで作ったFrameや素材を、別のページに移動させることも可能です。
移動したいFrameまたは素材を右クリックし、[Move to Page] > 移動させたいページ名を選択します。
まとめ
今回は、Figmaの実践的な使い方として、Webサイトの修正指示に役立つ「基本操作」と、デザイン作業を効率化する「応用操作」をご紹介しました。
特に「コメント機能」でのスムーズな修正指示や、「コンポーネント機能」を使ったデザインパーツの一括管理は、Web制作の現場で非常に強力な武器となります。
これらの機能を活用して、Figmaでのデザイン作業やチームとのコミュニケーションを、より効率的に進めていきましょう。
よくある質問
Q. Frameで画像を囲むメリットは具体的に何ですか？
A. Frameで囲むことで、レイヤーを整理しやすくなるだけでなく、Frame自体に名前（例：ページのURLやセクション名）を付けられるため、どの部分のデザインか一目で分かりやすくなります。また、複数のオブジェクトをグループ化し、書き出し（Export）の単位としても使えるため、Webデザインの作業効率が格段に向上します。
Q. 「メインコンポーネント」と「インスタンス」の違いがよく分かりません。
A. 「メインコンポーネント」は「設計図」や「金型」のようなものです。例えば、サイト内で共通して使う「送信ボタン」の設計図を1つ作っておきます。その「メインコンポーネント」をコピーして配置したものが「インスタンス」（実体）です。設計図である「メインコンポーネント」の色を変更すれば、すべての「インスタンス」の色が一斉に変わるため、デザインの修正や統一が非常に簡単になります。
Q. チームメンバーにデザインを共有したいのですが、編集されたくありません。どうすればよいですか？
A. 画面右上の「Share」ボタンから共有設定を開き、招待する相手の権限を「can view」（閲覧のみ）に設定してください。これにより、相手はデザインを見たりコメントを残したりできますが、デザイン自体を編集することはできなくなります。Webサイト運営初心者の方やクライアントに確認してもらう際に便利な設定です。