見出し画像

Figmaのエフェクト効果

こんにちは!
fork_494です。

今回はFigmaでつくれる簡単なエフェクトの効果についてまとめました。


エフェクトの効果について

エフェクト効果を付けたいレイヤーを選択して
Effectsの「+」をクリックするとInner shadow、Drop shadow、Layer blur 、Background blurの4つを選ぶことができます。

画像4


Inner shadow、Drop shadow、Layer blurについて

各効果は下記のとおり、
Inner shadowはレイヤー内にシャドウをつける効果。
Drop shadowはレイヤー外にシャドウをつける効果。
Layer blurはレイヤーをぼかすことができます。

画像4

※シャドウの位置調整はPhotoshopでは角度を変更orレイヤー上で影をつかんで位置を調整しますが、FigmaではX軸とY軸欄に数値を入力して調整します。
(X=横軸 Y=縦軸 Blur=ぼかし Spread=広がり)


Background blurについて

下記は同じ円(透過40%)を写真の上に載せています。
左側は効果無しの円で、右側がBackground blurの効果を付けた円になります。背景をぼかして透過する効果を付けることができます。

画像4


+で効果を追加する

Effectsの「+」をもう一度選択すると先に付けた効果に加え、
効果を追加し組み合わせることも可能です。

画像4


最後に

同じエフェクトを他のレイヤーにコピーする方法は、
Effects内にある☀︎(太陽のようなマーク)の上でコピー【command + C 】をして同じエフェクトをかけたいレイヤーを選択し、ペースト【command + V 】をすることでできます。
Figmaでできることをまとめて今後も日々慣れて使いこなせるようになりたいと思います。

読んでいただきありがとうございました。

この記事が気に入ったらサポートをしてみませんか?