Service logo

    ジョブボード

    有益なデザイン情報をメールでお届けします。

    お役立ちのデザイン情報のみをお送りします。メールは多くとも週に一回で、もちろんスパムメールはありません。

    ツール
    • Figma
    Figma
    • プラグイン
    • 機能
    インスピレーション
    • ポートフォリオ
    • デザイン記事
    • ジョブボード

    Designpedia © 2025 / Trademarks, names, terms and IPs are property of their respective owners unless otherwise stated

    Legal Information

    Figma プラグイン

    Figma 機能

    figma logo

    Figma エフェクトをつける

    エフェクトをつける

    1. Figma
    2. 機能
    3. デザインパネル
    4. エフェクト
    eyecatch image

    概要

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

    apply-effects_image01.png

    1.エフェクトの追加

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

    apply-effects_image02.png

    apply-effects_image03.png

    2.エフェクトの削除

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

    apply-effects_image04.png

    apply-effects_image05.png

    3.表示 / 非表示(エフェクトのみ)

    エフェクトの表示 / 非表示を切り替えます。

    apply-effects_image06.png

    apply-effects_image07.png

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

    apply-effects_image08.png

    4.エフェクトの種類

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

    apply-effects_image09.png

    ①インナーシャドウ

    apply-effects_image10.png

    ②ドロップシャドウ

    apply-effects_image11.png

    ③レイヤーブラー

    apply-effects_image12.png

    ④背景のぼかし

    オブジェクトの不透明度を99%以下にします。 apply-effects_image13.png

    apply-effects_image14.png

    5.エフェクトの設定

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

    apply-effects_image15.png

    apply-effects_image16.png

    apply-effects_image17.png

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

    apply-effects_image18.png

    apply-effects_image19.png

    apply-effects_image20.png

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

    apply-effects_image21.png

    apply-effects_image22.png

    apply-effects_image23.png

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

    apply-effects_image24.png

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

    apply-effects_image25.png

    apply-effects_image26.png

    apply-effects_image27.png

    6.スタイル

    作成したエフェクトを保存、呼び出すことができるライブラリです。

    チームライブラリ:保存した色のリストをチームで共有 スタイルを作成:ライブラリに保存する色を作成する

    apply-effects_image28.png

    ①チームライブラリ

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

    apply-effects_image29.png

    apply-effects_image30.png

    ②スタイルを作成

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

    apply-effects_image31.png

    apply-effects_image32.png

    apply-effects_image33.png

    author icon

    Designpedia Team

    2024年1月16日(火) 公開