こんにちは。NCDC株式会社でデザイナーをしている、ふくだです。
Figmaでのデザイン作業中、グラデーションの表現で悩むことが度々あります。
Figmaの標準機能（LinearやRadial）だけでは、色が複雑に混ざり合うような表現を作るのは難しく、レイヤーを何枚も重ねてBlurをかけるなど、意外と手間がかかります。
かといって、素材サイトで画像を探しても「色はいいけど形が違う」「ブランドカラーと微妙に合わない」など、理想通りの素材はなかなか見つからないのが現実です。
そんな悩みを解決するために、直感的な操作でグラデーションを生成できる
Figmaプラグイン 「Aurora – Interactive Blur Gradient」を作成・公開しました。
どんなプラグイン？
「Aurora – Interactive Blur Gradient」は、カラーポイントを自由に配置し、繊細なぼかし効果（Blur）を加えることで、流動的で深みのあるグラデーションをその場で作り出すツールです。
単純な2色の移り変わりではなく、複数の光が有機的に混ざり合うリッチな色彩表現を可能にします。
主な機能
主な４つの機能を紹介します。
1. 直感的なカラーコントロール (Intuitive Color Control)
プレビュー画面上の円形ポイントをドラッグするだけで、カラーの位置を直接操作できます。
数値をいじるのではなく、キャンバス上で「ここの色を広げる」「ここは明るい色を配置する」といった微調整ができるため、偶発的かつ美しいバランスを直感的に探ることができます。各ポイントが全体のライティングや陰影に影響を与え、有機的な表現が生まれます。
2. 高度なブラー制御 (Advanced Blur Control)
「Blur Points」と「Blur Area」というパラメータを調整することで、色の混ざり具合を細かくコントロールできます。
境界をくっきりさせることも、滑らかに溶け込ませることも可能。単調になりがちなグラデーションに、意図した通りのディテールを持たせられます。
3. 豊富なレイアウトと一貫性 (Rich Layout Options & Consistency)
ゼロから作るのが大変な時は、プリセットが役立ちます。以下のパターンから、瞬時にベースとなる構成を呼び出せます。
- Tile (タイル)
- Wave (波)
- Diagonal (対角線)
- Randomize (ランダム)
また、各ポイントの色や不透明度（Opacity）は個別に設定可能です。デザインシステムのブランドカラーを正確に入力できるため、素材サイトの画像とは違い、プロジェクトの色味に完全に合わせたグラデーションが作れます。
とりあえずRandomizeかけるとなんかいい感じになるのでおすすめです。
4. 高解像度出力への対応 (High-Resolution Output Support)
生成する画像の幅（Width）と高さ（Height）は自由に設定できます。
Webやモバイルアプリ用の素材としてはもちろん、印刷にも耐えうる高画質なグラデーション画像を書き出すことができます。
おわりに
こういったグラデーション系のプラグインは探せば結構いっぱいあります。
メッシュを操作してグラデーションを作るのが主流なのですが、微妙に欲しいニュアンスと違ったのでAIつかえば自分でも作れるかも？と試してみたのが最初のきっかけです。
結果、メッシュとはちょっと違うけど悪くないプラグインができたので公開までしてみました。
今回はじめてFigmaプラグインの外部公開を行ってみましたが、審査の流れもしれたのがよかったです。
もし役立ちそうであれば背景作成の時短ツールとして、あるいは新しい色彩パターンの実験場として、ぜひ試してみてください！
生成AIを利用したFigmaプラグイン作成に関しては以前の記事で紹介しています。
このプラグインもコードは書いていません。
その後いくつかプラグインをつくってみて学んだこともあるので、そのうち更新する予定です。
NCDC株式会社( ncdc.co.jp/ )のテックブログです。 主にエンジニアチームのメンバーが投稿します。 募集中のエンジニアのポジションや、採用している技術スタックの紹介などはこちら( github.com/ncdcdev/recruitment )をご覧ください！
Discussion