sublime text 不支持 figma to code 自动转换，但可通过插件提取设计参数、snippet 模板加速编码、正则批量映射样式、联动 vs code/storybook 校验，成为高效可控的设计系统落地工具。
Sublime Text 本身不直接支持 Figma to Code 的自动转换，但它可以作为轻量级、高定制化的代码编辑器，配合插件和工作流，高效承接从 Figma 提取的设计参数（如颜色、间距、字体、组件结构），并快速生成规范的 React 或 Vue 组件代码。关键在于“提取—映射—生成”三步协同，而非全自动。
提取设计参数：用 Figma 插件导出结构化数据
Figma 社区有多个成熟插件可将设计稿转为 JSON/YAML/TS 类型定义，例如：
- Figma Tokens：导出设计系统变量（颜色、文字样式、间距等）为 JSON 或 SCSS/JS 变量文件；
- Anima 或 Zeplin（需配合导出）：生成带语义命名的 CSS 自定义属性或 React/Vue 组件骨架；
-
Design Token Studio：支持多平台输出，可一键生成
tokens.ts供 React/Vue 消费。
建议统一导出为 tokens.json 或 tokens.ts，放在项目 src/tokens/ 下，便于 Sublime 中快速查看和引用。
在 Sublime 中建立模板与 Snippet，加速组件编写
Sublime 的核心优势是极速响应 + 高度可定制的代码片段（Snippet）。针对常用组件类型（Button、Card、Input），可预设：
立即学习“前端免费学习笔记（深入）”；
- React 函数组件模板（含 TypeScript 接口、useToken 钩子调用、className 逻辑）；
- Vue 单文件组件（SFC）模板，自动注入
<script setup></script>和defineProps； - 基于设计 token 的快捷输入，例如输入
color-primary→ 补全为var(--color-primary)或useToken().colors.primary。
操作路径：Tools → Developer → New Snippet…，保存为 Packages/User/ReactComponent.sublime-snippet，即可通过前缀触发。
用 Sublime + 正则 + 宏实现批量样式映射
当 Figma 导出的 Sketch/JSON 数据含原始像素值（如 "padding": "12px"），而你项目约定使用 token（如 spacing.md），可用 Sublime 的「多重选择 + 正则替换」快速映射：
- 选中所有
"padding": "12px"→Ctrl+D多选 →Ctrl+H打开替换； - 正则模式开启，查找：
"padding": "(\d+)px"，替换为："padding": "spacing.$1"； - 再用自定义宏或 Python 插件（如
SublimePythonIDE）将spacing.12映射为spacing.md（需提前配置映射表）。
这类轻量自动化，比切换到重型 IDE 更快，特别适合设计系统迭代期的批量调整。
联动 VS Code / Vite / Storybook 做最终校验
Sublime 负责“写得快”，但不替代运行时验证。推荐工作流：
- 在 Sublime 中完成组件编码 + token 引用；
- 保存后，VS Code（或终端）中
vite dev启动本地服务； - 用 Storybook 加载该组件，对照 Figma 原稿检查尺寸、颜色、交互状态；
- 发现偏差时，回到 Sublime 快速修改，保存即热更新。
这样既发挥 Sublime 的编辑效率，又保留现代前端工具链的可靠性保障。
基本上就这些——Sublime 不是万能的 Figma-to-Code 工具，但作为“设计参数消化器 + 组件手写加速器”，它足够轻、够快、够可控。重点不在替代 AI 生成，而在让设计师和前端对齐得更稳、改得更准。
