📌 この記事のポイント

• シェーダーは、画像加工をFigma内でできる機能

• 種類は「シェーダー塗り」と「シェーダーエフェクト」

• Figmaエージェントに頼めば、シェーダーを自作できる

• 2026年9月時点はオープンベータ、全プランで利用可

• 加工の意図を言葉にしてから使うと失敗しにくい

2026年9月23日更新

Figmaシェーダーは、Photoshopで行っていた画像加工をFigmaの中でできる機能

Figmaシェーダーとは、レイヤーの見た目をリアルタイムに加工できる、Figma Designの新機能です。ハーフトーン、ピクセル化、ノイズ、ゆがみといった、これまでPhotoshopで行うことが多かった加工を、Figmaのキャンバス上で試せます。

2026年9月12日の「NOT DESIGN EXPO」で、NOT DESIGN SCHOOL代表のもちは、Figmaのイベント「Config」で発表されたこの機能を実演しました。もちは「かなり楽しんで使っている」と話し、さらにシェーダーそのものをAIで作れる点を紹介していました。この記事では、公式ヘルプの情報と講演の実演をもとに、使い方を整理します。

シェーダーとは？「塗り」と「エフェクト」の2種類

シェーダーとは、GPUを使って画素（ピクセル）の見た目を計算する小さなプログラムです。Figmaでは、WebGPUという技術を使って、キャンバス上でリアルタイムに動作します。Figma公式ヘルプ「Find and use shaders」では、2つの種類が説明されています。

どちらも複数を重ねて使えます。静止したものだけでなく、動くシェーダーや、マウスの動きに反応するシェーダーも作れます。

使える加工の例

シェーダーで使える加工とは、色・形・質感を後から変える処理のことです。講演でもちが紹介した例と、公式ヘルプに挙がっている例を整理しました。

講演で紹介された、画面の見方

講演でもちは、右パネルの「エフェクト」の中に、波のようなアイコンが付いたものがシェーダーだと説明していました。そこをクリックするとパネルが開き、ピクセルの大きさや明るさなどを調整できます。「エフェクト」の追加ボタンから一覧を開くと、いちばん下にシェーダーがあり、Figmaが用意したシェーダーと、自分で作ったシェーダーがライブラリのように並びます。

画面の配置や名称は、ベータ期間中に変わることがあります。見つからない時は、公式ヘルプの手順と見比べてください。

使い方｜Figmaが用意したシェーダーを適用する

シェーダーの適用とは、レイヤーを選んで、塗りまたはエフェクトとしてシェーダーを追加する操作です。Figma公式ヘルプの手順をもとに整理しました（2026年9月時点）。

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

1. 加工したいレイヤー（画像・テキストなど）を選ぶ

2. 右側の「デザイン」タブで「エフェクト」の＋（エフェクトを追加）をクリックする

3. 一覧から「シェーダーエフェクト」を選ぶ

4. ライブラリから使いたいシェーダーを選ぶ

5. パネルで、ピクセルの大きさや明るさなどのパラメーターを調整する

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

1. レイヤーを選ぶ

2. 「塗り」の色の見本、または＋をクリックする

3. 「シェーダー塗り」のアイコンを選び、シェーダーを選ぶ

Figmaが作ったシェーダーは、左のナビゲーションの「ツール」から探せます。フィルターで「Shader effect」「Shader fill」を選ぶと絞り込めます（Figma公式：Shaders and plugins created by Figma）。デモはshaders.figma.comでも見られます。

Figmaのエージェントでシェーダーを自作する

シェーダーの自作とは、Figmaのエージェントに作りたい効果を伝えて、シェーダーを生成してもらうことです。コードや専門用語が分からなくても作れます（Figma公式：Create shaders with the Figma agent）。

1. Figma Designのファイルで、ナビゲーションの「エージェント」を開く

2. 新しいチャットを始める

3. 「ノイズ加工のシェーダーを作りたい」のように、作りたい効果を伝える

4. できたシェーダーを、いくつかのレイヤーに適用して確かめる

5. 気になる点があれば、エージェントに修正を頼む

講演でもちは、エージェントのパネルにある「プラグインとシェーダーを作成」を選んでから依頼していました。

作ったシェーダーは、スタイルにしてチームのライブラリに公開したり、Figmaコミュニティに公開したりもできます。

もちの使用例｜イラストとコピーライトの加工

もちは、NOT DESIGN EXPOの告知用に、ChatGPTで生成したネオブルータリズム風のイラストをシェーダーで加工していました。人とAIが協力して絵を描いているシーンのイラストです。

• ねらい：アナログ感を少し残しながら、デジタルっぽくしたい

• 使った加工：ピクセル風のシェーダーをかけ、ピクセルの大きさや明るさを調整

• 文字への応用：コピーライトのテキストにハーフトーンをかけ、アナログな雰囲気に。シェーダーを外せば普通のテキストに戻る

元のイラストや文字を残したまま加工を試せるので、「やっぱり元に戻したい」にもすぐ対応できます。

シェーダーが活躍する場面

シェーダーが活躍する場面とは、写真やイラストに質感を足して、デザイン全体のトーンをそろえたい時です。もちの使い方と公式ヘルプの例をもとに、実務で使いやすい場面を整理しました。

エージェントへの頼み方の例

エージェントへの頼み方とは、作りたい効果を、見た目の言葉で具体的に伝えることです。公式ヘルプでは、「Build me a shader」に続けて説明を書く方法が紹介されています。日本語でも、次のように伝えると意図が伝わりやすくなります。

紙に印刷したような、細かいノイズを重ねるシェーダーを作ってください。ノイズの粗さと濃さを、パネルで調整できるようにしてください。

写真を2色（紺と黄色）だけで表現するデュオトーンのシェーダーを作ってください。2つの色はパネルで変えられるようにしてください。

• 見た目を言葉にする：「紙に印刷したような」「昔のゲームのような」など、たとえを入れる

• 調整したい項目を伝える：粗さ、濃さ、色など、後から変えたい数値を指定する

• 1回で完成を狙わない：できたものを当てて、気になる点を1つずつ直してもらう

うまくいかない時の対処

シェーダーを使う前に決めておきたいこと

シェーダーは試すのが楽しい機能なので、つい加工を重ねすぎてしまうことがあります。使う前に、次の2つを決めておくと迷いにくくなります。

• どんな印象にしたいか：「アナログ感を足したい」「近未来っぽくしたい」など、一言で書く

• どこまで加工するか：元の写真やイラストの良さを、どれくらい残すか

もちの使用例でも、「アナログ感を少し残しつつデジタルっぽく」という方向を決めてから、ピクセルの大きさや明るさを調整していました。方向が決まっていれば、数値を動かしながら「ここまで」と判断しやすくなります。

限界と注意点

• 2026年9月時点では、オープンベータです。 公式ヘルプでは、動作が重くなるなどの問題が起きる可能性があると説明されています

• 使える環境に条件があります。 WebGPUに対応したブラウザ・パソコンが必要です

• 利用できる範囲：公式ヘルプでは、Figma Designの全プランで利用でき、ベータ期間中はシェーダーの作成にAIクレジットを消費しないと案内されています。条件は変わる可能性があるため、使う前に公式ヘルプを確認してください

• 動くシェーダーは、1ページで同時に1つだけ再生されます

• 印刷物など解像度が必要な用途は、書き出した結果を確認してください

• AIで作ったシェーダーは、意図どおりの見た目か、目で確かめてください

Figmaシェーダーについてよくある質問

Figmaシェーダーは無料プランでも使えますか？

2026年9月時点の公式ヘルプでは、Figma Designの全プランで利用できると案内されています。編集権限のあるファイルで使えます。

シェーダーを作るのにコードの知識は必要ですか？

必要ありません。Figmaのエージェントに作りたい効果を言葉で伝えると、シェーダーを生成してもらえます。

シェーダーをかけた画像は書き出せますか？

書き出せます。ただし、Figma Makeに書き出したインスタンスは、元のシェーダーとのつながりが保たれないと公式ヘルプで説明されています。

Photoshopは不要になりますか？

簡単な質感の加工や試作はFigmaで済む場面が増えます。一方で、細かなレタッチや印刷用の高解像度データの作成は、Photoshopが向いている場面も残ります。

他の人が作ったシェーダーも使えますか？

使えます。Figmaコミュニティに公開されているシェーダーや、チームのライブラリに登録されたシェーダーを、自分のファイルで使えます。

動くシェーダーは、Webサイトでもそのまま動きますか？

Figmaで作ったシェーダーが、そのままWebサイトで動くわけではありません。Webで同じ表現を使いたい場合は、エンジニアと実装方法を相談してください。