Figma 组件:命名最佳实践265
组件是 Figma 的强大功能,可帮助您在设计过程中创建和重复使用可重用元素。为组件选择正确的名称至关重要,因为它可以提高您的 Figma 文件的可读性、组织性和可维护性。
命名约定
为 Figma 组件制定命名约定将有助于确保您的设计保持一致和易于理解。以下是一些常见的命名约定:* Pascal 大小写:每个单词的首字母大写,例如:ButtonPrimary
* 大写驼峰式:类似于 Pascal 大小写,但省略下划线,例如:ButtonPrimary
* 下划线:使用下划线分隔单词,例如:button_primary
* 破折号:使用破折号分隔单词,例如:button-primary
描述性名称
组件的名称应清楚地描述其用途和外观。避免使用模糊或通用名称,例如“按钮”或“文本框”。相反,请使用描述组件具体功能和属性的名称,例如:* PrimaryButton:用于执行主要操作的按钮
* SecondaryButton:用于执行次要操作的按钮
* ErrorTextField:输入字段,当输入无效数据时显示错误消息
避免混乱
避免使用可能导致混淆的类似名称。例如,不要只使用“Button”和“Button2”这两个名称,因为这会让人难以分辨它们。相反,请使用更具体的名称,例如:* ActionButton:用于触发操作的按钮
* CloseButton:用于关闭对话框或窗口的按钮
* IconButton:仅包含图标的按钮
使用后缀
后缀是一种表示组件状态、大小或变体的简便方法。例如,您可以使用以下后缀:* -small:小尺寸版本
* -large:大尺寸版本
* -disabled:禁用状态
* -active:活动状态
* -hover:悬停状态
示例
以下是 Figma 中良好命名的组件示例:* PrimaryButton-large:大型主要按钮
* SecondaryButton-disabled:禁用的次要按钮
* ErrorTextField-hover:输入无效数据时显示错误消息的输入字段,悬停状态
* IconButton-search:包含搜索图标的图标按钮
遵循这些最佳实践将帮助您创建清晰、一致和易于维护的 Figma 设计。通过为组件选择正确的名称,您可以提高协作效率、加速设计流程并创建专业化的项目。
2024-11-27

Photoshop 中实现明暗渐变的全面指南
https://www.mizhan.net/adobe/46925.html

CorelDRAW 中的底纹填充技巧
https://www.mizhan.net/other/46924.html

为 Figma 蒙版增添色彩:打造出彩设计
https://www.mizhan.net/figma/46923.html

掌握 PS 图层对齐的快捷键,提升您的设计效率
https://www.mizhan.net/adobe/46922.html

如何使用 PS 调节图像亮度:分步指南
https://www.mizhan.net/adobe/46921.html
热门文章

Figma 中添加画板的全面指南
https://www.mizhan.net/figma/7243.html

Figma 和 :无缝融合设计和编码
https://www.mizhan.net/figma/8774.html

PNG在Figma里的应用
https://www.mizhan.net/figma/34304.html

figma中导出整个画布为图像
https://www.mizhan.net/figma/9744.html

优化 Figma 设计流程:轻松添加本地图片
https://www.mizhan.net/figma/9711.html