感兴趣可以下载文件。链接: https://pan.baidu.com/s/15RysU06FAsRQZlbXwTgM6w 提取码: r6g0

Text Field 的组成部分：

Text Field（文本域） 的组成部分可分为：State(状态)、Border（边界）、Label（文本标签）、Right Icon（右边图标）、Left Icon（左边图标）、Placeholder（占位符）、Help Text（帮助文本） 等。

State（状态）可以分为：Default（默认）、Hover（悬停）、Focus（焦点）、Disabled（禁用）、Validated（已验证）、Invalid（无效） 等。

Border：根据需求定制。

而 Label、Right Icon、Left Icon、Placeholder 则设置成布尔值。

组件的结构如图：

Text Field 组件一般要求左右伸缩自如，所以设计流程请看下面。

field 的设计流程的细节说明：

重点讲field 的设计，因为其他东西都是很基础的，不赘述。

1.左边部分包含左边图标和占位符，设自动布局。右边部分是右边图标。它们在同一个容器内，也就是在同一个frame，frame 的约束设 Left and right。如图，看 Frame 7 的约束设置。（提示：图标数量请根据业务需求增删，这里不赘述）

2.上述的容器再嵌套在另一容器（可以右键 Frame selection 或快捷键实现操作），如图 Frame 8。然后把 Label（文本标签）和 Helptext（帮助文本）和 field 设成自动布局，自动布局。因为 field 现在在自动布局内，所以才能设置水平方向 Fill container（填充容器） 和垂直方向 Fixed（固定），如图 Frame 8 的 Frame 设置。Text Field 的自动布局设置水平方向 Fixed（固定） 和 垂直方向 Hug contents。

最后

主组件设计好后，接下来增加变体，设置属性就行了，这里不赘述。figma 的组件的优势是父子组件关系，所以父组件的设计完成度很重要，而变体是根据你的父组件改变的，变体属性则根据你的需要（状态、边界、占位符）设置。

变体如下图。

以上。