Figma agentが作るアイコンを、人が直しやすく(線は線のまま、レイヤーも整理。手持ちの絵に絵柄をそろえて増やすときに見ること)

Figma agentのベクター生成の改善を伝えるアイキャッチ

AIにアイコンを作ってもらったら、見た目はいいのに、線を少し太くしたいだけで手間がかかる。AIの作ったものを直す場面では、こうした「あとから直せるか」が仕事の速さを左右します。Figmaは11月5日、FigmaのAI「Figma agent」が作るベクターのイラストとアイコンを改善したと発表しました。

変わったのは見た目より作りの中身です。線は塗りではなく線(ストローク)で作り、レイヤーは意味のまとまりで整理されます。手持ちのイラストを参考に渡して絵柄をそろえることや、できたものをFigma Motionで動かすこともできます。

この記事の要点

  • Figmaが11月5日、Figma agentが作るベクターのイラストとアイコンの改善を発表した
  • 線幅や線の端を描き直さず変えられる形になり、アイコンを増やす・直す仕事をするデザイナーや担当者に関係する
  • 手持ちの絵を参考に数個で試し、線とレイヤーの作りとAIクレジットの減り方を人が確かめてから増やす
トミー

AIで作ったものは、最初の見た目より、直すときに差が出ます。今回はそこの改善なので、派手さはないですが、制作の現場にはうれしい話です。

何が発表された?

Figmaのリリースノートに11月5日付で載った内容は、「Figma agentが、編集しやすく、スタイルに合わせやすく、動かしやすいベクターのイラストとアイコンを作るようになった」というものです。挙げられている改善は4つあります。

  • レイヤーのまとめ方:独立したレイヤーで作られ、直感的にグループ分けされる
  • 参照を渡せる:自分のイラストをスタイルの参考として渡し、追加の部品やブランドに合うアイコンをまとめて作れる
  • 線の作り:線の部分に塗りではなく線(ストローク)を使う。線の太さや線の端の形を、描き直さずに変えられる
  • 動かす準備:整ったレイヤーの構造なので、人でもagentでも、Figma Motionで動きを付けられる
線をストロークのまま作る・レイヤーの整理・参照画像・Figma Motionの4つの改善をまとめた図
線をストロークのまま作る・レイヤーの整理・参照画像・Figma Motionの4つの改善をまとめた図

これまでと何が違う?

ベクターは、形を点と線の情報で持つ画像です。拡大しても粗くならないので、アイコンやロゴの素材に向いています。ただ、同じ見た目でも作りは1つではありません。たとえば同じ1本の線でも、「線」として持っていれば太さの数字を変えるだけで済みます。「塗りつぶした細長い形」として持っていると、太さを変えるには形そのものを直すことになります。

今回のリリースノートは、agentが線の部分に塗りではなく線を使うと明記しています。ヘルプでも、agentが作るベクターは「編集できる線と塗りでできていて、レイヤーの構造が整理されている」と説明されています。作ったあとに人が直すことを考えた改善、と読めます。

なお、Figmaのベクターに関わるAIは、agentのほかにもあります。すでにある画像をベクターに変えるVectorizeや、決まった作業を1回ずつ動かすWeaveツールです。今回の改善はagentの話なので、この2つとは分けて考えます。

何ができるようになった?

ヘルプ「Generate and edit vectors with Figma AI」によると、agentへの頼み方は2通りです。言葉で説明してゼロから作るか、参照画像を足して方向を決めるかです。作っている間はキャンバス上で形ができていく様子を見ることができ、1つずつ作るだけでなく、複数の作業を同時に走らせて、その間に別のフレームで作業を続けることもできます。

できたものを動かすときは、Figma Motionを使います。ヘルプでは、作りたい動きを説明するとagentがタイムラインにキーフレームを追加し、続けて頼むか、人がタイムラインで細かく直すことができると説明されています。なお、Figma Motion自体は11月6日の確認時点でオープンベータです。

トミー

ヘルプまで読むと、ファイルの権限や書き出しの扱いも分かります。発表文だけだと見えない所なので、下の図にまとめました。

作り方ごとのAIクレジットの目安と、頼む前に確かめる4つのことをまとめた図
作り方ごとのAIクレジットの目安と、頼む前に確かめる4つのことをまとめた図

仕事ではどう使えそう?

サービス紹介ページのアイコンをそろえる

たとえば、サービス紹介ページに6つの強みを並べる会社で、すでに3つのアイコンがあるとします。その3つを参照として渡し、「同じ絵柄で、残りの3つを作って」と頼めば、たたき台を早く用意できます。線が線のまま作られていれば、並べて太さが違って見えたときも、数字を合わせて整えられます。

資料やブログの図解の部品を増やす

図解で使う「人」「書類」「矢印」のような部品は、種類が増えるほど絵柄がばらつきます。社内で使っているイラストを参照にして足りない部品を作れば、資料ごとにフリー素材を探し直す時間を減らせます。グループ分けされたレイヤーなら、色を変える部分だけを選びやすくなります。

SNSやバナーの小さな動きに使う

キャンペーンのバナーやSNSの動画で、アイコンを少しだけ動かしたい場面があります。整理されたレイヤーなら、「矢印の部分だけ右に動かして」のように、部品ごとに動きを付けやすくなります。動きの細かい調整は、Figma Motionのタイムラインで人が仕上げます。

手描きのラフを清書の入口にする

手描きの記号や文字をベクターに変えたいときは、agentではなくVectorizeが合います。ヘルプでは、1枚あたり2〜5クレジットで、色数を指定する、白黒にするといった調整もできると説明されています。ただし、複雑な画像や解像度の低い画像はうまく変換できないことがあると書かれています。

KAKERUならこう使う/使わない

KAKERUなら、絵柄がすでに決まっているアイコンの追加から使います。ブログの図解やサービス紹介の部品のように、参照にできる自分たちの素材があるものです。頼むのは数個にして、線の太さがそろっているか、線の端や角の形が元の絵と同じかを見て、良ければ数を増やします。

反対に、ロゴやブランドの顔になる絵は、agentの出力をそのまま使いません。ここは形の意味や見え方を人が決める仕事なので、AIに任せるのは案出しまでです。また、他社のサイトやネットで拾ったイラストを参照に渡すこともしません。今回読んだページに参照画像の権利についての説明はありませんが、「似せて作る」使い方なので、参照は自社で作ったものか、使ってよいと確認できたものに絞ります。

トミー

AIに任せるのは「数をそろえる」ところ。どの形で何を伝えるかは、人が決める所として残しておきたいです。絵柄のそろい方は、ぜひ試してみたいです。

誰が使える?

ヘルプ「Generate and edit vectors with Figma AI」の対象は、Starter・Professional・Education(K-12を除く)・Organization・Enterpriseの各プランで、Figma Design・Figma Draw・Figma Slides・Figma Buzzの記載があります。ファイルの編集権限が必要です。なお、クレジットのヘルプでは、Figma Slidesのagentはクローズドベータとされています。

agentの使い方はシートでも変わります。Fullシートで編集権限がある人はファイルを編集させられます。View・Dev・Collabシートや閲覧のみの人は、チャットはできても編集はさせられません。ただし、自分のDraftsなら誰でも編集を頼めます。

AIクレジットは、Fullシートが月にStarter 500・Professional 3,000・Organization 3,500・Enterprise 4,250、Dev・Collab・Viewシートが500です。StarterプランとViewシートには1日150までの上限もあります。

注意点

  • 使えるかは自分の画面で確かめる:11月6日の確認時点で、agentのヘルプの機能一覧は「ベクターの編集」「アイコン作成」を「Coming soon」としたままです。リリースノートと別のヘルプは作れると書いているので、公式の記載が分かれています
  • agentのクレジットは決まった数ではない:内容の複雑さ、モデル、添付やライブラリの量で変わります。ベクターの例は公式に載っていません。ヘルプの例はフォント変更で30以上、スマホの購入画面5枚で300以上です(どちらも目安)
  • 書き出しは人がする:agentの機能一覧で、素材の書き出しは対応外です。WebサイトなどにSVGで使うときは、人が書き出して確かめます
  • 数字は変わることがある:クレジットの数字は10月15日時点のものです。残りはファイルのメインメニューの[AI balance]で確認できます
  • 作りの確認は人の仕事:改善の発表があっても、毎回同じ作りになるとは書かれていません。レイヤーを開いて、線か塗りかを確かめてから納品物に使います

まとめ

今回の改善は、AIが作るベクターを「あとから人が直せる形」に近づけるものです。線は線のまま、レイヤーは整理され、手持ちの絵を参考に数を増やせて、Figma Motionで動かす工程にもつながります。

最初は、絵柄が決まっているアイコンを数個頼むところからがおすすめです。参照を渡して作り、レイヤーを開いて、線の太さを実際に変えてみる。それでクレジットの減り方も分かります。形の意味を決めることと、できたものを確かめることは、人の仕事のままです。

参考・情報源

※ 2026年11月6日に確認した内容です。提供の範囲や画面の名前は変わることがあります。

ふだんの制作の話や、作ったものの裏側は Instagram と X でも出しています。

関連記事

Figma agentの始め方と頼み方(解説)
Figma agentのベクター生成の改善を伝えるアイキャッチ

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

25歳からWEBの世界に携わり、WEBデザインから始めて、今はWEBシステムまで一貫して制作しています。問題点を洗い出し、改善を提案する中で、WEB・グラフィック・動画・システムを縦断して提案するのが得意です。