Figma用にフラットイラストを生成するSkillを作成しました

miho — Sun, 16 Aug 2026 14:28:01 +0000

要点

Skillsを使うことでワークフローの標準化を実現できます
段階的な質問でフラットイラストを生成するSkillを作りました
Codexで観点を広げ、最後は自分で調整することで完成度を上げました

2026年5月、Figmaはキャンバス上で直接使えるFigmaエージェントを発表しました。

最近では、FigmaでSkillsを活用したコンテンツも投稿されています。そこで、せっかくなら私も作ってみようと思い、Codexと相談しながらフラットイラストを生成するSkillを作りました。

そもそもFigma Skillsとは

Figma Skillsは、繰り返し行うワークフローを、AIエージェントが実行できる指示としてまとめる仕組みです。

たとえば、毎回長いプロンプトを書かなくても、Skillに手順やルールを持たせておけば、スラッシュコマンドから呼び出せます。複数のスキルを呼び出すことも可能で、柔軟に活用することができます。

Figmaの公式ヘルプによると、Custom Skillの実体はAgent Skills仕様に沿ったMarkdownファイルです。Figma上で直接記述する方法と、既存のMarkdownファイルをアップロードする方法があります。

プロンプトは、一度の出力を得るための依頼になりがちですが、Skillには質問の順序、選択肢、ルール、確認方法まで含められます。つまり、成果物だけでなく、そこへ至る進め方も共有できます。Markdownファイルとして残すことで、業務プロセスの標準化にもつなげられます。

なお、生成AIの性質上、同じSkillを使っても出力が完全に同じになるわけではなく、ここで目指す「標準化」とは、毎回確認すべき観点や方向性をそろえることだと考えています。

generate-flat-illustrationsの概要

今回公開したgenerate-flat-illustrationsは、Figma上でフラットなイラストを作るSkillです。

想定したのは、次のような場面です。

ブログのサムネイルがほしい
プレゼン資料のイメージがほしい

利用者にシーン、イメージキーワード、サイズを順に確認し、条件が決まったら完成候補を3案生成するワークフローにしました。

工夫したのは「選択式＋任意入力」

フローを考える上で最も意識したのは、自由入力だけにしないことでした。

何でも入力できる状態は一見便利ですが、利用者は「何を書けばよいか」から考えなくてはいけません。反対に、すべてを固定すると、用途に合わないイラストになってしまいます。

そこで、基本的な方向性は選択肢から選び、必要な場合だけ追加の要望を書ける形にしました。また、一度にすべてを尋ねるのではなく、シーン、イメージキーワード、サイズの順に質問を少しずつ提示する「段階的開示」を取り入れています。前の回答を踏まえて次の選択肢を示せるため、利用者が考える範囲をその都度絞れます。

また、カラーパレットを追加してトンマナを安定させたことも工夫した点の1つです。
OKLCHなら知覚的な明るさを基準に調整でき、トンマナを保ちながら色相ごとのパレットを展開しやすいと考え、採用しました。

安定してフラットイラストを生成できるよう、表現に適度な制約を設け、何度か試行を重ねた結果、現在のSkillの内容に至りました。

Codexとの壁打ちで、完成形の解像度が上がった

最初から詳細な仕様があったわけではありません。「フラットイラストを生成するSkillを作りたい」という大まかな考えから始め、まずは何から着手すべきかを一緒に整理しました。

Codexが検討すべき観点をあらかじめ候補として挙げてくれたことで、私はそれらを確認しながら、要件の整理と意思決定に集中できました。
また、Codexとのやり取りでは、要件だけでなく実際のメッセージ例も提示してもらいました。そのため、具体的なイメージをつかみやすくなり、事前に細かな調整を進められました。
一方で、Codexが作成した内容をそのまま使うと、文章や構造がやや冗長になる部分もあったため、最終的には私のほうで整理・調整を加えています。

自分でもCustom Skillを作るには

FigmaのCustom Skillは、チャットの入力欄から「Skills」→「Add skill」と進み、次のどちらかで作成できます。

Markdownファイルをアップロードする
Figma上で名前、説明、指示を直接記述する

公式の詳しい手順は、Custom skills for the Figma agent and Figma Makeで確認できます。また、Figma MCP ServerとCodexを使って作る場合は、Create skills for the Figma MCP serverで、Codexから$skill-creatorを呼び出す手順が紹介されています。

初めて作るなら、いきなり長い指示を書くより、普段何度も書いているプロンプトを一つ選ぶと始めやすいかもしれません。

最初の版は小さく作り、実際に何度か呼び出してみてください。期待と異なる出力になった場合は、指示を追加する前に、「質問が曖昧ではないか」「二つのルールが競合していないか」を確認すると整理しやすいと思います。

おわりに

今回はフラットイラスト生成に限った試みであり、複雑な制作フローやチームでの運用までは扱えていません。

それでも、Codexとの壁打ちを通じて判断材料を広げ、最後は自分で取捨選択しながら調整することで、完成度を高めることができました。今回のようなSkillを作成するプロセス自体は、ほかの場面でも活かせそうだと感じています。

これからも試行錯誤を重ねながら、AIやチームと一緒にプロダクトづくりを楽しんでいきたいと思います。

DEV Community: miho