Figma Make实操体验:锻炼打卡App UI生成全记录

传统UI设计从需求分析到产出可交互原型，往往需要设计师经历数天甚至数周的反复打磨。而如今，AI技术的介入正在颠覆这一流程。

Figma Make作为Figma推出的AI驱动原型生成工具，通过自然语言驱动，能够将你的想法快速转化为功能完整的交互原型和Web应用。本文将带你深入了解这款工具的实际使用体验，并以锻炼打卡App为例，完整还原从零到一的实操流程。

准备阶段：明确需求与工具认知

– 锻炼打卡App的核心需求拆解 –

用户群体：健身爱好者、运动新手

核心功能：打卡记录、数据统计、目标设定、社区互动

视觉风格定位：活力简约、移动端优先、卡片式布局

配色方案：活力橙色 (#FF6B35) + 清新绿色 (#4ECDC4)

Figma Make 认知

一、工具入口与界面

1. 在Figma文件浏览器中进入Drafts文件夹
2. 点击右上角的“Make”按钮创建文件
3. 进入AI聊天界面，顶部有提示词输入框
4. 支持模板快速启动
   

💡 小贴士

付费计划用户可关联团队组件库，保持设计系统一致性。新用户可在未付费计划试用Figme Make。

二、核心能力和局限性

优势能力

• 快速生成多页面原型
• 支持Code Layers添加动画和交互
• 可与Supabase集成添加真实数据
• 自然语言迭代修改

局限性

• 复杂业务逻辑需手动优化
• 细节精度需后期调整
• 移动端适配仍在改进中

– 准备工作清单 –预设移动端尺寸（推荐 375×812）准备设计风格指南（可选）明确功能优先级准备参考案例截图（如有）

实操第一阶段：从文字到初稿，AI的快速响应

– 提示词的精准撰写 –

提示词质量直接决定AI输出的匹配度。优秀的提示词应包含以下要素：

核心要素

• 设备类型：明确移动端/桌面端
• 页面结构：首页、打卡页、统计页等
• 功能模块：每个页面的具体组件
• 视觉风格：配色、字体、圆角
• 交互需求：跳转、动画、效果

常见误区

• 过于笼统：”做一个App”
• 功能缺失：忘记描述交互
• 视觉模糊：”好看一点”
• 目标不清：没有明确交付物

# 锻炼打卡App提示词： 

创建一个锻炼打卡App的移动端原型（iPhone 16尺寸）： 

【页面结构】 

1. 首页（Home）： - 顶部：用户信息（头像、昵称、积分） - 中部：今日打卡状态卡片（大数字显示连续打卡天数） - 底部：快速打卡按钮（固定悬浮，圆形，橙色） - 下方：本周运动记录横向滚动卡片 

2. 打卡页（Check-in）： - 运动类型网格（跑步、健身、瑜伽、游泳等） - 时长选择器（30/45/60/90分钟预设） - 拍照打卡入口 - 提交按钮 

3. 统计页（Statistics）： - 本周/本月切换标签 - 运动时长柱状图（Chart.js） - 完成率圆圈进度条 - 历史勋章展示网格 

4. 目标页（Goals）： - 周目标设置输入框 - 目标进度卡（已完成/总计） - 奖励徽章展示 【视觉风格】 - 配色：#FF6B35（主色）、#4ECDC4（次色） - 字体：Inter（Regular 400、Medium 500、Bold 700） - 圆角：12px卡片、24px按钮 - 间距：16px基础单位 【交互要求】 - 底部导航栏固定，图标+文字 - 页面切换淡入淡出（0.3s） - 打卡成功动画（打钩+震动） 请生成完整的可交互原型。

– 生成速度与初稿质量 –

5-8分钟生成时长，4个页面，完整覆盖90%+需求匹配度

• 页面布局合理，符合移动端设计规范
• 组件完整：导航栏、卡片、按钮一应俱全
• 风格匹配度高：配色和间距基本符合要求
• 自动生成页面跳转逻辑
• 使用了合适的容器组件（div、section）

初稿槽点

• 部分功能简化：如”拍照打卡”仅生成普通按钮
• 交互逻辑缺失：数据增删改查功能未实现
• 细节瑕疵：字体偏大、部分间距不一致
• 图表静态化：缺少加载动画和动态效果
  
  

实操第二阶段：迭代优化，让原型更完美

-Point and Edit可视化微调-

Figma Make提供的Point and Edit工具让直接编辑变得简单：

使用步骤：1️⃣ 点击输入框下方的“Point and edit”按钮2️⃣ 在预览画面中点击要修改的元素3️⃣ 使用工具栏调整属性

可调整的属性

• 颜色：背景色、文字色、边框色
• 间距：padding、margin
• 布局：拖拽位置、调整大小
• 文本：字体、字号、粗细

• 圆角：border-radius调整
• 层级：z-index调整
• 阴影：box-shadow设置
• 透明度：opacity控制

– 自然语言二次指令：精准修正AI偏差 –

模糊表述

“把首页改好看点”

精准描述✅

“将首页打卡按钮改为悬浮式设计，固定在底部导航栏上方，并添加阴影效果和缩画”

迭代修改

# 第一轮迭代：完善功能细节 

1. 首页： - 将打卡按钮改为圆形悬浮按钮，位于页面右下角 - 本周记录卡片改为横向滚动展示 - 添加顶部状态栏显示用户头像和姓名 

2. 打卡页： - 运动类型改为网格布局，每行3个 - 时长选择改为滚轮选择器 - 添加拍照功能入口，点击打开相机 

3. 统计页： - 使用柱状图展示每日运动时长 - 添加周/月切换标签 - 图表数据要有动画效果 

4. 整体： - 底部导航栏改为图标+文字 - 所有按钮点击后添加震动反馈 - 页面切换使用淡入淡出动画

多轮迭代效果对比

第1轮

基础框架完成，布局合理，功能覆盖

第2轮

功能细节完善，视觉风格统一

第3轮

交互逻辑补全，动画效果添加

第4轮

文案优化，微调视觉细节

交互逻辑补全

页面跳转设置

设置底部导航栏的页面跳转： - 首页图标 → 跳转到首页frame - 打卡图标 → 跳转到打卡页frame - 统计图标 → 跳转到统计页frame - 目标图标 → 跳转到目标页frame

动态效果添加

添加以下动画效果： 1. 按钮悬停态：背景色加深，轻微放大（scale: 1.05） 2. 数据加载动画：图表从底部向上生长（translateY + opacity） 3. 页面切换：淡入淡出（opacity 0→1），时长300ms 4. 打卡成功：对勾动画 + 震动反馈（navigator.vibrate）

实操第三阶段：导出与交付，衔接工作流

原型导出选项

 Figma格式

团队协作分享

Figma Make支持一键生成预览链接，团队成员可在浏览器中直接交互体验：

协作流程：

1. 点击“Share”生成公开链接
2. 可设置密码保护或访问权限
3. 使用评论功能在特定元素添加反馈
4. 版本历史清晰，可追溯修改记录
5. 将Make生成图层复制到主设计文件
6. 在Figma Design中进行像素级调整

体验总结：价值与局限

5倍

效率提升

90%+

需求匹配度

0代码

也能产出

核心价值

• 大幅提升原型效率：
  
  传统流程需数天 → Figma Make仅需数小时
• 降低设计门槛：
  
  产品经理、运营也可独立产出原型
• 激发创意灵感：
  
  AI可提出设计师未曾想到的交互方案
• 快速试错：
  
  多方案并行探索，低成本验证

现存局限

• 复杂逻辑处理能力弱：
  
  多条件分支、状态管理需手动补全
• 细节精度不足：
  
  间距、字体需后期微调
• 代码质量待优化：
  
  需重构才能在大型项目使用
• 移动端适配仍在改进：
  
  部分移动端特有功能不够完善

适用场景推荐

✅ 强烈推荐

• 快速原型验证（MVP概念）
• 创意方案探索（A/B测试）
• 小团队高效协作
• 产品文档和演示

❌ 不推荐

• 生产级应用完整实现
• 复杂业务系统
• 严格性能要求项目
• 高度定制化设计

工具是助手，创意才是核心

Figma Make是设计师的”创意加速器“，而非”自动设计师”。它把设计师从繁琐的实现工作中解放出来，让创意更加自由地流淌。

拥抱AI工具的正确姿势：

1. 用AI快速验证想法，而不是依赖AI产生想法
2. 保持对用户体验的敏感度
3. 培养指导AI的能力（Prompt Engineering）
4. 把省下来的时间聚焦于真正的创新设计

最终，工具再强大，也无法替代人类对美的判断、对用户的理解、对故事的讲述。Figma Make让设计师更像”导演“——我们设定愿景、指导AI演员、剪接最终作品。工具越先进，设计师的灵魂越重要。

实战提示词模板

附上本文中使用的完整提示词模板，可直接复制使用：

创建一个锻炼打卡App的移动端原型（iPhone 16尺寸）： 【页面结构】 1. 首页（Home）： - 顶部：用户信息（头像、昵称、积分） - 中部：今日打卡状态卡片（大数字显示连续打卡天数） - 底部：快速打卡按钮（固定悬浮，圆形，橙色） - 下方：本周运动记录横向滚动卡片 2. 打卡页（Check-in）： - 运动类型网格（跑步、健身、瑜伽、游泳等8宫格） - 时长选择器（30/45/60/90分钟预设） - 拍照打卡入口（调用摄像头） - 提交按钮 3. 统计页（Statistics）： - 本周/本月切换标签 - 运动时长柱状图（Chart.js） - 完成率圆圈进度条 - 历史勋章展示网格 4. 目标页（Goals）： - 周目标设置输入框 - 目标进度卡（已完成/总计） - 奖励徽章展示 【视觉风格】 - 配色：#FF6B35（主色）、#4ECDC4（次色）、#2D3436（文字） - 字体：Inter，Regular 400、Medium 500、Bold 700 - 圆角：12px卡片、24px按钮 - 间距：16px基础单位 【交互要求】 - 底部导航栏固定，图标+文字 - 页面切换淡入淡出（0.3s） - 打卡成功播放成功动画（打钩+震动） - 图表加载动画（从底部生长） 【代码层】 - 实现打卡数据本地存储（localStorage） - 日历组件显示打卡记录 - 数据持久化到Supabase（可选） 请生成完整的可交互原型，支持所有按钮可点击，数据可增删改。

💡 提示词技巧使用【】和大纲结构能让AI更好地理解你的需求。分模块描述页面结构、视觉风格、交互要求，生成质量会显著提升。