Figma AI活用ガイド：デザインワークフローを変える新機能まとめ

FigmaのAI機能とは

Figmaは2024年以降、AIを積極的に統合しています。単なるデザインツールから「AIアシスタント付きデザインプラットフォーム」へと進化しました。

これらのAI機能は、デザイナーの創造的な作業を支援するだけでなく、エンジニアとの連携もスムーズにします。

AI機能一覧

| 機能 | 用途 | 対象 | |------|------|------| | Visual Search | デザインの類似パターン検索 | デザイナー | | Rename Layers | レイヤー名の一括自動整理 | デザイナー | | Text Populate | ダミーテキストをAIで生成 | デザイナー | | Make Design | プロンプトからデザイン生成 | デザイナー | | Make Prototype | 自動でプロトタイプ接続 | デザイナー | | Dev Mode | デザインからコード変換 | エンジニア |

Make Design：プロンプトからデザイン生成

基本的な使い方

フレームを選択し、右クリック → 「Make Design」でAIデザイン生成パネルが開きます。

「SaaSのランディングページ。ヒーローセクションに大きな見出しと
CTAボタン。紫とグレーの配色。モダンでクリーンなデザイン。」

AIがフレーム内にデザインを生成します。テキスト・画像・ボタン・レイアウトが自動的に配置されます。

効果的なプロンプト

✗ 「かっこいいデザイン」

✓ 「ECサイトの商品詳細ページ。
   左半分に商品画像ギャラリー（メイン画像 + サムネイル4枚）。
   右半分に商品名、価格、サイズ選択、カートに追加ボタン。
   白背景、黒テキスト、アクセントカラーはオレンジ。
   フォントはサンセリフ。」

既存デザインの活用

既存のデザインコンポーネントを参照させることで、デザインシステムに沿った生成が可能です。

「DesignSystemページのCardコンポーネントを使って、
 チームメンバー一覧のセクションを作って」

Rename Layers：レイヤー名の自動整理

デザイナーなら共感するはず。気がつくとFrame 427やRectangle 89で溢れるレイヤーパネル。

使い方

整理したいレイヤーを選択（複数選択可）
右クリック → 「Rename Layers」
AIがコンテンツに基づいてレイヤー名を自動生成

Before:
  Frame 427
    Rectangle 89
    Text 142
    Frame 428
      Image 55

After:
  hero-section
    background-overlay
    heading-text
    cta-container
      product-image

エンジニアへの引き渡し前にレイヤー名を整理すると、Dev Modeでの作業効率が格段に上がります。

Text Populate：AIテキスト生成

デザインモックアップのダミーテキストを、文脈に合ったリアルなテキストに自動置換します。

使い方

テキストレイヤーを選択し、右クリック → 「Text Populate」

プロフィールカードのダミーテキスト：
  名前 → 「田中 美咲」
  肩書き → 「UIデザイナー / フロントエンドエンジニア」
  自己紹介 → 「5年の実務経験を持つデザインエンジニア。...」

Lorem ipsumの時代は終わりました。リアルなテキストでデザインの完成度が上がります。

Make Prototype：自動プロトタイプ接続

デザインフレーム間のプロトタイプ接続を自動で行います。

使い方

複数のフレーム（画面）を選択
右クリック → 「Make Prototype」
AIがボタンやリンクを認識し、画面遷移を自動設定

手動で1つずつインタラクションを設定する手間が大幅に削減されます。

Dev Mode：エンジニア向けAI機能

Dev Modeは、デザインからコードへの変換をAIが支援する機能です。

コードスニペットの生成

コンポーネントを選択すると、AIがコードを提案します。

// FigmaのDev Modeが提案するコード例
<Card className="w-[380px]">
  <CardHeader>
    <CardTitle>チームメンバー</CardTitle>
    <CardDescription>
      プロジェクトに参加しているメンバー一覧
    </CardDescription>
  </CardHeader>
  <CardContent>
    <div className="flex items-center space-x-4">
      <Avatar>
        <AvatarImage src="/avatars/01.png" />
        <AvatarFallback>TM</AvatarFallback>
      </Avatar>
      <div>
        <p className="text-sm font-medium">田中 美咲</p>
        <p className="text-sm text-muted-foreground">
          UIデザイナー
        </p>
      </div>
    </div>
  </CardContent>
</Card>

VS Code連携

Figma for VS Code拡張機能を使えば、エディタ内でFigmaのデザインを確認しながらコーディングできます。

CSSの自動抽出

コンポーネントのスタイルがCSS / Tailwind CSSとして自動抽出されます。

/* CSS */
.card {
  width: 380px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 24px;
}

/* Tailwind CSS */
className="w-[380px] rounded-xl shadow-sm p-6"

デザイナー × エンジニアの連携フロー

FigmaのAI機能を活用した理想的なワークフローを紹介します。

1. デザイナーの作業

① Make Designで初期デザインを生成
② 手動でブラッシュアップ
③ Rename Layersでレイヤー名を整理
④ Text Populateでリアルなテキストに置換
⑤ Make Prototypeで画面遷移を設定

2. エンジニアの作業

① Dev Modeでデザインを確認
② AIが提案するコードスニペットをベースに実装
③ CSSの自動抽出でスタイリングを効率化
④ VS Code連携でデザインを参照しながらコーディング

料金とAI機能の利用

FigmaのAI機能はプランによって利用可能範囲が異なります。

| プラン | AI機能 | |--------|--------| | Starter（無料） | 限定的 | | Professional | 全AI機能利用可 | | Organization | 全AI機能 + 管理機能 |

注意点

生成精度

AIが生成するデザインは完璧ではありません。あくまで「たたき台」として使い、デザイナーの手で仕上げることが前提です。

デザインシステムとの整合性

AI生成のデザインが既存のデザインシステムに準拠しない場合があります。生成後にトークンやスタイルの調整が必要です。

著作権

AIが生成したデザインの著作権については、Figmaの利用規約を確認してください。

まとめ

FigmaのAI機能は、デザイナーとエンジニアの両方の生産性を向上させます。

Make Design：プロンプトからデザインを生成
Rename Layers：レイヤー名を自動整理
Text Populate：リアルなダミーテキストを生成
Make Prototype：画面遷移を自動接続
Dev Mode：デザインからコードを提案

デザインツールにAIが統合されることで、「デザイン × プログラミング」の連携がかつてないほどスムーズになっています。