Figma Make 新手入门手册：用AI把想法“说”成产品

Figma Make 新手入门手册：用AI把想法“说”成产品

一、Figma Make 是什么？简单来说……

你可以把 Figma Make 想象成一位精通设计和编程的AI助手。

• 传统方式：你需要亲手绘制每一个界面，编写复杂的代码，过程漫长且需要专业技能。

• Figma Make 方式：你只需要用文字“告诉”AI你的想法（例如：“帮我设计一个宠物社区App的登录页面”），它就能在几秒钟内生成一个可交互的、高保真的原型，甚至是一个可以运行的真实网页应用。

它的核心魔力就是：用语言提示（Prompt）来驱动设计和开发。

二、准备工作：开始之前你需要什么？

1. 一个 Figma 账户：如果你还没有，请访问 Figma 官网注册一个免费账户。
2. 访问权限：Figma Make 是一个较新的功能，请确保你的账户有权限使用它。你可以通过访问官方链接或在工作区中查看是否包含此功能。
3. 一个明确的想法：哪怕只是一个模糊的概念，比如“一个旅行照片分享页面”或“个人博客的主页”。

三、详细操作步骤：从零到一的完整旅程

我们将以一个简单的例子贯穿整个步骤：创建一个“每日灵感语录”展示页。

步骤 1：进入 Figma Make 并创建新项目

1. 登录你的 Figma 账户。
2. 在主页或工作区中找到并点击 “Make” 或类似的入口按钮，创建一个新的 Make 项目。
3. 你会看到一个简洁的界面，通常有一个输入框或按钮，提示你开始创建。

步骤 2：给出你的第一个AI提示（Prompt）

这是最关键的一步！清晰准确的描述能帮助AI更好地理解你。

• 在输入框中，用完整的句子描述你的需求。

• 新手推荐写法：“请设计一个网页页面，用来展示每日更新的灵感语录。页面顶部有一个大标题叫‘今日灵感’，中间是语录的显示区域，底部有一个小小的版权信息。整体风格希望是简约、温馨的。”

• 小贴士：

◦   说清楚是什么：明确对象（如：网页页面、移动端App、按钮）。

◦   描述结构和内容：列出需要的元素（如：标题、图片区、按钮、文本框）。

◦   说明视觉风格：使用如“简约”、“科技感”、“温馨”、“活泼”等词汇。

步骤 3：查看并初步调整AI生成的结果

1. 按下回车键后，AI会开始工作，并在几秒内生成一个完整的页面预览。

2. 页面右侧通常会有代码预览，左侧是视觉设计预览。作为新手，我们主要关注左侧的视觉效果。

3. 如果对生成的效果不满意，你可以直接在同一個输入框里继续“告诉”AI你的修改意见。例如：
   ◦ “背景颜色换成淡蓝色。”

   ◦ “把标题字体调大一些。”

   ◦ “在语录下面加一个‘分享’按钮。”

步骤 4：精细打磨——与AI协作编辑

Figma Make 的强大之处在于你不仅可以“说”，还可以“动手改”。

1. 直接点击编辑：在预览界面上，你可以直接点击文字（如标题、语录内容）进行修改，就像在文档里打字一样。

2. 选择特定部分修改：你可以选中页面上的某个元素（比如那个“分享”按钮），然后在输入框里针对它进行提示：
   ◦ “把这个按钮的颜色改成橙色。”

   ◦ “让这个按钮的圆角更大一点。”

3. 调整布局：你可以通过提示调整间距（Padding/Margin），例如：“增加语录文字和边框之间的间距。”

步骤 5：让页面“活”起来——测试交互

生成的高保真原型通常已经具备了一些基本的交互性。你可以尝试点击页面上的按钮，看看是否有反馈（比如颜色变化）。虽然作为“语录展示页”交互简单，但对于更复杂的应用（如登录页面），AI生成的按钮可能已经预设了点击跳转的逻辑。

步骤 6：导出你的成果

当你对设计满意后，你有几种方式继续：

1. 复制到 Figma Design：你可以将当前预览“复制为设计图层”，然后在一个更专业的Figma设计文件中继续精细调整。这是从AI创意过渡到专业设计流程的完美桥梁。
2. 发布为真实网站（进阶功能）：这是 Figma Make 最令人兴奋的功能之一！你可以将项目连接到 Supabase（一个后端即服务平台），为你的应用添加真实的数据库和用户认证功能。例如，可以为你的“灵感语录”应用创建一个真实的语录库，并让用户登录分享。
   ◦ 注：此步骤涉及外部服务配置，对新手可能稍有难度，但它是“无代码”构建真实应用的开端。

四、给新手的实用技巧

1. 从模仿开始：找一些你喜欢的简单网站或App界面，尝试用语言描述出来，让AI模仿生成。
2. Prompt 由简到繁：不要试图一口气描述一个极其复杂的应用。先创建一个简单的页面，然后一步步添加功能。
3. 善用“迭代”：设计很少能一次完美。把AI生成的结果看作初稿，通过多次提示和微调，让它越来越接近你的理想效果。
4. 不要怕犯错：尽情尝试各种天马行空的想法！这是学习和探索的最佳方式。

五、总结

恭喜你！你已经掌握了 Figma Make 的基本使用方法。记住这个核心流程：

提出想法（Prompt）→ 查看生成结果 → 微调或编辑 → 测试交互 → 导出或发布

Figma Make 极大地降低了数字产品创造的门槛，让你可以专注于构思和创意，而将繁琐的实现工作交给AI。现在，就打开 Figma Make，开始你的第一个AI设计项目吧！