はじめに

この機能を使用できるユーザー

すべてのチームまたはプランでサポートされます。

Figmaデザインファイルに編集可アクセス権があるユーザーは、エフェクトを作成して調整することができます。

シャドウエフェクトとぼかし範囲エフェクトはさまざまな審美上機能上の目的のために使われています。たとえば、ボタンにシャドウを加えることで注目が集められます、またその要素がインタラクティブであるということを知らせることができます。

Figmaには4種類のエフェクトがあります。

• ドロップシャドウ
• インナーシャドウ
• レイヤーブラー
• 背景ぼかし範囲

Figmaでは、1つのレイヤーに、最大8つまでのドロップシャドウ、8つまでのインナーシャドウ、1つまでのレイヤーブラー、および1つまでの背景ぼかし範囲を追加できます。

また、シャドウやぼかし範囲をブレンドモードやペイントフィルと組み合わせて、さまざまなスタイルやエフェクトを作成することもできます。

一時的にパフォーマンスを向上させるために、個々のエフェクトの可視性を切り替えることができます。また、レイヤーを恒久的にラスタライズし、レンダリング時間を短縮することもできます。

レイヤーのラスタライズは不可逆的で損失の多いプロセスです。つまり、変換中にベクターデータの一部が失われます。

シャドウエフェクト

Figmaのシャドウエフェクトには、ドロップシャドウとインナーシャドウの2種類があります。

ドロップシャドウ

ドロップシャドウは、デザインに奥行きと立体感を加えるのに最適な方法です。オブジェクトの背後にオブジェクトのシャドウを作成します。

ドロップシャドウは、作成するエフェクトに応じて不透明度を変えることができます。

ドロップシャドウは次のような用途に使用できます。

• オブジェクト間の距離を作る
• 光源の方向を設定する
• デザインを背景に対して目立たせる
• オブジェクトを立体的に見せる
• テキストとアイコンを様式化する
• レイヤーまたはオブジェクトの周囲にボーダーを追加する

インナーシャドウ

ドロップシャドウと同様、インナーシャドウでも2次元デザイン内に奥行きを作ることができます。

選択範囲の後ろにシャドウを作る代わりに、レイヤーまたはオブジェクトの中側にインナーシャドウを作ります。レイヤーの境界内のシャドウも同じです。

インナーシャドウは次のような用途に使用できます。

• テキストに奥行きを作る
• オブジェクトがへこんだりジグザグに見えるようにする
• ボタンのアクティブ状態またはクリックされた状態を示す

透明なレイヤーを通したドロップシャドウの表示

デフォルトでは、レイヤーの透明エリアを通してドロップシャドウは表示されません。オブジェクトを通してドロップシャドウを表示する場合は:

1. レイヤーが次の基準の少なくとも1つを満たしていることを確認してください。
   • 不透明度が100%未満の塗りつぶしのみがある
   • 線あり、塗りなし
   • 標準以外のブレンドモードの塗りまたは線がある
   • 不透明度100%未満の中央または外側の線がある
2. シャドウのプロパティメニューを開くには、エフェクトアイコンをクリックします。
3. [透過領域の下に表示]チェックボックスにチェックを入れます。

シャドウの広がり

シャドウの広がりは、長方形、楕円、フレーム、コンポーネントでのみサポートされます。

スプレッドシャドウをフレームまたはコンポーネントに適用するには、次の条件を満たしている必要があります。

• [コンテンツを隠す]が有効になっている
• 少なくとも不透明度1%を持つ可視塗り

シャドウエフェクトの追加

フレーム、グループ、コンポーネント、または個々のレイヤーにシャドウエフェクトを適用できます。

1. キャンバスまたは左サイドバーの[レイヤー]タブからレイヤーまたはオブジェクトを選択します。
2. 右サイドバーの[エフェクト]セクションをクリックします。デフォルトでは、[ドロップシャドウ]エフェクトが選択されています。ドロップダウンで[インナーシャドウ]に切り替えます。
3. [エフェクト設定]アイコンをクリックしてシャドウの設定を調整します。
   • X: X軸(水平)に沿ってドロップシャドウをオフセットします。Yオフセットと併せて使用して、光源の方向を設定します。
   • Y: Y軸(垂直)に沿ってドロップシャドウをオフセットします。Xオフセットと併せて使用して、光源の方向を設定します。
   • 塗り: カラーピッカーを使用してペイントを適用し、シャドウの不透明度を設定します。
   • ぼかし範囲: シャドウのぼかし範囲やフェザリングを調整します。ぼかし範囲を大きくすると、シャドウが柔らかくなり背景とブレンドします。 ぼかし範囲を小さくすると、よりシャープなコントラストができます。
   • 広がり: 前景オブジェクトと背景オブジェクトの間の距離を表すシャドウのサイズを調整します。[シャドウの広がり]を参照してください。

ぼかし範囲エフェクト

レイヤーブラー

ぼかし範囲は、アクションや動きを暗示したり、2次元デザインに奥行きの錯覚を作り出したりするのに役立ちます。レイヤーブラーは次のような用途に使用できます。

• 情報を匿名にする
• 背景を和らげたり、焦点をぼかしたりする
• 写真や画像から抽象的な背景を作成する
• カメラの深度やボケなどの写真エフェクトを再現する

背景ぼかし範囲

レイヤーに背景ぼかし範囲を適用すると、キャンバスの選択範囲の背後にあるレイヤーがぼかされます。これはドロップシャドウのように見えますが、レイヤーにシャドウが作成されたのではなく、ぼかし範囲が作成されています。

背景ぼかし範囲を使用すると、焦点を和らげたり、ぼかしたりすることができます。これにより、背景から注目を離し、選択したレイヤーに注目を集めます。

背景ぼかし範囲は、iOSのインタラクティブメニューに一般的に使われています。しかし、背景ぼかし範囲を使って、スクリーンショットのテキストや個人情報を見えなくすることもできます。

背景ぼかし範囲を表示するには、選択範囲に適切な不透明度が必要です。背景ぼかし範囲を含むレイヤーの不透明度は0.10 ～ 99.99%の任意の値に設定できます。

望ましいエフェクトを得るには、レイヤーの不透明度の調整が必要な場合があります。レイヤーの不透明度を100%に設定すると、背景ぼかし範囲がまったく見えなくなります。

ぼかし範囲エフェクトの適用

ぼかし範囲エフェクトは、フレーム、グループ、コンポーネント、個々のレイヤーに適用できます。レイヤーまたはオブジェクトに追加できるレイヤーまたは背景ぼかし範囲は1つだけです。

1. キャンバスまたは左サイドバーの[レイヤー]タブで、レイヤーまたはオブジェクトを選択します。
2. 右サイドバーの[エフェクト]セクションをクリックします。デフォルトでは、[ドロップシャドウ]エフェクトが選択されています。ドロップダウンで[レイヤーブラー]または[背景] [ぼかし範囲]に切り替えます。
3. [エフェクト設定]アイコンをクリックして、ぼかし範囲の値を調整します。
4. 必要に応じて、レイヤーの不透明度を調整します。

シャドウやぼかし範囲エフェクトのスタイルを作成することもできます。これにより、これらの設定を保存し、デザインファイル全体で使用できるようになります。詳細については、エフェクトスタイルの作成 →

レンダリング順序

右サイドバーの[エフェクト]セクションの上に新しいエフェクトが追加されていく予定です。エフェクトの順序を変更することはできないため、表示したい順序でエフェクトを追加することをお勧めします。

エフェクトがレンダリングされる順序は、選択範囲がレイヤーかグループかによって異なります。この文脈においては、マスクはグループとみなされます。

グループシャドウとレイヤーシャドウの違いは、重なっているレイヤーで最も顕著に現れます。シェイプが重なっていない場合は、同じように見えます。

レイヤ―

1. レイヤーブラー(上)
2. 線のペイント
3. インナーシャドウ
4. 塗りのペイント
5. ドロップシャドウ
6. 背景ぼかし範囲(下)

グループ

1. レイヤーブラー(上)
2. インナーシャドウ
3. 個々の塗りや線に対するペイント、マスク、エフェクト
4. ドロップシャドウ
5. 背景ぼかし範囲(下)