Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
学ぶ Figmaでのマスクの使用:高度なビジュアルのためのクリッピングとレイヤリング | Figma基本ツール
FigmaによるUI/UXデザイン

bookFigmaでのマスクの使用:高度なビジュアルのためのクリッピングとレイヤリング

メニューを表示するにはスワイプしてください

Figmaのマスクは、レイヤーやオブジェクトの特定部分のみを表示し、それ以外を隠すために使用。

仕組み:

  • オブジェクト(例:画像)とマスク形状(例:楕円)を一緒に配置し、マスク形状をオブジェクトの背面に配置;
  • 両方のレイヤーを選択し、右クリックしてマスクとして使用を選択、またはショートカットCtrl+Alt+M(Windows)/Command+Option+M(Mac)を使用。マスクのベースは不可視となり、その上のレイヤーの選択部分のみが表示;
  • テキストでもマスキング可能。テキストを画像の背面に配置し、マスクとして使用することで、クリエイティブなテキスト効果を作成。マスク内のレイヤーは個別にリサイズやスケールが可能;
  • 複数オブジェクトをマスクする場合、マスクのベース形状は不可視。マスクデザインに背景を追加したい場合は、新しい形状を作成し、マスクベースの背面に配置;
  • 透過PNGもマスクとして利用可能。PNGで形状をマスクし、複雑なデザインを作成。

マスクは一般的に画像塗りつぶしより柔軟性が高く、複数オブジェクトを組み合わせて複雑なデザインが可能。Figmaの形状やツールは比較的少ないが、必要な要素は揃っており、これらのシンプルな要素で優れたデザインを作成可能。

question mark

透過PNGをマスクとして使用する場合、マスクの形状を決定するのは何ですか?

正しい答えを選んでください

すべて明確でしたか?

どのように改善できますか?

フィードバックありがとうございます!

セクション 1.  16

AIに質問する

expand

AIに質問する

ChatGPT

何でも質問するか、提案された質問の1つを試してチャットを始めてください

セクション 1.  16
some-alt