MENU
CLOSE
デザイン Edit : 2024.01.22 Update : 2025.05.13
【Figma】ザラザラとした質感のノイズの効いたグラデーション作成テクニック

【Figma】ザラザラとした質感のノイズの効いたグラデーション作成テクニック

トレンドのノイズの効いたザラザラとした質感のグラデーションがワンクリックでランダムに生成・編集・高解像度書き出しができるプラグインをご紹介します。
2023年1月にリリースされた後から注目のプラグインで、ノイズ外せば編集可能なSVGデータを書き出すことも可能です。

『Noisy Gradients』の使い方


①[Plugins]→[Noisy Gradients]でプラグインを実行します。

②ポップアップダイアログが開くので、欲しいグラデーションのパターンが出るまで「Generate new」を何回かクリックする。

③欲しいグラデーションが表示されたら、「Insert」をクリックする。


『Noisy Gradients』で使用できるオプション


生成するデータのサイズ(px)設定

設定できる値は800、1200、2000、2400、4000で、縦横比は1:1で固定。

使用される色の変更

使用されている色のカラーパレットを選択することで、カラーチャートやHEX値などから色を変更できます。
色数はランダム生成時に決定されるようで変更できません。そのため、欲しい色数になるまでランダム生成し続ける必要があります。

Noiseエフェクトの適用(ON/OFF) 【この機能は有料版となります】

  • チェックON:Insert時にノイズが適用された状態の画像(PNG)が生成される。
  • チェックOFF:Insert時にノイズが適用されていない状態のフレーム(SVG)が生成される。

編集者:hamano

東京造形大学の環境デザインで都市環境などの空間設計を学ぶ。卒業後、某玩具メーカーへ勤務。Webの新たなコミュニケーションやデザインの世界に触れ影響を受ける。2022年にKOHIMOTOへjoin。金髪ショートカットがトレードマークです。

監修者:Yuka Fujimoto

Webディレクター / デザイナー。美術大学在学中に、画面ひとつで世界中の人と繋がれるWebの可能性やデザインへ興味を持つ。インターンを経て就職したIT企業でお仕事のイロハを学び、実務経験を積む。肉より魚派🐟