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.