用途:构建审查驱动的 Figma 到 React 流水线,检测已批准的源版本、仅生成白名单节点、约束输出范围并开启评审变更,避免设计改动直接进入已合并或已部署代码。
前提:完成 anima-install-auth 配置;Figma 文件组件组织良好(建议使用 auto-layout);具备 React 项目(Next.js、Vite 或 CRA)。
认证:仅在后端使用 ANIMA_TOKEN 创建 Anima 客户端,并向 generateCode 传入针对白名单文件的受管 FIGMA_TOKEN。任一令牌返回 401/403 时停止,修正访问权限,不得扩大源白名单。
主要能力:设计系统扫描器枚举 Figma 页面顶层组件;批量代码生成器逐节点调用 anima.generateCode,支持 language(typescript/javascript)、framework(react/html)、styling(plain_css/tailwind/inline_styles)及 uiLibrary(mui/antd/radix/shadcn/clean_react/custom_design_system)等设置;变更检测通过 Figma 版本接口比较最新版本;完整流水线运行器串联扫描、生成与变更检测。
使用方式:安装 @animaapp/anima-sdk,配置环境变量 ANIMA_TOKEN、FIGMA_TOKEN、FIGMA_FILE_KEY,按步骤实现 figma-scanner、batch-generator、change-detector 与 run 模块,输出目录示例为 ./src/components/generated。生成文件需校验路径位于输出根目录内且非二进制,否则拒绝写入。
限制与纪律:Anima 一次处理一个节点;并发与重试策略属于限流工作流。使用 Read/Grep 检查现有集成与生成差异,仅在批准的生成代码、测试或配置路径内写入;不得打印令牌、源设计、生成源码或私有网站截图。错误处理包括限流时在组件生成间加 2 秒延迟、节点为 group 而非 frame 时改用 auto-layout、深层嵌套需在 Figma 中扁平化、自定义字体需在 Anima 设置中映射。若扫描到意外组件、生成器写出输出目录或校验失败,应停止监听循环并修正节点白名单或设计源。具体收费、价格与平台支持范围暂未提供。