SECTION 25

Figma AIデザイン生成
と開発連携

AIで加速するUIデザインワークフロー。
デザインから実装コードまでをシームレスにつなぐ。

calendar_today2026年 LCREATOR.Inc Google AI 研修プログラム

SECTION 25

Figmaとは — UIデザインの業界標準ツール

01 / 28

Figmaの定義

ブラウザで動作するクラウドネイティブなUIデザインツール。リアルタイム共同編集に対応し、デザイン・プロトタイプ・開発連携を一つのプラットフォームで実現する。

4M+

月間アクティブユーザー

No.1

UIデザインツール世界シェア

layers FrameA

crop_square Button

title Heading

image Image

サンプルUI

ボタン

W320px

H240px

Fill#FFFFFF

Radius8

SECTION 25

Figmaの主要機能：4つの柱

02 / 28

design_services

デザイン

ベクター編集・Auto Layout・コンポーネント管理

play_arrow

プロトタイプ

インタラクション・アニメーション・共有プレビュー

psychology

AI機能

Make Design・自動リネーム・背景除去・テキスト生成

code

Dev Mode

CSS/コードエクスポート・開発者向けスペック表示

info

2023年のFigma Config発表以降、AI機能が急速に拡充。FigJamとの統合も進み、ブレインストーミングからコーディングまで一貫して対応できるようになった。

SECTION 25

プロトタイプ作成：インタラクティブデザイン

03 / 28

プロトタイプの3種類

クリック遷移：画面間のナビゲーションを再現
スマートアニメーション：要素の自然な動き
インタラクション：ホバー・ドラッグ等の操作

check_circle

プロトタイプをステークホルダーと共有するだけで、開発前にUI/UXの課題を発見できる。手戻りコストを大幅に削減。

プロトタイプの作成手順

1

フレームを複数作成

各画面（ホーム・詳細・確認等）をフレームとして用意

2

プロトタイプパネルに切替

右パネルの「プロトタイプ」タブを選択

3

矢印で画面を接続

ボタン等からドラッグして遷移先フレームに接続

4

プレビューで確認・共有

プレゼントアイコンからURLを発行してチーム共有

SECTION 25

デザインシステム：コンポーネント管理

04 / 28

デザインシステムとは

再利用可能なコンポーネント・スタイル・パターンの集合体。ボタン・カード・フォームなどをライブラリ化し、チーム全体で一貫したUIを維持する。

Figmaでの実装方法

コンポーネント化（Ctrl+Alt+K）
バリアント設定でサイズ・状態を管理
チームライブラリで全プロジェクト共有
Auto Layout で余白・整列を自動調整

要素	Figmaの機能	効果
色	カラースタイル	一括変更対応
テキスト	テキストスタイル	フォント統一
アイコン	コンポーネント	再利用性向上
余白	Auto Layout	レスポンシブ対応
状態	バリアント	管理の効率化

Figma AI機能

Make Design・自動リネーム・背景除去・テキスト生成

SECTION 25 — AI機能

Make Design：AIによるUI生成

06 / 28

Make Designとは

自然言語のプロンプトを入力するだけで、Figmaが自動的にUIフレームを生成するAI機能。ワイヤーフレームから本番品質のデザインまで対応。

効果的なプロンプト例

"モバイル向けのログイン画面。
メールとパスワードの入力欄、
ログインボタン、
Googleでログインボタンを含む
ミニマルデザイン"

warning

生成結果は必ず人間がレビューして調整する。完成品ではなく「出発点」として活用するのがベストプラクティス。

活用シーン

アイデア初期探索・コンセプト検討
クライアントへの方向性提案
ワイヤーフレームの素早い作成
デザインバリエーションの比較検討

時間削減効果

80%

初期ワイヤーフレーム時間削減

SECTION 25 — AI機能

Rename Layers：AI自動リネーム

07 / 28

よくある問題

「Rectangle 1」「Group 45」「Frame 123」のような意味のないレイヤー名は開発連携時に混乱を招き、CSS生成の精度も下がる。

AIリネーム後

/* Before */
Rectangle 1
Group 45
Frame 123

/* After (AI自動リネーム) */
hero-background
nav-container
login-button

使い方

1

レイヤーを選択

まとめてリネームしたいレイヤーを複数選択

2

右クリックメニュー

「Rename with AI」を選択

3

確認・適用

AIが提案した名前を確認して一括適用

lightbulb

開発連携前に必ずリネームすることで、Dev ModeでのCSS変数名・コンポーネント名が自動的に意味のある名前になる。

SECTION 25 — AI機能

Remove Background：AI背景除去

08 / 28

1クリック

操作数

数秒

処理時間

無料

Professional以上で利用可能

使い方

画像レイヤーを選択
右パネルの「Remove background」ボタンをクリック
AIが自動的に背景を除去・透過PNG化
必要に応じてマスクで微調整

活用シーン

製品写真の背景を除去してUI上に配置
人物写真を透過させてカードUIに合成
ロゴ・アイコンの白背景を除去
SNSバナー・広告素材の作成

warning

複雑な背景（毛・透明素材等）は精度が落ちる場合がある。重要な素材は別途確認を。

SECTION 25 — AI機能

Text Generation：AIテキスト生成

09 / 28

Figma AIテキスト生成の特徴

テキストレイヤーを選択して右クリックするだけで、コンテキストに合ったダミーテキストや実際のコピーをAIが生成。Lorem Ipsumからの脱却。

生成できるテキスト種類

ヘッドライン・キャッチコピー
説明文・ボディコピー
ボタンラベル・CTA文言
ナビゲーションメニュー名

実際の活用例

テキスト要素	従来	AI生成後
見出し	テキストテキスト	業務効率を3倍に
説明文	Lorem ipsum...	AIが自動で最適な文章を生成します
ボタン	Button	無料で始める

lightbulb

プロジェクトの目的・対象ユーザーをFigmaのプロジェクト説明に記入しておくと、よりコンテキストに合ったテキストが生成される。

開発連携

Dev Mode・CSS出力・Figma to HTML ワークフロー

SECTION 25 — 開発連携

Dev Mode：開発者向けモード

11 / 28

Dev Modeとは

デザインを「開発者視点」で確認するための専用モード。デザイン仕様（サイズ・余白・色・フォント）をコード形式で確認できる。

主な機能

CSS・SwiftUI・Jetpack Compose等のコード出力
要素間の距離・余白の自動計測
アセットのワンクリックダウンロード
コンポーネントのドキュメント表示

Button

W: 80px / H: 32px

CSS

.button {
 width: 80px;
 height: 32px;
 background: #4285F4;
 border-radius: 4px;
}

info

Dev Modeは Professional プラン以上の閲覧者には無料で提供される（2024年〜）。

SECTION 25 — 開発連携

CSS・コードエクスポート

12 / 28

対応するコード形式

CSS Web（全般）
SwiftUI iOS / macOS
Compose Android
Flutter クロスプラットフォーム

warning

生成されたCSSは出発点。フレームワーク固有の記述（Tailwind、CSS Modules等）への変換は別途必要。

CSS出力例

CSS
/* ヘッダーコンポーネント */
.header {
 display: flex;
 align-items: center;
 padding: 16px 24px;
 background: #FFFFFF;
 box-shadow: 0 1px 3px rgba(0,0,0,.1);
 font-family: 'Inter', sans-serif;
 font-size: 16px;
 font-weight: 600;
 color: #202124;
}

check_circle

カラースタイル・テキストスタイルを事前に定義しておくと、変数（CSS Custom Properties）形式でエクスポートできる。

SECTION 25 — 開発連携

Figma → HTML変換ワークフロー

13 / 28

design_services

Figmaデザイン

arrow_forward

code

Dev Mode確認

arrow_forward

download

アセット書き出し

arrow_forward

psychology

AI実装支援

arrow_forward

web

HTMLコーディング

arrow_forward

check_circle

デザインQA

AI実装支援ツール

GitHub Copilot：FigmaのCSSをベースにコード補完
Gemini：スクリーンショットからHTML生成
Claude：デザイン仕様書を読ませてコーディング
Cursor：Figma連携プラグインで直接連携

デザインQAのポイント

Figmaのデザインと実装を並べてピクセル比較
フォントサイズ・行間・色の確認
レスポンシブ対応のブレークポイント確認
インタラクション・ホバー状態の動作確認

SECTION 25 — ハンズオン

ハンズオン：FigmaでシンプルなUIをデザイン

15 / 28

作業内容（40分）

1

Figmaアカウント準備（5分）

figma.com で無料アカウント作成、またはログイン

2

Make Designで生成（10分）

「ログイン画面モバイルアプリ」のプロンプトでUI生成

3

AI機能を体験（10分）

自動リネーム・テキスト生成・背景除去を試す

4

Dev Modeで確認（10分）

CSS出力を確認してHTMLファイルに貼り付けてみる

5

共有・発表（5分）

プロトタイプのURLをチームで共有して感想共有

使用するFigma機能一覧

機能	場所
Make Design	メニュー > AI
Rename Layers	右クリック > AI
Remove Background	右パネル > 塗り
Text Generation	右クリック > テキスト
Dev Mode	右上トグル

lightbulb

Figmaは無料プランでも今日紹介したAI機能を試用できる。まずは触って感覚をつかもう。

open_in_new

参考URL: figma.com/ai — Figma AI機能の公式ドキュメント

SECTION 25

Section 25 まとめ

16 / 28

design_services

Figma基本

UIデザインの業界標準ツール
コンポーネント・デザインシステム管理
インタラクティブなプロトタイプ作成

psychology

AI機能

Make Design：プロンプトでUI生成
自動リネーム・背景除去・テキスト生成
デザイン工数を大幅に削減

code

開発連携

Dev Mode でCSS・仕様をコード出力
デザインと実装のギャップを縮小
AI実装支援ツールと組み合わせ最適化

FigmaのAI機能はデザイナーだけのものではない。エンジニア・企画・マーケターが活用することで、チーム全体のデジタル制作スピードが加速する。

Section 25 完了

Figma AIを活用したデザイン生成・開発連携ワークフローを学びました。
次のセクションでは更に発展した AI 活用テーマを扱います。

arrow_forward Section 26 へ進む

AI機能

4種類

開発連携機能

3つ

ハンズオン

1本

Figma AIデザイン生成と開発連携

Figmaとは — UIデザインの業界標準ツール

Figmaの主要機能：4つの柱

デザイン

プロトタイプ

AI機能

Dev Mode

プロトタイプ作成：インタラクティブデザイン

プロトタイプの3種類

フレームを複数作成

プロトタイプパネルに切替

矢印で画面を接続

プレビューで確認・共有

デザインシステム：コンポーネント管理

デザインシステムとは

Figmaでの実装方法

Figma AI機能

Make Design：AIによるUI生成

効果的なプロンプト例

活用シーン

時間削減効果

Rename Layers：AI自動リネーム

よくある問題

AIリネーム後

レイヤーを選択

右クリックメニュー

確認・適用

Remove Background：AI背景除去

使い方

活用シーン

Text Generation：AIテキスト生成

Figma AIテキスト生成の特徴

生成できるテキスト種類

開発連携

Dev Mode：開発者向けモード

主な機能

CSS・コードエクスポート

対応するコード形式

CSS出力例

Figma → HTML変換ワークフロー

AI実装支援ツール

デザインQAのポイント

ハンズオン：FigmaでシンプルなUIをデザイン

Figmaアカウント準備（5分）

Make Designで生成（10分）

AI機能を体験（10分）

Dev Modeで確認（10分）

共有・発表（5分）

使用するFigma機能一覧

Section 25 まとめ

Figma基本

AI機能

開発連携

Section 25 完了

Figma AIデザイン生成
と開発連携