三亩地 三亩地SAN MU DI · CODE DIARY
ARTICLE DETAIL

日记详情

真实记录编程学习的某一天,欢迎挑你感兴趣的翻一翻。

Design Token 与 Figma to Code:生成值容易,生成组件状态很难

Design Token 与 Figma to Code:生成值容易,生成组件状态很难

Design Token 与 Figma to Code:生成值容易,生成组件状态很难

设计稿转代码适合生成布局和初始样式,但组件还有交互状态、响应式和可访问性。逐像素复制,往往把一次画面当成完整产品。

Token 分三层

基础 Token 保存颜色与尺寸原值,语义 Token 表达用途,组件 Token 只处理确实需要的局部差异。设计和代码共享命名与版本,变更先检查对比度和影响组件。

生成工具输出进入已有组件库,不直接创建第二套按钮和表单。hover、focus、disabled、loading、错误与空状态都要人工审查,图标和图片补齐可访问文本。

用视觉回归校对

固定视口、主题和数据,对关键组件做截图差异,再运行键盘与屏幕阅读器检查。自动生成能减少机械转换,不能替代组件 API 和交互判断。

← 返回列表