Stitch Code to Figma

问题

Stitch 能输出可上线的 UI 代码，但设计师和 PM 仍要在 Figma 里手工重建每一屏才能继续迭代、标注或交付——慢、易失真、挫败感强。

产品思维

核心任务不是「导入 HTML」，而是 在保持设计保真度的同时，让 Frame 完全可编辑，团队无需重建阶段即可在 Figma 继续工作。

用户痛点

• 已有代码却要花数小时在 Figma 里重搭布局
• 复制粘贴后间距、字体经常错位
• 图标与嵌套组件在导入时丢失

设计决策

• 以「粘贴代码」为主路径，零配置上手
• 尽可能将 Stitch 结构映射为 Figma Auto Layout
• 输出原生 Frame/Layer，而非扁平图片

技术架构

Figma Plugin API 流水线：解析 Stitch 输出 → 规范化样式 → 用布局约束实例化组件与 Frame。

经验

Design-to-code 工具胜在 可编辑性优先于像素级完美。上线后社区对边界布局的反馈驱动了大部分迭代。

结果

已发布至 Figma Community，10.2k+ 用户，持续版本更新；与其他 Figma 生产力插件组成设计工程工具链。