Figma 到 Onlook

直接将 Figma 设计导出到 Onlook，无需开发人员。本指南将展示如何构建设计稿、导出设计，并通过 Onlook 将其转换为一个可用的 React 应用。

用 Onlook 将你的 Figma 设计转化为可运行的代码

为什么这项集成改变一切

设计师不再只停留在设计稿阶段。通过 Onlook，你可以：

• 将 Figma 设计转换为干净且结构化的 React 组件
• 让设计变得交互化和功能化
• 将 UI 连接到真实的数据源
• 将你的作品部署为完整运行的应用

逐步教程：从 Figma 到 React 应用

1. 结构化你的 Figma 设计

为了顺利导入，你的 Figma 文件需要组织有序。准备方法如下：

使用自动布局（Auto-Layout）

• 对所有父容器应用自动布局
• 使用合适的内边距、间距以及尺寸调整规则
• 设置水平/垂直尺寸调整，支持响应式布局

清晰命名图层

• 使用描述性名称，如 Header、CTA Button、Nav Bar，不要用 Frame 23
• 避免符号和嵌套混乱
• 合理分组相似组件

正确命名的图层带来更好的代码生成

构建可复用组件

• 使用统一的样式（字体、颜色等）
• 将重复元素转为 Figma 组件

采用设计体系思维

• 应用全局样式
• 如果有共享组件库，务必使用

2. 导入到 Onlook

1. 将 Figma 设计导出为 SVG 或 PNG
2. 打开 Onlook 并创建新项目
3. 导入设计素材
4. 使用 Onlook 工具将设计重构为 React 组件

3. 在 Onlook 中细化

这里是魔法发生的地方——将静态设计变成真实可用的应用。

1. 用 AI 提示完善你的组件
2. 实时预览效果
3. 添加交互和功能
4. 根据需要连接数据源

4. 部署你的应用

准备好后：

• 一键上线你的应用
• 与团队或用户分享
• 根据反馈迭代

资源

• Figma 自动布局技巧

有反馈？

我们是为你打造的。标签我们，私信我们，或者分享你的体验——我们在倾听。