Figma エフェクトをつける
エフェクトをつける
- Figma
- 機能
- デザインパネル
- エフェクト

概要
影やぼかしなどのエフェクトをつけます。 1.エフェクトの追加 2.エフェクトの削除 3.表示 / 非表示 4.エフェクトの種類 5.エフェクトの設定(エフェクトにより内容が異なる) 6.スタイル

1.エフェクトの追加
オブジェクトにエフェクトを追加します。 ドロップシャドウがデフォルトで追加されます。


2.エフェクトの削除
エフェクトを削除します。


3.表示 / 非表示(エフェクトのみ)
エフェクトの表示 / 非表示を切り替えます。


再度、押すと選択している範囲が表示されます。この時ボタンの目も一緒に開きます。

4.エフェクトの種類
①インナーシャドウ:オブジェクトの内側に影をつける ②ドロップシャドウ:オブジェクトの外側に影をつける ③レイヤーブラー:オブジェクトをぼかす ④背景のぼかし:前面のオブジェクトと重なった範囲のみ背面のオブジェクトをぼかす

①インナーシャドウ

②ドロップシャドウ

③レイヤーブラー

④背景のぼかし
オブジェクトの不透明度を99%以下にします。


5.エフェクトの設定
インナーシャドウの設定: オブジェクトの内側に影をつけます。 X 水平方向の位置 Y 垂直方向の位置 B 影のぼかし度合 S 影の範囲の大きさ 影の色と不透明度



ドロップシャドウの設定: オブジェクトの外側に影をつけます。 X 水平方向の位置 Y 垂直方向の位置 B 影のぼかし度合 S 影の範囲の大きさ 影の色と不透明度



レイヤーブラーの設定: オブジェクトをぼかします。 B ぼかし度合



背景のぼかしの設定: 前面のオブジェクトと重なった範囲のみ、背面のオブジェクトをぼかします。 B ぼかし度合

オブジェクトのぼかしたい範囲に図形を重ねて作成します。 前面に重ねた図形の不透明度を0.1~99.99の間に設定します。 前面のオブジェクトに「背景のぼかし」を適用し、ぼかし度合を設定します。



6.スタイル
作成したエフェクトを保存、呼び出すことができるライブラリです。
チームライブラリ:保存した色のリストをチームで共有 スタイルを作成:ライブラリに保存する色を作成する

①チームライブラリ
ライブラリを共有するときは、本のアイコンをクリックし、現在のファイル欄の右にある「公開」をクリックします。 共有されたライブラリを使用するときは、同じく本のアイコンをクリックし、使用したいライブラリの「有効化」ボタンをクリックします。


②スタイルを作成
ライブラリに追加する色スタイルを作成、保存します。



Designpedia Team
2024年1月16日(火) 公開