今回は、Figmaのマスク機能について詳しく解説します。Figmaのマスク機能とは、文字、図形、写真などのオブジェクトを特定の形に切り抜くための機能を指します。マスク機能を活用することで、よりデザインの幅が広がりますので、ぜひ使いこなしてみて下さい。

Figmaのマスク機能とは？

Figmaのマスク機能とは、文字、図形、写真などのオブジェクトを特定の形に切り抜くための機能を指します。以下の画像は、マスク機能を利用して画像を切り抜いた例です。マスク機能に慣れると、画像の切り抜き作業が非常に容易になりますので、ぜひマスターしてみてください。

Figmaのマスク機能の使い方

マスクを作成する方法

今回は、SNSでよく使用される丸いプロフィール画像アイコンの作成を例に、マスク機能の使い方を説明します。まず、切り抜きたい形状のオブジェクト（この場合、円）と、切り抜き対象のオブジェクト（人物画像）を準備します。

次に、2つのオブジェクトを重ねます。マスクに使用するオブジェクトを下に配置し、その上に切り抜き対象のオブジェクトを置きます。その状態で両方を選択し、画面上部の三日月マークをクリックします。すると、人物の画像を円形に切り抜くことができます。

円形のレイヤーを下層に持っていく操作は、ショートカットキー（Shift ⇧+ Command⌘ + [）を使用しています。

また、マスク機能は、グループ化されたオブジェクトに対しても適用することができます。その際、グループ内の子要素のサイズや位置は、マスクを適用した後でも自由に変更することができます。

マスクを解除する方法

マスクを解除する際は、左のレイヤーパネルで三日月マークがついているオブジェクトを選択した状態で、上部バーの三日月マークをクリックします。

【実践編】マスク機能を使ってできること

ここまで、Figmaのマスク機能の基本的な使い方をご紹介しました。次に、具体的にマスク機能を用いて何ができるのか、その一例を紹介します。

マスク機能を使ってテキストに画像を当てる方法

テキストに画像の模様を当てたいときも、マスク機能を使用することで実現できます。まず、テキストに模様として表示させたい画像素材とテキストを用意します。テキストを下のレイヤーに配置し、その上に画像を重ねてマスクを作成します。すると、画像がテキスト形状で切り抜かれ、テキストに画像の模様が当てられます。

マスク機能を使って画像の色を変える方法

例えば、弊社のロゴマークは単色で構成されているため、単色オブジェクトに対して、ロゴ画像をマスクすることで、ロゴの色を変えることができます。

※ マスクする画像（この場合、ロゴの素材）が透過背景でなければ、ロゴの形に沿って色を変えることはできませんのでご注意ください。

まとめ

今回は、Figmaのマスク機能について解説しました。マスク機能を利用することで、画像の切り抜きなどをスムーズに行うことができますので、是非マスターしてみてください。