Figma到React无缝转换：设计系统落地的3大工具链（Zeplin+Storybook）
2026-08-25
Figma到React无缝转换：设计系统落地的3大工具链（Zeplin+Storybook）周五晚上九点半，深圳南山区某SaaS公司的开放办公区，前端工程师林越把浏览器里那个Figma设计稿的链接又打开了一遍。这是他今天第七次打开这个页面了。设计组的阿瑶下午四点半把最新版的设计稿丢到群里，附了一句："按钮的圆角从8改成6了，卡片阴影换了一套，表格里加了个hover态，其他没动。你们前端对一下。""其他没动"。林越对着屏幕苦笑。他打开Figma，把设计稿拉到200%，一个像素一个像素地跟自己在VS Code里写的React组件对比。按钮圆角确实改了，但颜色值也变了——从#2B6CB0变成了#2C5282，阿瑶大概觉得这是"其他没动"的范畴。卡片阴影从0 2px 8px rgba(0,0,0,0.08)换成了0 4px 12px rgba(0,0,0,0.06)，这个变化在Figma里肉眼几乎看不出来，但落到CSS里是两行不同的代码。最要命的是表格的hover态。设计稿里画了一个"鼠标悬浮时行背景变为浅灰"的效果，但没标注具体色值。林越在群里@阿瑶："hover那个灰色是啥色值？"阿瑶回：......
