Figmaで画像のぼかし方を知りたい
この記事は上記の課題に向けて作成しています。
web制作ではイメージ画像をぼかして使うことがたまにあります。
その際Figmaのぼかし機能を使うことで出来ます。
この記事ではFigmaで画像をぼかす方法を紹介します。
この記事を読むメリット
- Figmaで画像をぼかす方法がわかる
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
目次
Figmaで画像をぼかす方法
早速Figmaで画像をぼかす方法を紹介します。
画像をぼかす手順は下記の通りです。
Figmaで画像をぼかす手順
- 「レイヤーブラー」を選択する
- ぼかし具合を調整する
「レイヤーブラー」を選択する
Figmaのぼかし機能である「レイヤーブラー」を選択します。
ぼかしたい画像を選択した状態でエフェクトの「＋」を選択し、プルダウンの中から「レイヤーブラー」を選択します。
ぼかし具合を調整する
続いてぼかしの具合を調整します。
「エフェクトの設定」から「ぼかし範囲」の数字を調整します。
するとぼかし具合が調整されます。
ちなみに画像以外にオブジェクトやテキストも同様にぼかすことが出来ます。
画像を部分的にぼかす方法
先ほどは画像全体をぼかす方法を紹介しました。
次は部分的にぼかす方法を紹介します。
Figmaで画像を部分的にぼかす手順
- オブジェクトを作る
- オブジェクトに「背景のぼかし」を設定する
- ぼかし具合を調整する
オブジェクトを作る
始めにぼかしたい形のオブジェクトを作成します。
今回は長方形を作成します。
この際オブジェクトの色は「白」で透明度は「1％」に設定しておきます。
オブジェクトに「背景のぼかし」を設定する
続いてオブジェクトに「背景のぼかし」を設定します。
「エフェクト」→「背景のぼかし」を選択します。
ぼかし具合を調整する
最後にぼかし具合を調整します。
するとオブジェクトが配置されている箇所だけ部分的にぼかしが効きます。
Figmaで画像をぼかすのは簡単
この記事ではFigmaで画像をぼかす方法を紹介しました。
Figmaでは簡単に画像をぼかすことが出来ます。
まだやったことのない人は是非試してみてください。
リンク
Figmaに関する内容の記事はこちら
あわせて読みたい
【Figma】コンポーネント化を解除する方法！
Figmaのコンポーネント化を解除する方法を知りたい この記事は上記の課題に向けて作成しています。 Figmaで制作中にコンポーネント化した要素を解除したい場合がありま...
あわせて読みたい
Figmaで画面遷移図(フローチャート)を作る方法！
Figmaで画面遷移図を楽に作りたい この記事は上記の課題に向けて作成しています。 web制作では画面遷移図を作成する場合があります。 実はFigmaでは楽に画面遷移図が作...
あわせて読みたい
Figmaで円グラフを作る方法を紹介！
Figmaで円グラフの作り方を知りたい この記事は上記の課題に向けて作成しています。 Figmaでは円グラフを簡単に作ることが出来ます。 作り方はわからない方は是非この記...