Figma 转代码

设计稿落地时常见卡点

把 Figma 交给前端时，问题往往不在「能不能画出来」，而在主题切换和颜色语义是否一致：亮色里 rgba(0,0,0,0.55) 的三级文字，在暗色应对应 rgba(255,255,255,0.55)，但项目里亮/暗两套 --td-* 变量名字并不总是一一相同。若只读一套 theme.less、或直接写死 Figma 的 RGBA，切换主题后会出现文字对比度错误、背景「发灰」或边框消失。

本技能描述的是设计还原实施流程，目标产出是可上线、支持亮/暗主题的组件代码，而不是一次性截图级还原。

技能如何组织工作

第一步是需求对齐，而不是立刻写 JSX：组件命名与目录（如 component-name/index.tsx + index.less）、固定/弹性尺寸、间距与字号、以及默认/悬浮/激活/禁用/聚焦等交互态都要先确认；主题策略需明确是亮暗共用同一变量名，还是分别映射，以及找不到变量时的兜底约定。

颜色映射是核心环节。流程要求同时打开 src/styles/light/theme.less 与 src/styles/dark/theme.less，用 Figma 的 RGBA 规律（主/次级/三级文字、轻背景等）去检索全局变量，并在样式文件顶部集中定义局部映射变量；子元素只引用局部变量，避免在样式里出现 #333 或裸 rgba(...)。

后续步骤覆盖组件结构、Less 写法、从模块与根目录导出、替换旧用法，以及 Lint 与视觉验收清单（双主题、交互态、间距、无硬编码色值）。文档还提供常用 --td-text-color-primary、--td-gray-color-* 等对照表，并强调以主题文件实际值为准。

适用边界

• 面向已有 TDesign 风格 CSS 变量（--td-*）与 light/dark 主题目录的项目；映射表是速查，不能替代读文件。
• 字体默认继承系统字体，除非设计或用户明确要求。
• 未说明时默认无悬浮效果，需主动询问悬浮/聚焦变化。
• 有疑问先问用户，避免跳过确认直接实现导致返工。