Figma AI 使用方法｜UI 自动生成与设计工作提效

Figma AI 是集成在 Figma 设计工具中的人工智能功能集合。通过从文本生成 UI、自动整理图层等方式，可大幅缩短制作初稿所需的时间。

本文将详解五大主要功能的使用方法、按行业划分的提示词示例、定价方案以及与其它工具的对比。我们从免费计划中可用的功能开始介绍，让你从今天就能上手使用。

什么是 Figma AI？—— 变革设计工作流的人工智能

关于 Figma

Figma 是一款基于云的设计工具。它涵盖了数字产品设计的全流程，包括 UI/UX 设计、原型设计和设计系统构建。

主要特点：

• 可在浏览器中运行（无需安装）
• 支持多人实时协同编辑
• 提供桌面应用程序
• 提供免费计划

Figma AI 概述

Figma AI 是自 2023 年起逐步推出的 Figma 人工智能功能群。它能够自动化诸如 UI 初稿生成和图层整理等耗时操作。

Figma AI 可实现的功能：

• 根据文本生成 UI 设计（Make Designs）
• 生成和编辑用于设计的图像
• 自动重命名图层名称
• 自动生成占位文本和数据
• 自动创建原型

与传统设计流程的区别

最大的不同在于，从零开始构建形态的工作可以交给 AI 完成。以下是作业时间的估算对比：

节省下来的时间可用于验证创意或打磨细节。能够尝试的方案数量增加，这比单纯的时间缩短更具优势。

Figma AI 的定价方案

各计划对应的功能

要完整使用 AI 功能，需要 Professional 及以上的计划。

免费计划可用功能

即使是免费的 Starter 计划，也可以试用以下 AI 功能。

• 自动重命名图层名称
• 部分内容生成
• Make Designs（有限制次数）

建议先利用免费额度体验手感，当次数限制不够用时再考虑升级到付费计划即可。

Professional 计划的推荐亮点

如果日常业务中使用，Professional 计划（$15/月）是现实的选择。它可以无限制使用 AI 功能，并支持团队协同编辑。

包含的功能：

• 所有 AI 功能无限制使用
• 团队协作
• 版本历史（30 天）
• 共享链接

主要功能 1：Make Designs（UI 设计自动生成）

什么是 Make Designs

Make Designs 是一项根据文本描述生成 UI 设计的功能。作为 Figma AI 的核心功能，它能将设计初稿的制作时间缩短至几分钟。

例如，输入“登录界面，包含邮箱和密码输入框，以蓝色为主色调的现代风格设计”，即可生成符合该条件的登录界面 UI 方案。

使用方法（逐步指南）

步骤1：启动 Make Designs

1. 在 Figma 中打开文件
2. 在画布上右键单击
3. 选择「AI」→「Make Designs」

如果使用快捷键，请按 Command/Ctrl + K 打开搜索框，输入“Make Designs”并选择。

步骤2：输入提示词

输入描述您想要创建的 UI 的文本。

良いプロンプトの例:
「ECサイトの商品詳細ページ、大きな商品画像、
価格と購入ボタン、レビュー星評価、
白背景にオレンジのアクセントカラー」

步骤3：等待生成

几秒钟到十几秒后，将生成多种设计变体。

步骤4：选择与自定义

1. 选择喜欢的的设计
2. 根据需要手动调整
3. 将其组件化以便复用

提示词撰写技巧与示例

提示词若能涵盖“屏幕类型、主要元素、风格、颜色”这四点，准确率会更高。

基本结构：

[画面の種類] + [主要な要素] + [スタイル/トーン] + [カラー]

按行业分类的提示词示例：

电商网站：

商品一覧ページ、カード型レイアウト、
商品画像・名前・価格・お気に入りボタン、
4列グリッド、ミニマルデザイン、
白背景にブラックのテキスト

SaaS 仪表板：

管理画面ダッシュボード、
左サイドバーナビゲーション、
KPIカード4つ、折れ線グラフ、データテーブル、
ダークテーマ、紫のアクセントカラー

移动应用：

フードデリバリーアプリのホーム画面、
検索バー、カテゴリスクロール、
おすすめ店舗カード、下部タブナビゲーション、
明るくフレンドリーな雰囲気、赤とオレンジ

社交/社区平台：

SNSアプリのプロフィール画面、
丸いアバター、フォロワー数、投稿グリッド、
編集ボタン、タブ切り替え、
クリーンでモダン、ブルー系

应避免的提示词

避免使用抽象的指令，请具体写出元素和颜色。

❌ 悪い例:
- 「かっこいいデザイン」（抽象的すぎる）
- 「いい感じのUI」（具体性がない）
- 「モダンな画面」（要素の指定がない）

✅ 良い例:
- 具体的な画面の種類を指定
- 必要な要素をリストアップ
- 色やスタイルを明確に

Make Designs 的应用场景

1. 创意构思与头脑风暴

针对相同需求生成 10 种方案，团队通过讨论确定方向。相比收集手绘草图，能在更短时间内提供多种选择。

2. 客户提案

将需求转化为提示词，生成多个变体作为选项向客户展示。由于有具体方案可供讨论，反馈的准确性会提高。

3. 快速制作原型

通过 AI 生成主要界面并设置页面跳转，即可完成可交互原型。从而缩短用户测试前的准备时间。

主要功能 2：图像生成

Figma 内的图像生成

Figma AI 允许直接在 Figma 内生成用于设计的图像，无需往返于外部图像生成工具之间。

使用方法：

1. 选择要放置图像的框架
2. 右键单击 → 「AI」→「Generate Image」
3. 描述想要生成的图像
4. 从生成的图像中进行选择

提示词示例：

「オフィスで働く若い日本人ビジネスパーソン、
ノートPCを使っている、明るい自然光、
プロフェッショナルな雰囲気」

图像生成的应用场景

1. 用于模拟演示的占位图片

在实际图片尚未准备好时，生成逼真的图片以完成模拟演示。

2. 主视觉图/背景图

生成网站主视觉区域或横幅的背景图像。

3. 图标/插图

生成简单的图标或插图，并将其融入设计中。

注意事项

• 生成图像的使用需遵循 Figma 的服务条款
• 包含人物面部的图像生成精度可能存在波动
• 商用前需确认质量及版权关系

主要功能 3：Auto Rename Layers（图层自动重命名）

为什么图层名称很重要

整理图层名称直接影响团队协作和开发交接的效率。工作中容易积累诸如“Frame 123”、“Group 456”之类的自动命名，若置之不理会导致以下问题：

• 团队协作: 其他设计师无法理解文件内容
• 开发交接: 工程师无法识别组件
• 可维护性: 后续编辑时难以找到目标图层

Auto Rename Layers 的使用方法

步骤1：选择图层

选择需要重命名的图层（支持多选）。

步骤2：执行 AI 重命名

1. 右键单击 → 「AI」→「Rename Layers」
2. 或者，通过菜单「Plugins」→「Rename Layers」

步骤3：确认与应用

查看 AI 建议的名称，若无问题则应用。

重命名示例

変更前 → 変更後

Frame 1234 → Login Button
Group 56 → Header Navigation
Rectangle 789 → Search Input Field
Ellipse 12 → User Avatar

使用技巧

确定执行时机可使操作更加稳定。推荐以下两个时机：

1. 在作业结束时统一执行: 在设计完成后全选所有图层进行批量重命名，可避免工作中的中断。

2. 在开发交接前执行: 在设计定稿时执行，有助于开发人员更好地理解组件名称。

主要功能4：内容生成（Content Generation）

什么是内容生成

这是由AI自动生成设计所需的占位文本和数据的工具。它将您从反复复制“山田太郎”等内容的繁琐工作中解放出来。

可生成的内容：

• 用户名
• 电子邮件地址
• 地址
• 电话号码
• 日期
• 商品名称及说明
• 评论文本

使用方法

在文本图层中使用：

1. 选择文本图层
2. 右键单击 → “AI” → “Generate Content”
3. 选择要生成的内容类型

结合重复网格（Repeat Grid），可以批量生成大量占位数据。

应用场景

用户列表：

田中太郎 → 鈴木花子 → 佐藤健一 → ...
tanaka@example.com → suzuki@example.com → ...

商品列表：

商品名: オーガニックコットンTシャツ
価格: ¥3,980
レビュー: 「肌触りが良く、着心地抜群です」

社交媒体帖子：

ユーザー名: @design_lover
投稿: 「今日は新しいプロジェクトに着手。楽しみ！」
いいね: 234
コメント: 18

主要功能5：自动布局建议（Auto Layout Suggestions）

什么是自动布局（Auto Layout）

自动布局是Figma中用于自动对齐和排列元素的功能。它是响应式设计的基础，但手动设置较为耗时。

AI驱动的自动布局建议

Figma AI会分析现有设计并建议应用自动布局。选中框架后，AI会提供内边距（Padding）和间距（Gap）的设置方案，您可以直接应用或进行自定义调整。

减少了手动设置的麻烦，加快了响应式设计的初始配置速度。

实际工作流

流程1：新项目启动

这是一个在3天内完成原型设计的示例流程。

第1天：需求整理与头脑风暴

以文本形式整理需求，使用Make Designs生成10个方案。团队进行评审，并将方向缩小至3个。

第2天：细化设计

基于选定的方向制作详细设计并进行组件化。使用Auto Rename Layers进行整理，并通过Content Generation添加占位数据。

第3天：原型设计与评审

设置屏幕跳转，完成可交互原型。进行利益相关者评审并反映反馈。

流程2：改进现有设计

在分析当前设计的基础上，使用Make Designs生成改进方案。将好的创意融入现有设计中，并创建用于A/B测试的变体。

流程3：构建设计系统

使用Make Designs生成主要组件，确认并调整统一性。通过Auto Rename Layers统一命名规范，并将其制作为组件库。

高效的提示词编写技巧

提示词的基本结构

对于信息量大的界面，有意识地注重结构编写可以使输出结果更稳定。

[画面タイプ] + [主要コンテンツ] + [レイアウト] + [スタイル] + [カラー]

详细的提示词模板

落地页（Landing Page）：

SaaSプロダクトのランディングページ、
ヒーローセクション（キャッチコピー + CTA）、
特徴セクション（3カラム）、
料金プランセクション（3プラン比較表）、
FAQセクション（アコーディオン）、
フッター、
ミニマルでプロフェッショナル、
ネイビーと白

管理后台：

プロジェクト管理ツールのダッシュボード、
左サイドバー（ナビゲーション + ユーザー情報）、
ヘッダー（検索 + 通知 + プロフィール）、
メインエリア（KPIカード4つ、タスクリスト、カレンダー）、
モダンでクリーン、
ライトグレー背景、ブルーアクセント

移动应用：

ヘルスケアアプリのホーム画面（iPhone 14サイズ）、
上部に今日の目標達成率（円グラフ）、
アクティビティサマリー（歩数、消費カロリー、心拍数）、
週間トレンドグラフ、
下部タブナビゲーション、
フレンドリーで明るい、グリーン系

日语 vs 英语

虽然支持日语，但在某些情况下英语的精度更高。这通常是因为在指定细微差别时，英语更具优势。

推荐的方法：

1. 首先尝试日语
2. 如果结果不符合预期，再尝试英语
3. 两者都试一下，采用效果更好的那一个

与其他AI工具的协作

Figma + ChatGPT/Claude

文本类AI在提示词创作和文案撰写方面非常有用。

用法1：创建提示词

请ChatGPT“为EC网站的商品详情页创建一个适合输入给Figma AI的高效提示词”，然后将回答输入到Figma AI中。

用法2：文案撰写

在使用Figma AI生成UI后，用ChatGPT创建UI所需的文案，然后将其放置到Figma中。

Figma + Midjourney/DALL-E/Firefly

如果需要更高质量的图片，建议配合专门的图像生成工具使用。例如，使用Midjourney或Firefly生成图片，然后将其放置到Figma中并整合到UI设计中。如果是制作样机（Mockup），Figma内置的图片生成功能往往就足够了，因此可根据目的灵活选择。

Figma + GitHub Copilot

它还可以作为从设计到开发的桥梁。开发者参考Figma中完成的设计，并在GitHub Copilot的辅助下编写代码，从而高效地实现与设计一致的UI。

推荐的AI兼容插件

Magician

功能：

• AI驱动的设计生成
• 文案撰写
• 图标生成

费用：免费（部分付费）

Automator

功能：

• 工作流自动化
• 提高重复性工作的效率

费用：免费

Content Reel

功能：

• AI驱动的内容生成
• 批量生成占位数据

费用：免费

Unsplash

功能：

• 搜索和插入高质量免费图片
• AI图像搜索

费用：免费

Figma AI vs 其他设计AI

对比表

在UI/UX设计与开发协作方面，Figma AI具有优势。如果主要目的是图像生成，则其他工具更为合适。

使用指南

Figma AI

• 专业的UI/UX设计
• 团队协作
• 与开发团队的协作
• 构建设计系统

Framer AI

• 无代码网站制作
• 落地页
• 作品集网站

Canva AI

• 营销素材
• 社交媒体图片
• 演示文稿

Adobe Firefly

• 图像生成与编辑
• 与Photoshop的集成
• 商业使用（版权清晰）

常见问题（FAQ）

Q1. Figma AI可以免费使用吗？

A. 部分功能在免费计划中也可使用。包括图层名自动重命名、部分内容生成以及有限次数的Make Designs。若要无限制使用Make Designs等所有AI功能，则需要付费计划（$15/月起）。

Q2. 支持日语提示词吗？

A. 支持。不过，在处理复杂指令时，使用英语可能会得到更好的结果。简单的指令可以用日语，如果精度不够，再尝试英语是比较实用的做法。

Q3. 生成设计的版权归属如何？

A. 根据Figma的使用条款，生成的设计可由用户自由使用，包括商业用途。

注意事项：

• 避免使用模仿知名品牌的提示词
• 涉及人物面部的图片需注意版权问题

Q4. AI生成的设计可以直接使用吗？

A. 可以作为草稿使用，但正式投入使用前需要进行定制。AI旨在提高效率，实现从0到1的突破，而最终的质量保证仍需设计师来完成。以“生成→调整→完成”的流程来使用是最现实的。

Q5. 设计师的工作会被AI取代吗？

A. 常规性工作会被替代，但设计师的角色不会消失。AI擅长的是自动化常规工作和生成大量变体。

另一方面，理解业务课题、共情用户、设计品牌体验以及评估和调整AI输出结果，仍然是人类的工作。越是能熟练运用AI的设计师，越能将时间投入到这些上游的高价值工作中。

总结

Figma AI 是一组用于自动化设计初稿制作和简单重复工作的 AI 功能。在引入时，请注意以下四点：

1. 主要功能: Make Designs（UI 生成）、图像生成、Auto Rename Layers（自动重命名图层）和内容生成这四项是核心功能
2. 提示词: 具体描述屏幕类型、元素、风格和颜色。如果效果不佳，可以尝试使用英文
3. AI 的定位: 生成的内容仅作为草稿，最终质量需由设计师来保障
4. 工具协作: 提示词创作可使用 ChatGPT/Claude，高质量图像可结合 Midjourney/Firefly 使用

建议先从免费计划开始，在小项目中尝试 AI 功能。