Figmaで様々なドロップシャドウ（影）を適用する方法

今回はFigmaで図形オブジェクトやパスに影（ドロップシャドウ、インナーシャドウ）をつける方法を紹介します。WebページのUIを作る上でマウスオーバー（hover）した時のボタンに影をつけたり、グラフィック上の効果をつけたいときによく使う方法になります。

この記事のターゲット

• Figmaの初心者

• バナー画像などのグラフィックで、影や光彩などの効果をつけたい方

• FigmaでボタンやポップアップなどのUIに影をつけたい方

1. 図形の外側に影をつける

Figmaでは、標準でオブジェクトに影（ドロップシャドウ・インナーシャドウ）をつけ流ことができます。

ドロップシャドウを編集する方法は以下の通りです。

1. 影をつけたいオブジェクトを選択する

2. 右プロパティの「Effect」で「＋」をクリックする

3. 追加された「Drop shadow」の左側の「☀️」をクリック

4. ポップアップの数値を変更して影のスタイルを調節する

Drop shadowで設定できるオプションは次の通りです。

• X：横軸方向のオフセット（横に影をずらす大きさ）

• Y：縦方向のオフセット（縦に影をずらす大きさ）

• Blur：影のぼかし具合（値が大きいほど影の境界がぼける）

• Spread：影の広がり具合（値が大きいほど影が大きくなる。円、四角、Frame、Componentのみ適用できる）

• 色：影の色と透過度

このオプションを活用して、さまざまなスタイルの影を作ることができます。

• 左：XとYを「0」にしてBlurを「100」にして色を透過した青色にすると、ぼんやり光って見える光彩のような表現になる

• 中央：XとYを「0」にしてSpreadを「16」にすると、16pxの枠線をつけたような表現になる

• 右：XとYとBlurを「32」にして色を透過したグレーにすると、浮かせた影のような表現になる

2. 図形の内側に影をつける（インナーシャドウ）

インナーシャドウの編集方法も、基本的にドロップシャドウと同じです。Effectを選択する際に「Inner shadow」を選択すると適用されます。オプションもドロップシャドウと同様に設定できます。

参考まで、上のドロップシャドウで適用したスタイルを「Inner shadow」で適用すると以下のようになります。

いかがでしょうか。とても簡単にさまざまな効果をもつ影をつけることができ、これらの影を複数組み合わせて適用することもできますので、活用してみてください。

以下はこの記事を読んだ方におすすめの記事です。

Figmaで画像を○や□などの好きな形に切り抜く方法

Figmaで画像をトリミングしたり、好きな形にくり抜く方法の紹介です。アプリのユーザーアイコンをデザインする際に円形にくり抜いたり、WEBやスライド資料などに差し込む画像の加工などに便利です。 ... 続きを読む

Figmaで簡単にスマホやPCのモックアップに画像をはめ込む方法

今回は、Figmaのプラグイン「Mockup」を使って、スマートフォンやPCなどのデバイスの画面に、スクリーンショットなどの画像を簡単にはめ込む方法を紹介します。 はめ込みたいデバイスの画面が斜めになっている場合でも対応できますので、サービス紹介用の素材作りにおすすめです。 ... 続きを読む

Figmaで簡単にテキストや図形を斜めに変形する方法

今回は、Figmaで簡単にテキストや図形オブジェクトを斜め方向に変形させることができるプラグイン「SkewDat」を紹介します。オブジェクトを斜め方向に変形させることで、奥行きを出したり躍動感を表現できます。 ... 続きを読む

Figmaで簡単にコンテンツマーケティング用のバナー画像を作ってみよう

今回は、商品紹介やイベントの告知など、顧客にリーチするためのコンテンツマーケティングで利用するベーシックなバナー画像（ヘッダー画像）を、Figmaを使って作ってみようという試みになります。 ... 続きを読む