Figma Make：可复用 Prompt 把设计图画“准”

一、为什么我们要开始整理一套「组件提示词库」？

过去我们用 Figma 、Axure手动画原型，效率低更多是------手没跟上脑子：

想法不断冒出来，但拖框、对齐、间距都要自己一点点做，思绪飞得很快，手速总是慢半拍。

而现在有了 Figma Make，情况刚好反过来：脑子没想清楚，AI 就跟着一起乱画。

我在使用Figma Make进行设计时，典型的翻车是这样的：

想做一个标准的表单卡片，结果生成时：表单标题、字段、按钮全挤在页面顶部，看起来头重脚轻。
想做一个带 Stepper 的 10 步流程，AI 听完提示后：要么只画了 4、5 步；要么 Step 名称和页面内容完全对不上。

在前两篇文章中，我们已经聊过：

怎么用 Prompt 固定页面的整体布局（例如：左侧导航 + 中间列表 + 右侧详情）；
怎么在 Figma Make 里优先描述页面级结构，再让 AI 去填充细节。

这一篇开始，我们要做的是：积累组件元素描述提示词。

建议你在用本文这些组件 Prompt 之前，先给页面写一段"**整体布局 Prompt"**当基础，会更稳（可以参考前两篇文章中的Prompt模板）。

二、进度 & 控件类组件

2.1 Stepper：多步骤流程的"进度总览"

适用场景

任何"有明显步骤"的操作都适合用 Stepper，比如：

线上购物：选商品 → 确认购物车 → 填写地址 → 选择配送方式 → 支付完成
填写多页表单：基本信息 → 联系方式 → 额外选项 → 确认提交
注册引导：创建账号 → 填写资料 → 设置偏好 → 完成

比如下图就是一个进度条样式。

Prompt 示范：线上购物进度条

在页面顶部**（位置）** 添加一条水平流程 Stepper，居中对齐，共 5 个等距节点（节点数 ）。

将 Step1--Step5 分别与第 1--5 个节点绑定，用于表示当前所在步骤，随页面切换高亮对应节点。

每个节点下方显示步骤名称（节点名称 ）：

1）选择商品

2）确认购物车

3）填写地址

4）选择配送方式

5）支付完成

节点状态 样式：

已完成步骤节点：

使用蓝色描边圆圈，中间带对勾图标，步骤名称文字为深色。

当前步骤节点：

使用实心蓝色圆点或高亮描边，步骤名称加粗。

未开始步骤节点：

使用浅灰描边圆圈，内部为空，步骤名称文字为中灰色。

使用一条浅灰细线连接各个节点，表示流程顺序。

通用Stepper模板结构：

顶部 + 水平 + 节点数量
再给出节点名称列表
最后分别描述三种状态的样式

这样 Stepper 的生成稳定性会高很多。

2.2 Toggle：两个按钮二选一的"单选框"

适用场景

同意 / 拒绝
是 / 否
开启 / 关闭

用两个普通按钮容易让用户误解为"可以全选"，用单选框又不够强调，非常"老派"。

这时候可以用 Toggle 类型的按钮组来做明显的二选一。

如下图，就是一个Toggle类型的按钮，只能选中其中的一个选项。

Prompt 示范：Approve / Reject Toggle

将「Approve」与「Reject」两个按钮设置为同一 Toggle 组件组，实现二选一效果。

交互与样式说明：

1）默认状态 ：

两个按钮均为浅灰边框、浅灰背景，文字为中灰色。

表示当前尚未做出选择。

2）选中状态 ：

当用户选中「Approve」时：

「Approve」按钮边框使用品牌蓝色，高亮背景为白色，文字为深色。

「Reject」按钮恢复为浅灰边框 + 浅灰背景。

当用户选中「Reject」时，样式反之。

3）切换规则 ：

任意时刻仅允许一个按钮处于选中状态。

再次点击已选中的按钮不会取消选择，只能切换到另一侧按钮。

通用Toggle 结构：

要强调【同一 Toggle 组件组】
明确选中/未选中两种视觉状态
明确"不可全部不选"的规则

三、表单 & 输入类组件

3.1 表单卡片（Form Card）：信息+操作的组合容器

卡片几乎无处不在：

PC / Web：设置面板、信息填写区
App：推荐卡片、列表卡片、详情卡片

表单卡片可以理解为："一块白色的、稍稍浮起的区域，用来承载一组字段 + 提交按钮"。

这里用一个非常常见的场景：库存核查表单。

Prompt 示范：收货地址表单卡片

在中间主内容区域创建一张表单卡片，用于填写收货地址：

1）卡片整体

使用白色背景，圆角 12px，带轻微阴影或浅色描边。

卡片与页面背景之间保留适当留白，使卡片从底色中"浮起来"。

2）标题区域

卡片顶部放置标题文本，例如「填写收货地址」或「编辑个人资料」。

标题左对齐，字号略大并加粗，下方留出 8--12px 间距与字段区分开。

3）字段区域

字段采用一列或两列布局，示例字段包括：

收件人姓名

手机号

所在城市（下拉框）

详细地址（多行文本）

每个字段由 Label 和输入框组成：

Label 使用中灰小字号，靠近输入框上方，左对齐。

输入框为白底圆角矩形，边框为浅灰色，获得焦点时边框变为品牌色。

4）底部按钮区

在卡片底部右侧放两个按钮：

左侧为灰色次按钮「取消」。

右侧为蓝色主按钮「保存」或「保存并继续」。

两个按钮之间保持适当水平间距，并与卡片右边缘对齐。

通用"表单"句式：

只改标题 + 字段列表 + 按钮文案，就能高复用。

3.2 时间选择器（DatePicker）：别让日期字段掉线

日期选择器是一个容易被 Figma Make 简化掉的组件：

如果你只写"加一个日期输入框"，AI 很可能只画出一个普通的文本框。

而实际上时间选择器以输入框的形式展现，点击后能够显示日历选择面板。如下图所示。

我们希望的时间选择器是：

有统一样式（圆角、字体、hover / focus 状态）；
右侧有日历图标；
点击图标或输入框可以弹出日历面板；

Prompt 示范：带日历图标的 DatePicker

在当前页面中，为「字段」下增加一个日期选择器（DatePicker），其他组件一律不变。

1）输入框样式

去掉边框（border = none），设置圆角为 12px。

保持高度、字体、背景色、左右间距与页面中其他文本输入框完全一致。

2）占位符与显示格式

将 placeholder 从「年/月/日」改为英文「month/day/year」。

用户选择日期后，输入框内以 `MM/DD/YYYY` 格式显示，例如：`01/06/2026`。

3）日历图标

将日历图标放在输入框内部最右侧，距右边内侧 12px，垂直居中。

图标点击区域可点击，点击图标或输入框都可打开日历面板。

图标大小与页面其他图标一致，颜色用中性灰色。

4）状态与交互（保持统一风格）

hover 时，输入框可轻微变亮或加细描边，与其他输入框 hover 状态一致。

focus 时，用统一的高亮/阴影样式表示聚焦，不改变圆角。

选择日期后关闭日历面板，显示选中日期，整体风格简洁、干净。

四、反馈 & 弹层组件：Toast / 弹窗

4.1 Toast：轻量、不打断的操作反馈

典型场景

加入购物车
保存成功
提交成功 / 发送成功

Toast （如下图所示）的特点是：提醒而不打断，所以：

一般出现在页面边缘（右上角比较常见）；
停留时间短（2--3 秒）；
多个 Toast 出现时要有合理堆叠/合并策略。

Prompt 示范：右上角操作成功 Toast

在页面右上角显示 Toast 提示，用于反馈轻量操作结果：

Toast 使用白色或浅灰背景，圆角约 10px，带轻微阴影。

左侧是一个小图标，例如购物车对勾或通用对勾图标。

右侧是提示文案：已加入购物车。

Toast 高度约 56px，宽度约 320px，内容左右内边距适中，排版紧凑。

单条 Toast 显示约 3 秒后自动淡出。

同一时间最多显示 3 条 Toast，超过 3 条时合并为一条聚合提示（例如「还有 3 条新通知」）。

Toast 提示，只需改变提示文案，或者进行轻量的样式的修改就能够直接复用在下次的界面中。