Figma でマスクをかける方法 — クリッピングマスク・画像マスク・図形での切り抜き

「円形のアイコンを作りたい」「画像を任意の形で切り抜きたい」「Illustrator のクリッピングマスクと同じことを Figma でやりたい」— Figma でマスクを使おうとして、メニューのどこにあるのか分からず手が止まった経験はないでしょうか。Figma にはマスク専用のツールバーボタンがなく、レイヤーの並び順 +「マスクとして使用」 という考え方で動くため、最初は少しとっつきにくく感じます。

この記事では、図形で画像を切り抜く基本のマスク → アルファ・ベクター・ルミナンスの 3 つの種類 → テキストやグループをマスクに応用する → 解除・編集 → トラブル対処まで、デザイン作成の現場で必要な情報を順番に整理していきます。最後に、Adobe XD や Illustrator から移行したマスクが崩れる問題への対処方法もまとめました。

先に結論：マスクは「下に置いた形」で覗き窓を作る

Figma のマスクは、選択範囲の一番下に置いたレイヤーの形だけ、上のレイヤーを見せる仕組みです。図形と画像を選んで「マスクとして使用」（ショートカット ⌃ + ⌘ + M / Windows は Ctrl + Alt + M）を実行すれば、図形の形に画像が切り抜かれます。Illustrator や XD でいうクリッピングマスクと同じ操作で、Figma では単に「マスク」と呼びます。

この記事で得られること

図形で画像を切り抜く、基本のマスクの作り方
アルファ・ベクター・ルミナンスの 3 つのマスク種類の違いと使い分け
画像・テキスト・グループをマスクにする方法
マスクの解除・編集の手順
マスク・Crop・Clip content のどれを使うべきかの判断
XD / Illustrator から移行したマスクが崩れる原因と防ぎ方

⭕ 図形で画像を切り抜く — マスクの基本

一番よくある使い方は、円や任意の図形の形に画像を切り抜くことです。プロフィール写真を丸く見せる、星型に切り抜く、ロゴの形に沿わせる — これらはすべてマスクで実現できます。

手順は次のとおりです。

マスクにする図形を用意する。 円・四角・星など、切り抜きたい形のシェイプを描きます。
図形を画像の下（最背面）に置く。 レイヤーの並び順で、マスクにする図形を、マスクされる画像より下に配置します。Figma ではマスクは選択範囲の一番下のレイヤーが担当します。
両方を選択してマスクを適用する。 図形と画像をまとめて選択し、右サイドバーの「その他のオプション」（More options）→「マスクとして使用」（Use as mask） を選びます。ショートカットは macOS が ⌃ + ⌘ + M、Windows が Ctrl + Alt + M です。
図形の形に沿って画像が切り抜かれ、レイヤーがマスクグループにまとまります。レイヤーパネルではマスクにマスクアイコンが付き、マスクされるレイヤーには上向きの矢印が表示されます。

macOS のショートカットに注意

マスクのショートカットは macOS が Ctrl + Cmd + M です。Cmd + Alt + M と誤って覚えていると別の動作になってしまうので注意してください（Windows は Ctrl + Alt + M）。

🎚️ マスクの種類 — アルファ・ベクター・ルミナンス

Figma のマスクには 3 つの種類 があり、マスクにするレイヤーの「何を基準に表示・非表示を決めるか」が変わります。作成直後はアルファ（既定）になっています。

種類を切り替えるには、マスクに使っているレイヤーを選択し、右サイドバーの「マスク」（Mask）セクションのドロップダウンから選びます。各オプションにマウスを乗せると、キャンバス上で結果をプレビューできます。

種類	表示の基準	向いている用途
アルファ（既定）	マスクの透明度（不透明度・透過 PNG・ぼかし）	図形での切り抜き全般、半透明をいかしたフェード
ベクター	塗り/線の輪郭（半透明は無視）	不透明度を持つ図形でも、形だけをはっきり切り抜きたいとき
ルミナンス	明るさ（明るいほど表示・暗いほど隠す）	グラデーションで徐々に消すフェード、質感のある効果

迷ったら、まずは既定のアルファのまま使えば、図形での切り抜きはほぼ問題ありません。グラデーションでなめらかに消したいときにルミナンス、半透明の図形でも輪郭だけをくっきり使いたいときにベクター、と覚えておけば十分です。

🖼️ 画像・テキスト・グループをマスクにする

マスクにできるのは図形だけではありません。Figma では 任意のレイヤー をマスクにできます。具体的には、ベクター図形・テキストレイヤー・透過チャンネルを持つ画像・グループ などです。

テキストマスク。 文字の形に画像を流し込む表現は、テキストレイヤーをマスクにして実現します。大きな見出し文字の中に風景写真を覗かせる、といったデザインが定番です。テキストを画像の下に置き、両方を選んで「マスクとして使用」するだけです。
画像をマスクにする。 透過 PNG など透明部分を持つ画像をマスクにすると、その不透明な部分だけ上のレイヤーが見えます。
グループをマスクにする。 複数の図形をグループ化し、それをマスクにすれば、複雑な形での切り抜きもできます。

🚀 XD のマスク・クリッピングを保ったまま Figma へ — Pixel Fine Converter

XD で作ったマスクや透過画像を Figma の構造に変換。Free 版でご自身のファイルの再現度を確かめてから判断できます。

✂️ マスクを解除・編集する

マスクは、いつでも解除して元の独立したレイヤーに戻せます。

解除する。 マスクを選択し、右クリック →「マスクを削除」（Remove mask） を選ぶか、右サイドバーの解除ボタン、または作成時と同じショートカットで解除できます。図形と画像が元の独立したレイヤーに戻ります。
形を編集する。 マスクグループの中でマスク図形を選べば、サイズや形を後から調整できます。マスクとマスクされるレイヤーはそれぞれ独立して移動・リサイズできるので、画像の位置はそのままに、切り抜く形だけを動かす、といった調整が可能です。

🗺️ マスク・Crop・Clip content の使い分け

「画像を切り抜きたい」と思ったとき、Figma には似て非なる 3 つの方法があります。目的に応じて使い分けましょう。

やりたいこと	使う機能	ポイント
円・星・任意の形で切り抜く	マスク	下に置いた形で覗き窓を作る（本記事）
四角くトリミングする	Crop モード	画像をダブルクリックして表示範囲を変える
フレームのはみ出しを隠す	Clip content	フレームの設定で枠外を非表示にする

四角いトリミング（Crop モード）やフレームのはみ出しを隠す Clip content の詳しい手順は、Figma で画像を切り抜き・トリミングする方法にまとめています。「被写体だけ残して背景を消したい」場合はマスクではなく背景削除の領域なので、Figma で画像を背景透過する方法を参照してください。

🔧 マスクがうまくいかないとき

画像が消えてしまう / 真っ白になる。 マスクにする図形と画像の並び順が逆になっている可能性があります。マスクは選択範囲の一番下のレイヤーが担当します。図形を画像より下に置いてから適用し直してください。
マスクを動かしたら画像がついてこない（またはその逆）。 これは仕様です。マスクとマスクされるレイヤーは独立して動くため、まとめて動かしたいときはマスクグループごと選択して移動します。
思った範囲が表示されない。 マスクの種類が意図と違うことがあります。たとえばグラデーションのある図形をマスクにすると、既定のアルファでは半透明部分も反映されます。輪郭だけで切りたいならベクターに切り替えましょう（マスクの種類を参照）。

🔄 XD から移行したマスクが崩れるとき

Adobe XD や Illustrator で作ったクリッピングマスクを Figma に持ち込むと、マスクの構造が崩れて画像が切り抜かれない / 余計な部分まで見えてしまうことがあります。これは、ツールごとにマスクの内部表現が異なり、単純なコピー&ペーストや汎用の変換では対応関係が保たれないためです。

XD のデザインを Figma へ移行する場面では、マスクや透過画像の構造をできるだけ保ったまま変換できる専用ツールを使うと、作り直しの手間を減らせます。Pixel Fine Converter は XD ファイルを読み込み、マスクや透過を Figma のマスク構造に対応づけて変換します。Free 版で、自分のファイルがどこまで再現できるかを先に確かめられます。

🚀 XD → Figma の移行でマスクの作り直しを減らす — Pixel Fine Converter

XD のマスク・透過・クリッピングを Figma の構造へ。まず Free 版で再現度を確認してから判断できます。

❓ よくある質問

Q: Figma に Illustrator のような「クリッピングマスク」はありますか？

はい。Illustrator や XD でいうクリッピングマスクは、Figma では単に「マスク」と呼びます。下に置いた形の範囲だけ上のレイヤーを見せる仕組みで、操作の考え方は同じです。

Q: マスクのショートカットは何ですか？

macOS は ⌃ Control + ⌘ Command + M、Windows は Ctrl + Alt + M です。マスクの作成・解除のどちらにも使えます。

Q: テキストの形に画像を入れられますか？

できます。テキストレイヤーをマスクにし、その上に画像を置いて「マスクとして使用」すれば、文字の形に画像が流し込まれます。

Q: マスクを解除すると画像は元に戻りますか？

はい。「マスクを削除」（Remove mask）を実行すると、マスク図形とマスクされていたレイヤーが、それぞれ独立した元のレイヤーに戻ります。

まとめ

Figma のマスクは、選択範囲の一番下に置いた形で覗き窓を作る仕組みです。基本の図形マスクを押さえたら、アルファ・ベクター・ルミナンスの 3 種類を用途で使い分け、テキストやグループをマスクにする応用へと広げていけます。四角いトリミングは Crop、はみ出しを隠すなら Clip content、と役割を切り分ければ、切り抜き系の操作で迷いにくくなります。

XD や Illustrator から移行したマスクが崩れるときは、構造を保ったまま変換できる専用ツールを使うのが近道です。Pixel Fine Converter の Free 版で、まずはご自身のファイルの再現度を確かめてみてください。

🚀 Pixel Fine Converter を Figma Community からインストール

Figma Communityから1クリックで追加できます