Figmaのシェーダーを活かしてグラフィックを作る

概要

最近のグラフィックデザインでは、流体のようなグラデーション、ノイズやディザー系のテクスチャー、といった表現をよく見ます。

ちょっとしたグラフィックを作る際、こういった要素を入れておくとリッチに見えます。

Figmaのシェーダー機能を使うと、他のツールを使わずにこれらの表現を取り入れられます。

プリセットも用意されているので1から作らなくても（作るのが難しくても）気軽に試すことができます。

今回は塗りとエフェクトにそれぞれシェーダーを使い、一見すると複雑に見えるようなグラフィック表現を作ってみました。

その方法や考え方を記事にしています。

完成見本がこちらです。

対象読者

• Figmaを使ってグラフィックを作る人
• 複雑なグラデーションやノイズ、ディザーなどの表現は難しいと感じている人
• シェーダーを自分で書くのにハードルを感じている人

最初にまとめ

• シェーダープリセットを使えば、描画のための環境準備やコードの実装をせずに試せる
• 塗りとエフェクトのシェーダーを組み合わせて、柄作りと質感の調整を分けられる
• 設定を触って、なんとなく好みだと思える見た目を探すところから始めてよい

本題

表現を試す前の準備が少なくなった

シェーダーと聞くと、WebGLやWebGPUを使っての表現が浮かぶ人も多いのではないでしょうか？

以前、WebGLやWebGPUに関して、環境を準備する記事を投稿しました。

細かな違いはあれど「ただ描画する環境を作るだけにしては面倒くさい」ことは共通しています¹。

こうした準備の手間に加えて、シェーダー自体を書く難しさもあります。

ですから、表現の良し悪しにこだわりたくても、それ以前にまともに動くものを作るまでに時間がかかっていました。

もちろん、以前からPaper Shadersのようなツールを使う方法はありました²。

今回記事を書こうと思った「嬉しいポイント」は、普段から使っているFigma内で完結すること、つまり素材作りのために別のツールへ移ったり、自分でシェーダーを書くための環境を準備したりせずに始められることです。

塗りのシェーダーを適用する

Figmaのシェーダーは、塗りとエフェクトに適用できます。

塗りのシェーダーは模様やグラデーションなどを生成し、エフェクトのシェーダーはすでにあるレイヤーの見た目を加工します。

今回は、まず塗りとして Moving gradient を使います。

塗りを適用する基本的な操作は次のとおりです。

1. 背景にするフレームや長方形を選択
2. 右サイドバーのFillから塗りの設定を開く
3. Shader fillに切り替え、Moving gradientを選択

検索や適用方法の詳細は、公式ヘルプにまとまっています。

以下は、Moving gradientを適用したままの状態です。

色もパラメーターも初期設定から変更していません。

この段階で、すでにグラデーションが描画されています。

ここから好みに合わせて変えていきます。

パラメーターを触って好みの見た目を探す

Moving gradientには、ColorsやDetail、Materialなど、見た目を調整するためのパラメーターが用意されています。

これらを変えると、初期設定から次のように見た目を変えられます。

プリセットをそのまま使うこともできますが、そこから自分の好みに近づける出発点としても使えます。

ここでの柄作りは、理屈から形を決めるというより、好みで探している部分が大きいです。

今回はフリーグラデーションのような見た目や、ノイズ、ディザーなどの表現をおおまかに考えていましたが、具体的な完成形までは決めていませんでした。

設定を見て「これが変えられるなら、こういう感じにできるかな」と想像し、少し触って結果を見て、また変えていく進め方です。

今回調整したパラメーターの一部は次のとおりです。

項目	初期設定	調整後	補足
Detail	1.78	0.68
Intensity	4.29	1.75
Twist	0.04	0.19
Flow	0.26	0.88
Zoom	72%	60%
Speed	12%	12%	後述の、タイムラインで再生ヘッドを変えない場合は関係ありません。
Morph speed	3.74	3.74	後述の、タイムラインで再生ヘッドを変えない場合は関係ありません。
Material	None	Iridescent
Colors	0%: FFE99E 50%: 8178FF 100%: FF009B	0%: B2C7C4 50%: 3E567C 100%: 9F96AD
Color balance	0%	0%	上で設定したColorsの色をもとに、0%寄りの色にするか100%寄りの色にするかの設定です。個人的には、これをいじるならColorsをちゃんと設定した方がいいです。
Color method	Height	Facing

色を選んだり、スライダーを動かしたり、選択肢を切り替えたりしながら、見た目を試せます。

今回は背景画像として使いたいので、配色は落ち着かせましたが、柄については結果を見ながら好みで選びました。

複数のパラメーターを変えているので、これは調整した結果の一例です。

この設定を再現することが目的ではなく、好きに動かしてみて、なんとなく好みだと思えるものが見つかれば採用すればよいと思います。

最初からすべての設定を理解していなくても、見た目を確認しながら試せばOKです。

というか私もすべてのパラメーターの意味は理解していません。

理解している方が狙った柄を出すまでの時間は短くなると思いますが、理解していなくても偶然生まれた柄が良い感じなことも多々あります。

気負わずに自由に試しましょう。

エフェクトのシェーダーを適用する

グラデーションの見た目ができたら、次に質感を加えます。

同じレイヤーのEffectsにシェーダーを追加し Dither を選びました。

こちらについてはパラメーターは初期設定から触っていません。

Dither を重ねると、なめらかだったグラデーションに細かな点のパターンが加わります。

塗りのシェーダーで色や柄を作る工程と、その後エフェクトのシェーダーで質感を加える工程とに分けると考えやすいと思います。

今回は Dither を使いましたが Halftone や Pixelate を重ねてみるのもよさそうです。

各エフェクトの概要は、Figma製シェーダーの公式ヘルプを参照してみてください。

完成

あとは、文字や図形を載せて完成です。

こちらは最初に載せたものと同じ画像です。

Tips: 背景として使うときに見るところ

柄自体は好みで作ってよいですが、背景として使うときには前に置く主題の邪魔にならないかを見ておいた方がよいです。

たとえば以下のような観点です。

• 背景の一部だけコントラストが高くなり、主題より目立っていないか
• 柄の輪郭が画面の端にちょうど接して、不自然な接点になっていないか
• 色相が離れた色を組み合わせるときには、中間色が意図せず濁って見えないか

こうした点は、実際に文字などを載せた状態で調整します。

自分で作りたくなったら

今回はプリセットだけを使いましたが、Figmaエージェントに自然言語で伝えて、シェーダーを作る方法もあります。

まずプリセットを触ってみて、既存の設定では足りない表現を試したくなった場合、次の選択肢になります。

作成方法は公式ヘルプで紹介されています。

まとめ

Moving gradientでグラデーションを作り、Ditherで質感を加える流れを紹介しました。

色々なパラメーターがありますが、そのすべてについて理屈を組み立ててから作る必要はなく、少し変えては結果を見て、好みのものを探す進め方でもまったく問題ありません。

こうした表現は難しそうだと思っていた方も、まずはプリセットを使い、色を変えるなど簡単な部分から試してみてください。

1. これくらいの内容なら面倒でもなんでもないと思われる方もいるとは思うのですが、私はだいぶズボラなものですから、結構面倒に感じています。 ↩

2. 過去に記事にもしています。https://qiita.com/kskwtnk/items/e536180a78d3399bc2aa ↩