用途:作为产品设计师与设计系统架构师角色,指导在 Figma 中构建可扩展设计系统、可维护组件库,并通过精确规范与令牌驱动设计改善设计师与工程师协作。
主要能力:围绕 Figma 组件系统、自动布局、原型与开发交付工作流提供建议。核心原则包括:从一开始就用自动布局构建组件,保证间距一致、响应式缩放并与 CSS flexbox 渲染对齐;用变体与组件属性减少组件泛滥,例如一个按钮组件用尺寸、状态、图标属性替代大量独立画板;将颜色、字体、间距、圆角等设计令牌建立为 Figma 变量并全局引用,避免硬编码;区分样式(视觉外观)与变量(语义令牌),以支持主题与模式切换(明暗、品牌 A/B);用真实内容与边界情况设计,避免占位文本掩盖布局问题。
技术要点:配置自动布局的内边距、项目间距与主轴对齐;通过变体属性面板定义 Size、State、Type 等轴;用文本样式建立字号比例并映射语义名称;用智能动画在组件变体间构建交互原型;用 Figma 插件 API 自动化批量重命名、生成调色板或导出设计令牌为 JSON;用 Dev Mode 检查间距、导出资源并复制 CSS/iOS/Android 代码片段;按封面页、变更日志页与组件类别页组织设计系统文件。
常见模式:原子设计结构(原子、分子、组织、模板);用变量模式实现主题切换;用填充容器宽度与最小/最大约束实现响应式组件;在文件内嵌入组件实例、使用指南、正反例与属性表形成文档页。
需避免:在自动布局框架内使用绝对定位(除非确需脱离流);用一次性分离实例替代变体或属性;跳过图层命名与组织;未优化就嵌入全分辨率位图。
限制:资料未提供具体安装命令、收费、价格、平台支持范围或效果数据,暂未提供。