UI/UXデザインツール『Figma』入門

4-6. オブジェクトにエフェクトをつける

  • UIデザイン
  • UXデザイン
  • プロトタイピング
  • Webデザイン

カードUI・ボタン・背景などによく使われる「ドロップシャドウ」や「ぼかし」などの、オブジェクトに対して様々なエフェクトをつける方法を解説します。

公開日:2019/08/23最終更新日:2021/08/23

1.オブジェクトにエフェクトをかける

オブジェクトにエフェクトをかけるには、オブジェクトを選択し、プロパティパネル右にある「Effects」の下にあるプルダウンメニューから、選択したいエフェクトを選択します。

図1 エフェクト

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

  • Inner Shadow
  • Drop Shadow
  • Laver Blur
  • Background Blur
図2 エフェクト一覧

2.オブジェクトの内側に影をつける(インナーシャドウ)

Effects」、プルダウンメニューから「Inner Shadow」を選択することで、オブジェクトの内側に影をつけることが出来ます。

以下のようなパラメーター項目があります。

  • 水滴のアイコン 描画モード
  • Blur ぼかしの強さ
  • X 影のX座標
  • Y 影のY座標
  • Spread 影の広がり具合
  • カラーコードとカラーピッカー 色の変更
  • % 透明度の変更
図3 インナーシャドウ設定

インナーシャドウの使用例は図4を参照してください。

図4 インナーシャドウ使用例

3.オブジェクトの外側に影をつける(ドロップシャドウ)

Effects」、プルダウンメニューから「Drop Shadow」を選択します。

パラメータは以下の設定があります。

  • 水滴のアイコン 描画モード
  • Blur ぼかしの強さ
  • X 影のX座標
  • Y 影のY座標
  • Spread 影の広がり具合
  • カラーコードとカラーピッカー 色の変更
  • % 透明度の変更
図5 ドロップシャドウ設定

 ドロップシャドウの使用例は図6を参照してください。

図6 ドロップシャドウ使用例

4.オブジェクトをぼかす

Effects」、プルダウンメニューから「Layer Blur」を選択します。
レイヤーブラーは全方向にぼかす一般的なブラーです。

パラメータは以下の設定があります。

  • Blur ぼかしの強さ
図7 レイヤーブラー設定

レイヤーブラー使用例は図8を参照してください。

図8 レイヤーブラー使用例

5.オブジェクトの背面レイヤーをぼかす

Effects」、プルダウンメニューから「Background Blur」を選択します。
バックグランドブラーは、オブジェクトそのものではなく、背面レイヤーをぼかすためのブラーです。
使用する際は、Fillの透明度を100%以下にする必要があります。

パラメータは以下の設定があります。

  • Blur ぼかしの強さ
図9 バックグランドブラー設定

Background Blurの使用例は図10を参照してください。

図10 バックグランドブラー使用例

 

理解度チェック





UI/UXデザインツール『Figma』入門

1. Figmaの概要とインストール

2.Figmaの基本操作

3.ツールバーの操作

4. プロパティパネルの操作

5. プロトタイピング

6. 共有とバージョン管理

7. 料理写真投稿アプリを作ってみよう



このレッスンの著者