Figma 到 Onlook
【Figma to Onlook】
将 Figma 设计直接导出到 Onlook。无需开发者。本指南将向你展示如何构建设计、导出设计，并将其转换为可在 Onlook 上运行的 React 应用。
【Export Figma designs directly into Onlook. No developers needed. This guide shows you how to structure your design, export it, and turn it into a working React application with Onlook.】
使用 Onlook 将你的 Figma 设计转化为可运行的代码
为什么这次整合改变了一切
【Why This Integration Changes Everything】
设计师不再只停留在原型设计阶段。使用 Onlook，你可以：
【Designers no longer have to stop at mockups. With Onlook, you can:】
- 将 Figma 设计转换为清晰、结构化的 React 组件
- 让你的设计具有互动性和功能性
- 将你的界面连接到真实数据源
- 将你的作品部署为一个功能完整的应用
逐步指南：从 Figma 到 React 应用
【Step-by-Step: Figma to React App】
1. 构建你的 Figma 设计结构
【1. Structure Your Figma Design】
为了顺利导入，你的 Figma 文件需要整理得井井有条。准备方法如下：
【For smooth importing, your Figma file needs to be well-organized. Here's how to prepare:】
使用自动布局
【Use Auto-Layout】
- 对所有父容器应用自动布局
- 使用适当的填充、间距和调整大小规则
- 为响应式布局设置水平/垂直调整大小
清晰地命名你的图层
【Name Your Layers Clearly】
- 使用描述性名称，例如
Header、CTA Button、Nav Bar——而不是Frame 23 - 避免符号和嵌套杂乱
- 将相似的组件逻辑分组
适当命名的图层可以生成更好的代码
构建可复用组件
【Build Reusable Components】
- 使用一致的样式（字体、颜色等）
- 将重复的元素转换为 Figma 组件
以设计系统思考
【Think in Design Systems】
- 应用全局样式
- 如果有可用的共享组件库，请使用它
2. 导入到 Onlook
【2. Import into Onlook】
- 将你的 Figma 设计导出为 SVG 或 PNG
- 打开 Onlook 并创建一个新项目
- 导入你的设计素材
- 使用 Onlook 的工具将设计重建为 React 组件
3. 在观众中优化
【3. Refine in Onlook】
这就是魔法发生的地方——将静态设计变成真正可用的应用。
【This is where the magic happens—turning static designs into real, usable apps.】
- 使用AI提示来改进你的组件
- 实时预览
- 添加交互和功能
- 如有需要，请连接到数据源
4. 部署你的应用
【4. Deploy Your App】
当你准备好时：
【When you're ready:】
- 一键上线你的应用
- 与你的团队或用户分享
- 根据反馈进行迭代
资源
【Resources】
有反馈吗？
【Got Feedback?】
我们为你而打造。标记我们、给我们发私信或分享你的体验——我们在倾听。
【We're building this for you. Tag us, DM us, or share your experience—we're listening.】