Figmaでデザインをしている際に「放射状にブラー（ぼかし）をかけたい」と思ったことはありませんか？
しかし、Figmaには標準で放射状ブラーのエフェクトは用意されておらず、プラグインの導入が必要です。
この記事では、Figmaで放射状のブラー効果をつける方法として「Progressive Blur Studio」というプラグインを紹介します。
Figmaとは
まず、Figmaについて簡単におさらいしておきましょう。
Figmaは、UI/UXデザインの現場で広く使われているクラウドベースのデザインツールです。
ブラウザ上で動作し、複数人でリアルタイムに共同作業ができるのが特徴です。
シンプルな操作感と豊富なプラグイン、そして無料プランでもかなりの機能が使える点から、プロだけでなくデザイン初心者にも支持されています。
Figmaでは標準で以下のようなブラー効果が使えます。
- レイヤーブラー（Layer Blur）：選択したレイヤー全体をぼかす
- 背景ブラー（Background Blur）：背景にのみぼかしをかける
Figmaでは図形や写真の全体にブラーを書けることが出来ても、放射状にかけることはできません。
そこで役立つのが、「Progressive Blur Studio」というプラグインです。
次の章ではこのプラグインについて紹介いたします。
放射状にぼかしをかけられる
Figmaのプラグイン「Progressive Blur Studio」
Progressive Blur Studioは、オブジェクトに対して徐々に強度が変化するぼかし効果を加えることができるプラグインです。
画像や図形に自然なフェード感や奥行き感を加えたいときに最適で、特に放射状や直線状のブラー表現に強みがあります。
Progressive Blur Studioの使い方
- ブラーを適用したい画像や図形を用意
画像や図形など、ブラー効果をかけたいオブジェクトをFigma上に配置します。 - 適用したい画像や図形の上にマスク用オブジェクトを配置
用意したオブジェクトがブラーがかかるマスクになります。 - マスクオブジェクトを選択した状態でプラグインを起動
Figmaのメニューから「プラグイン」→「Progressive Blur Studio」を選択。 - ブラーの方向と種類を設定
Linear（直線）：一方向に向かって徐々にブラーが強くなる
Radial（放射）：中心から内向き（Inward）または外向き（Outward）にブラーがかかる
- 各種パラメータを調整
Direction：ブラーの向き（例：右方向、中央から外など）
Background Blur Radius：開始地点と終了地点のブラーの強さを調整可能
Steps：レイヤーの段階数（より滑らかなぼかしに） - 「Apply」ボタンで適用
プラグインが自動で複数のブラー付きレイヤーを生成し、希望のぼかし効果が反映されます。
注意点
Progressive Blur Studioを使ううえで、ひとつ気をつけたいのがファイルの重さです。
このプラグインは、ぼかしの効果を段階的に再現するために、複数のレイヤーを自動的に生成します。
そのため、設定次第では一気にレイヤー数が増え、Figmaの動作が重くなります。
可能であれば、ブラー効果だけを別の新しいファイルで作成して、必要なパーツをエクスポートしてから本体に貼り付ける、という使い方をおすすめします。
