前端实战

同一套设计令牌在 React Native、Flutter 和 Web 里跑出三套样式,我们踩过的坑比想象中多

设计令牌从 Figma 导出 JSON 后,在三端渲染时因平台差异产生大量样式不一致问题。颜色方面,Android 动态色彩、Flutter 色域、Web 深色模式自动反转导致色差;字号受设备像素比和系统缩放影响;间距圆角存在像素取整差异;阴影和动效因渲染引擎不同难以统一。解决方案包括在令牌中引入渲染意图标记、字号缩放限制、安全值检查、自定义贝塞尔曲线,以及建立令牌契约测试防止生成器错误。