FigmaのEffect〜FrameとObjectでエフェクト効果が違う件〜Spreadの罠

Figmaには色やテキストをデザインシステムとしてファイルごとに登録できる便利な機能があります。

ガイドやEffectsも登録できるのがありがたい！

例えばホバーした時の影をEffects Stylesに登録しておけば

このように一発でホバー状態を表現できます。

が、

この機能を使い出してハマったことがあるのでここで紹介しようと思います。

このように、登録している同じEffect Stylesをかけても明らかに濃度が違うものができてしましました。

ちなみに左はFrameに直接Effectを適応したもの。右はObjectに適応したもので、一見見た目は同じですが、適応している場所が違います。

最初はFrameとObjectで効果が変わるのか、、？と思っていましたが、調べていくとそうではないようです。

濃度の違いはEffectsの中にあるSpreadが有効か無効になっているかによるものでした。

これは通常時のEffectsの効果の設定内容

そして、薄くなってしまっているFrameにかけられているEffectsの設定はこちら

薄くなってしまった方にはSpreadの項目が無効(Disable)状態になってしまっています。

グレーアウトしたところにマウスを合わせると下記のTipsが表示されます。

"only supported for frames or components with visible fill paints"
塗りつぶしペイントが表示されているフレームまたはコンポーネントでのみサポートされます

これだけだとよくわからなかったのですが、他のデザイナーにも相談したところ原因が明確になり、FrameでもObjectでも同様にSpreadを有効にして使えることができました。（Oさんありがとう！）

方法は思ったより簡単で、Clip contentsをONにすること。

上の画像であるように、Spreadが無効になっているFrameはClip contentsのチェックが外れています。

Clip contentsをONにすると一見、見た目はかわらないのですが、Effectsの設定内を確認するとSpreadが有効になっています。

ここでSpreadを規定値にしてあげれば、無事FrameにもObjectsにも同じエフェクトを適応させることができました。

一点注意が必要なのは、登録済みのEffects Stylesを適応させていたとしても、Clip contentsのチェックが外れていた場合、

「あれ、薄いな、、Clip contentsをONにしなければ」

と、ONにしても正常なSpreadは反映されていません。（※Spreadは有効になっているが「0」が入力された状態になっている）

この場合、再度 Effectsをかけ直す必要があります。

以上、ちょっとハマってしまったFigmaのEffects、Spreadについてでした。