Figma AI输入框无提示？手动补全Placeholder样式指南

在Figma中使用AI插件生成输入框组件时，常遇到缺少占位符提示文字，或文本样式与现有设计系统不一致的问题。这并非插件“偷懒”，而是AI未能准确识别所需的语义标签、继承已定义的文本样式，甚至在提示词中遗漏了占位符描述。解决方法其实不复杂，以下套路能快速修正。

一、精准描述placeholder内容与样式，纳入提示词

不要指望AI自行推测输入框需要何种占位符提示。必须给出结构化指令，强制它写入占位符信息，并绑定当前项目中的文本样式规则，确保生成结果既符合语义也保持视觉一致性。

具体操作：在First Draft或Galileo AI插件的输入框中，写入完整指令，例如：“生成一个登录表单，包含邮箱输入框，其placeholder显示‘请输入您的企业邮箱’，字体为Inter Regular 14px，颜色为#9CA3AF，且该文本需应用已存在的‘Text/Placeholder’样式。”如果项目文件中尚未建立此文本样式，先在本地样式面板中新建，命名为“Text/Placeholder”，并让字号、字重、行高、颜色与设计系统对齐。生成后立即检查输入框的Frame内部是否有一个独立文本图层，内容为你指定的字符串，图层名称正好是“placeholder”，且样式引用状态为“Text/Placeholder”（而非“Local override”）——这一步是防止后续样式跑偏的关键。

二、手动补充占位符文本，绑定语义化命名与约束

AI有时仅输出基础矩形加一个光标图层，完全缺失文本元素。此时需要人工插入占位符文本，并通过规范的命名和约束配置，确保后续复用中不会因Auto Layout挤变形或位置偏移。

步骤：选中输入框的Frame，在左侧图层面板右键选择“Add text”，输入占位符内容，例如“搜索商品名称”。然后把这个新文本图层重命名为placeholder，再拖到输入框Frame的最底层（确保不遮挡光标和边框）。接下来设置图层的Constraints：水平方向设为Left (24px) & Right (24px)，垂直方向设为Top (12px)，确保与内边距基准线对齐。最后在右侧属性面板中点击“Text style”下拉菜单，选择预先定义好的Text/Placeholder样式，并关闭“Override font”选项——这样字体就不会被意外覆盖。

三、利用组件变体统一管理placeholder状态切换

当输入框需要在不同交互状态下（空值、聚焦、禁用等）正确显示或隐藏placeholder时，应将其制作为带状态变体的组件。借助布尔属性控制可见性，比手动切换图层可见性更高效稳定。

具体做法：全选输入框Frame及其内部所有图层（包括border、cursor、label、placeholder），右键选择“Create Component”。在组件画布中点击顶部的“+ Variant”，新增两个变体，分别命名为Default / Placeholder Visible和Focused / Placeholder Hidden。第一个变体中保持placeholder图层visible为true；第二个变体中将placeholder图层的opacity设为0，并勾选“Hidden when collapsed”选项。最后为组件添加一个Boolean属性，命名为showPlaceholder，并将该属性绑定到placeholder图层的Visible属性上。如此一来，状态即可自动驱动显隐，后续复用非常可靠。

来源：互联网