React 导出到 Figma Make

概述

本技能将帮助你把任意 React 组件或应用转换为符合 Figma Make 项目规范的标准结构。转换完成后，项目将具备：

• Figma Make 可编辑性：可在 Figma Make 平台中打开、编辑和迭代
• .fig 导出能力：生成可下载的 .fig 文件
• 双入口架构：同时支持独立运行和 Figma Make 导出
• 设计 Token 保留：保持原始设计系统的 CSS 变量和主题定义
• 资产完整性：包含 meta.json、ai_chat.json、images/ 等 Figma Make 要求的元文件

本技能产出一个完整的 Figma Make 兼容项目目录，而非单个组件文件。

何时使用

• 你有一个现成的 React 项目，希望导入 Figma Make 进行可视化编辑
• 你需要从 React 代码生成 .fig 文件用于设计交付
• 你希望在 Figma Make 和代码编辑器之间双向协作