![figma-musk-basic](/wp-content/uploads/figma-musk-basic.jpg)
Figmaで画像を好きな形に切り取るには「マスク」という機能を使います。
「マスク」は、厳密には "切り取る" のとは違います。特定のレイヤーに対して「可視範囲を限定する」という言い方のほうが理解しやすいかもしれません。
イメージは以下のような感じです。
![figma-musk-basic](/wp-content/uploads/xd-masking_1.jpg)
今回はFigmaにおける「マスク機能」の使い方をご紹介します。手順が二通りありますので、それぞれの方法を図解していきますね。
方法1:図形と画像レイヤーを両方選択してマスクする
図形ツールを使って、切り抜きたい形の図形をつくります。今回はシンプルに四角にしますね。
![figma-musk-basic_1](/wp-content/uploads/figma-musk-basic_1.jpg)
step
1
作成した図形を、画像の背面に移動させます。画像が上に来て、図形が隠れる形になりますね。
![figma-musk-basic_2](/wp-content/uploads/figma-musk-basic_2.jpg)
step
2
図形と画像、両方を選択した状態で、画面上にある半月型のアイコンをクリックします。
![figma-musk-basic_3](/wp-content/uploads/figma-musk-basic_3.jpg)
すると、作成した形に画像が切り抜かれます。
![figma-musk-basic_4](/wp-content/uploads/figma-musk-basic_4.jpg)
step
3
方法2:先に図形をマスク化して、画像レイヤーを上に乗せる
先ほどと同じように、切り抜きたい形の図形を作成します。
![figma-musk-basic_5](/wp-content/uploads/figma-musk-basic_5.jpg)
step
1
図形を選択して、画面上の半月型のアイコンをクリックします。
![figma-musk-basic_6](/wp-content/uploads/figma-musk-basic_6.jpg)
すると左のレイヤー構造が変わり、マスクする図形がグループ化されたかと思います。
![figma-musk-basic_7](/wp-content/uploads/figma-musk-basic_7.jpg)
step
2
最後に、画像レイヤーを図形レイヤーの上に乗せるように移動させます。
![figma-musk-basic_9](/wp-content/uploads/figma-musk-basic_9.jpg)
すると、作成した図形の形で画像を切り抜くことができます。
![figma-musk-basic_8](/wp-content/uploads/figma-musk-basic_8.jpg)
step
3