在React项目早期，很多人用Balsamiq快速画低保真线框图，但进入高保真UI阶段后，它的位图风格和有限组件很难直接指导前端开发。Figma提供的矢量组件、自动布局和变体系统，能够更自然地衔接React的声明式结构。把已有的Balsamiq线框图迁移到Figma，并不是简单重画一遍，而是借机建立可复用的设计系统。
从Balsamiq静态稿到Figma组件层的重构思路
Balsamiq的导出物大多是PDF或PNG，里面的按钮、输入框都是扁平化手绘符号，没有命名规范，也无法被程序读取结构。迁移第一步应当把这些符号在Figma中重新定义为带名称的Component。例如原先线框里的“主按钮”在Balsamiq只是橙色方块加文字，到了Figma要建成Button/Primary主组件，并设置cornerRadius和fill为后续React样式变量。
重建时建议按React的组件粒度来拆。Balsamiq一屏可能塞了十几个控件，但Figma里应把它们归为Card、FormItem、Navbar等独立组件，并利用Auto Layout模拟React的flex排列。这样设计师调整间距时，前端看到的Figma结构就与JSX层级接近，减少沟通损耗。
另一个重点是母版替代。Balsamiq用Symbol做重复元素，但修改后要逐页更新。Figma的Component加Instance机制等价于React的组件复用，改主组件所有实例同步。下面代码展示在React中如何消费这类结构：
// Figma中命名为 Button/Primary 的组件对应此React组件
function PrimaryButton({ children, onClick }) {
return (
<button className="btn-primary" onClick={onClick}>
{children}
</button>
);
}
设计令牌与React CSS变量的同步机制
Balsamiq几乎没有设计令牌概念，颜色、字号都散落在每个控件。Figma可通过Styles和Variables定义全局色板、间距、字体。借助Tokens Studio插件，能把Figma变量导出为JSON，再生成React用的CSS自定义属性，保证设计稿与代码取值一致。
具体做法是：在Figma里建color.primary、space.md等变量，插件导出后由构建脚本写成:root下的--color-primary。React组件只用var(--color-primary)，以后设计师改Figma变量，前端拉取JSON重新生成即可，不必人工比对。如下CSS片段即由令牌生成：
:root {
--color-primary: #3b82f6;
--space-md: 16px;
}
.btn-primary {
background: var(--color-primary);
padding: var(--space-md);
}
这种同步也方便主题切换。Figma里做Light和Dark两套变量模式，导出后React用data-theme切换。相比Balsamiq要重画暗色线框，Figma加React变量方案明显省力，且不易出现色值偏差。
团队协同与交付工作流的差异
Balsamiq文件通常是本地或简单云存，产品经理改了线框，开发往往不知情。Figma的实时多人编辑和版本历史，让React开发者能订阅特定Frame，在Review模式标注释。设计转UI时，前端直接看Inspect面板复制Flex数值，不用猜Balsamiq图片里的间距。
迁移后建议设定规则：所有线框升级稿必须进Figma的Wireframe页，高保真进UI页，且组件库单独文件。React侧用Storybook对照Figma组件截图写用例。如下表对比两者在协同上的区别：
| 维度 | Balsamiq | Figma |
|---|---|---|
| 文件结构 | 单文件位图 | 多文件组件树 |
| 开发对接 | 看图片估样式 | 取变量和布局值 |
| 变更通知 | 口头或邮件 | 实时评论与版本 |
当React项目从0到1时，用Figma承接Balsamiq的低保真意图，既能保留快速构思习惯，又让后续UI不脱节。团队只需在初期投入重构组件的时间，中期还原效率会显著提升。