去年12月28日，我把脑海中的问题写成了一个叫suika的GitHub仓库。我想拆开 Figma 的“壳”，探究它是怎么把设计系统跑起来的。虽然当时我和图形编辑器的工作相距甚远，但好奇心驱使我开始了这个项目。我把suika当成了实验田，用开源的方式复刻 Figma 的基础功能，顺带把搭建图形编辑器的流程走一遍。虽然它还在成长中，但我们已经把它放在了GitHub上供大家体验。 技术栈方面，我选择了React和Canvas 2D这个小而美的组合。为什么不选PIXI或Konva呢？因为Canvas 2D的wasm版本Canvaskit一旦落地，性能会大幅提升。另外自己封装图形对象和场景树可以让底层逻辑更可控，调试也更友好。TypeScript带来了强制约束的好处：变量改名和复杂项目重构都变得更简单了。在代码组织上，我采用面向对象和React Hook结合的双轨制：内核层用抽象类和模板模式负责核心功能；UI层用函数组件和Hook快速迭代页面布局；图标用Figma画好转成SVG丢进React组件库复用。 渲染与拾取阶段还需要优化：目前全量重绘导致图形多时卡顿；下一步计划剔除视口外的节点先解决显示问题；拾取算法暂时用包围盒判断提升效率。这一层代码组织把底层、引擎和UI拆分清晰：底层负责像素输出；引擎把所有逻辑封装成类；UI提供原子视图；各模块间用思维导图可视化依赖关系。未来路线图锁定了编组和钢笔工具这两大核心功能：编组可以让多个图形成为一个单位统一操作；钢笔工具可以绘制贝塞尔曲线并编辑节点。剩下的功能会按需求热度和实现复杂度排期进行开发。 关于开源态度：欢迎大家给仓库点Star，更欢迎提交Pull Request来贡献代码或提出建议。目前star数已经超过95个，但离可用还需要努力。任何贡献都欢迎：新功能提案、Bug Fix、性能优化方案甚至是简单的提问都能给我们带来灵感。这个编辑器仍在日夜开发中，下一次更新可能就在你提交PR后的明天。