UI/UXデザインツール『Figma』入門

3-6. オブジェクトのマスク

  • UIデザイン
  • UXデザイン
  • プロトタイピング

オブジェクトのシェイプの形状に合わせて、選択したオブジェクトを切り抜くことが出来る機能です。このレッスンではマスクの操作方法について解説します。

公開日:2019/08/14最終更新日:2021/07/30

1.シェイプを使用したマスクの適応

ショートカットキー : ^ + Command + M

マスクは背面のレイヤーの形に前面のレイヤーを切り取る事ができます。

複数のオブジェクトを選択した状態で図1ツールバーの赤枠をクリックすると、マスクが適用されます。

図1 Use as Mask

マスクを適応させると図2のようになります。

図2 マスクを適応

また複数のオブジェクトを選択しない状態で、単体のオブジェクトにマスクを適応した場合は、そのレイヤーより前面にある全てのオブジェクトが切り抜かれます。図3はすべてのオブジェクトにマスクを適応したものです。

図3 マスクを適応2

※Figmaのマスク適応後のレイヤーリストはSketchと逆の表示になっているため注意しましょう。

図4 SketchとFigmaの比較

2.画像単体にマスクを適応する

画像にマスクを適応させるには、背面レイヤーに切り抜きたい大きさのシェイプを配置し、前面レイヤーに切り抜きたい画像を配置しマスクを適応すると、図5のように画像を切り抜くことが出来ます。

図5 画像にマスクを適応

理解度チェック





UI/UXデザインツール『Figma』入門

1. Figmaの概要とインストール

2.Figmaの基本操作

3.ツールバーの操作

4. プロパティパネルの操作

5. プロトタイピング

6. 共有とバージョン管理

7. 料理写真投稿アプリを作ってみよう



このレッスンの著者