Figmaでマスクを適用・解除する方法

今回はFigmaでマスクを適用・解除する方法を解説します。Figmaのマスクは、Adobe Illustratorのクリッピングマスクのように、画像やベクターデータを組み合わせたオブジェクトをマスクで任意の形に切り抜くことができる機能になります。

この記事では、マスクを使った方法のほか、マスクを使用せずに切り抜く方法などもおまけで紹介していますので、参考にしてみてください。

2023年3月に公開されたアップデートで、輝度（ルミナンス）などを利用したマスクの機能も利用できるようになりました。以下の記事の２つ目で紹介していますので、併￥あわせて参考にしてみてください。

Figmaの「Little Big Updates」で公開された32の機能（2023年3月）

今回は、2023年3月29日にFigmaから公開された「Little Big Updates」で紹介された32の機能について、公式ツイートやリリースノートからかいつまんで解説します。 ... 続きを読む

この記事のターゲット

• Figmaの初心者

• Figmaでクリッピングマスクを使い方が知りたい方

• Figmaで画像やオブジェクトを好きな形にくりぬきたい方

画像やオブジェクトにマスクを適用する方法

マスクを使用してイメージを好きな形に切り抜く手順を、デモしながら説明してみようと思います。

マスクをする前に、マスクを適用したい素材を用意します。

今回は、Unsplashで見つけたネコの画像、円形シェイプ（Ellipse）、背景用のシェイプ（Rectangle）を組み合わせたグラフィックを用意してみました。

用意できたら、オブジェクトを全て選択してグループ化しておきましょう。

グループ化は、オブジェクトを全て選択した状態で「command + Gキー」を押すと「Group」という人まとまりのオブジェクトになります。

これらの素材には、以下の記事で紹介している方法で加工を追加しています。よかったら参考にしてください。

Figmaで画像の色をセピアや単色のモノクロに変換する方法

今回は、SNSやブログなどで使用するバナー画像にすぐ使える、モノクロ画像をFigmaで簡単に作成する方法をまとめました。 ... 続きを読む

Figmaでオブジェクトや画像にぼかしを入れる方法

今回は、Figmaでオブジェクトや画像をぼかす「Layer blur」機能を使って、グラフィック作成に活用できる便利なテクニックをいくつかご紹介します。プラグインと組み合わせると、Photoshopを使ったような高度なグラフィックも制作できますので、覚えておいて損はないです。 ... 続きを読む

Figmaで図形やテキストのべた塗りとグラデーションの使用方法

Figmaで図形やテキストなどのオブジェクトにベタ塗りや様々な種類のグラデーションを適用する方法を紹介します。 ... 続きを読む

さて、ここからマスクを使用して切り抜く手順になります。

まず、マスクしたい形状のシェイプを用意して、切り取りたい位置とサイズに重ねます。今回はシンプルに円形にしました。

次に、マスクしたいシェイプを選択した状態で、上のツールバーの半月のようなアイコンをクリックします。

すると、左のレイヤーメニューを見るとわかる通り、シェイプが以下のようなグループ構造になります。

• Mask Group

  • Ellipse（円形シェイプのマスク）

マスク化されたオブジェクトは、同じ階層のグループ内にでのみ適用されるという特徴があります。マスクを作ると、そのマスクを限られた範囲で適用するために「Mask Group」というグループが自動で生成されるようです。

マスク化されたオブジェクトがある状態でMask Groupを解除してしまうと、ファイル内全体に対して適用するマスクとなるので、マスクと重なっていないオブジェクトが見えなくなったりする原因にもなります。

マスク化されたオブジェクトは必ずグループの中に入れるようにしましょう。

この状態で、前もって用意しておいた素材のGroupを、以下のようにレイヤー内でドラッグして配置します。

• Mask Group

  • Group（素材）

  • Ellipse（円形シェイプのマスク）

これで、円形シェイプの形にマスクすることができました。

他にも、四角形、星形、複合パスなど、好きな形のシェイプも使えるので試してみてください。

四角形の例

マスクをした後で、素材を調整することもできます。

マスク化したオブジェクト自体を編集することもできます。

今回は以下の方法で角丸を適用してみました。

Figmaで角丸を使った便利なテクニック集

今回は、Figmaでシェイプやパスに角丸を適用するテクニックを紹介します。シェイプに角丸を適用することで、丸っこいUIやグラフィックを実現できるため、柔らかさ・滑らかさを演出することに役立ちます。 ... 続きを読む

複合パス（三日月）の例

円形シェイプを組み合わせて複合パスを作ることで、三日月シェイプを作り、そのままマスクすることもできます。

マスクを解除する方法

マスクを作成できたところで、解除する方法も紹介します。

マスク化されたオブジェクトは、選択しているようで再度半月アイコンをクリックすると解除できます。

マスクが解除されたら、Mask Groupも不要となりますので、解除しておきましょう。

マスクを使用せずに画像を切り抜く方法

おまけで、マスクを使用しない方法を記事形式で紹介していますので、参考にしてみてください。

シェイプに対して、画像をFillとして適用する

Figmaで画像を○や□などの好きな形に切り抜く方法

Figmaで画像をトリミングしたり、好きな形にくり抜く方法の紹介です。アプリのユーザーアイコンをデザインする際に円形にくり抜いたり、WEBやスライド資料などに差し込む画像の加工などに便利です。 ... 続きを読む

スマホやPCの画面に画像をはめ込む

Figmaで簡単にスマホやPCのモックアップに画像をはめ込む方法

今回は、Figmaのプラグイン「Mockup」を使って、スマートフォンやPCなどのデバイスの画面に、スクリーンショットなどの画像を簡単にはめ込む方法を紹介します。 はめ込みたいデバイスの画面が斜めになっている場合でも対応できますので、サービス紹介用の素材作りにおすすめです。 ... 続きを読む