写在前面这是一份专为前端开发者设计的 Figma 学习计划帮助你快速掌握产品设计技能向产品负责人转型。 学习目标完成 30 天学习后你将能够✅ 熟练使用 Figma 进行界面设计✅ 制作高保真原型和交互演示✅ 创建和维护设计系统✅ 与设计师高效协作✅ 独立完成产品原型设计️ 第一周基础入门Day 1-7Day 1 - 环境搭建与界面认知学习目标熟悉 Figma 界面和基本操作学习内容注册 Figma 账号figma.com下载并安装 Figma 桌面应用了解界面布局左侧图层面板Layers右侧属性面板Properties顶部工具栏Toolbar画布区域Canvas实践任务创建一个新文件尝试添加一个矩形、圆形、文本学习缩放、移动、复制操作参考资源Figma 官方入门教程B 站搜索Figma 入门教程观看第一个视频时间投入1-2 小时Day 2 - 基础工具使用学习目标掌握 Figma 基础绘图工具学习内容框架工具Frame- 快捷键 F形状工具Shape- 矩形、圆形、三角形等钢笔工具Pen- 快捷键 P文本工具Text- 快捷键 T布尔运算Union、Subtract、Intersect、Exclude实践任务创建一个手机界面框架375x812设计一个简单的登录界面包含输入框、按钮、文字使用布尔运算制作一个图标时间投入2 小时Day 3 - 颜色与填充学习目标掌握颜色、渐变、图片填充学习内容纯色填充渐变填充线性渐变、径向渐变图片填充颜色取样器创建颜色样式Color Styles实践任务为昨天的登录界面添加配色创建一个渐变按钮制作一个带背景图的卡片小技巧使用吸管工具I快速取色保存常用颜色为样式方便复用时间投入1-2 小时Day 4 - 图层与编组学习目标理解图层管理和编组逻辑学习内容图层面板操作编组Group- 快捷键 CmdG / CtrlG框架Frame与编组的区别图层排序与锁定隐藏/显示图层实践任务整理之前设计的登录界面图层合理使用编组和框架给图层规范命名时间投入1-2 小时Day 5 - 文本与排版学习目标掌握文本样式和排版技巧学习内容文本工具详解字体、字号、字重行高、字间距文本对齐方式创建文本样式Text Styles实践任务创建一套文本样式标题、副标题、正文、辅助文字设计一个文章列表页面练习中英文混排时间投入2 小时Day 6 - 对齐与分布学习目标掌握精确对齐和布局技巧学习内容对齐工具左对齐、居中、右对齐等分布工具平均分布智能参考线网格系统Layout Grid标尺与参考线实践任务使用网格系统设计一个 8 列布局精确对齐多个元素制作一个规范的卡片列表时间投入2 小时Day 7 - 第一周综合练习学习目标综合运用第一周所学知识实践任务设计一个完整的 App 首页包含导航、内容区、底部 Tab要求使用框架作为画布合理编组和图层命名使用统一的配色方案元素精确对齐导出 PNG 预览参考参考微信、支付宝等常见 App 的首页布局尺寸参考 iPhone 13 (390x844)时间投入3 小时️ 第二周进阶技能Day 8-14Day 8 - Auto Layout 基础学习目标理解并掌握自动布局学习内容什么是 Auto Layout创建 Auto Layout - 快捷键 ShiftA间距设置Gap内边距Padding对齐方式实践任务用 Auto Layout 制作一个按钮制作一个带图标的列表项体验调整内容时自动布局的变化时间投入2 小时Day 9 - Auto Layout 进阶学习目标掌握 Auto Layout 高级用法学习内容嵌套 Auto LayoutHug Contents / Fill Container / Fixed响应式 Auto LayoutAuto Layout 与约束实践任务制作一个完整的卡片组件包含标题、描述、按钮制作一个导航栏组件练习让组件自适应不同宽度时间投入2-3 小时Day 10 - 组件基础Components学习目标理解组件和实例的概念学习内容创建组件Component- 快捷键 CmdOptionK主组件与实例的关系修改主组件同步到实例覆盖Overrides实践任务将之前设计的按钮转换为主组件创建多个实例并测试同步效果练习对实例进行覆盖修改时间投入2 小时Day 11 - 组件变体Variants学习目标掌握组件变体的使用学习内容什么是组件变体创建变体组设置变体属性Property使用变体切换实践任务为按钮组件创建变体状态Default / Hover / Pressed / Disabled类型Primary / Secondary / Tertiary创建一个图标组件库至少 5 个图标时间投入2-3 小时Day 12 - 设计系统基础学习目标了解设计系统的构成学习内容什么是设计系统颜色系统Color Palette字体系统Typography间距系统Spacing圆角系统Radius实践任务创建一套完整的颜色样式创建一套完整的文本样式创建间距和圆角样式参考资源查看 Material Design 设计系统、Ant Design 设计系统时间投入2-3 小时Day 13 - 设计系统实践学习目标搭建自己的设计系统实践任务创建一个设计系统文件包含以下内容颜色板主色、辅助色、中性色、功能色字体样式H1-H6、正文、辅助文字基础组件按钮、输入框、开关、复选框图标库时间投入3-4 小时Day 14 - 第二周综合练习学习目标综合运用组件和设计系统实践任务使用设计系统组件设计一个完整的用户中心页面要求全部使用组件库中的组件使用 Auto Layout 布局图层结构清晰可以适配不同屏幕宽度时间投入3-4 小时️ 第三周原型交互Day 15-21Day 15 - 原型基础学习目标理解原型模式和连接学习内容原型模式Prototype Tab创建连接Connection交互触发OnClick、OnHover 等动画类型Instant、Dissolve、Smart Animate实践任务制作两个页面之间的跳转添加按钮点击交互尝试不同的动画效果时间投入2 小时Day 16 - 交互动画学习目标掌握 Smart Animate 动画学习内容Smart Animate 原理图层命名要求动画时长设置缓动函数Easing实践任务制作一个侧边菜单滑出动画制作一个卡片展开动画制作一个 Tab 切换动画时间投入2-3 小时Day 17 - 高级交互学习目标学习高级交互功能学习内容拖拽交互Drag滚动区域Scroll固定元素Fix Position叠加层Overlay实践任务制作一个可拖动的底部菜单制作一个带滚动区域的内容页制作一个弹窗Overlay时间投入2-3 小时Day 18 - 微交互设计学习目标设计精致的微交互学习内容按钮状态变化输入框焦点状态开关切换动画加载状态实践任务制作一个完整的按钮交互Default/Hover/Pressed/Loading制作一个输入框交互Default/Focus/Error/Success制作一个开关切换动画时间投入2-3 小时Day 19 - 原型综合练习 - 登录流程学习目标完成一个完整的登录流程原型实践任务设计并制作以下页面登录页注册页忘记密码页首页添加完整交互页面跳转输入框交互按钮反馈错误提示时间投入3-4 小时Day 20 - 原型综合练习 - 导航系统学习目标制作完整的导航系统原型实践任务制作底部 Tab 导航至少 4 个 Tab制作侧边抽屉导航制作顶部导航栏实现 Tab 切换和内容联动时间投入3 小时Day 21 - 第三周综合练习学习目标完成一个可交互的完整原型实践任务选择一个常见 App如微信、美团、小红书临摹其核心流程至少 5 个页面添加完整的交互动画导出原型链接分享时间投入4 小时️ 第四周实战与协作Day 22-30Day 22 - 协作功能学习目标掌握 Figma 协作功能学习内容分享文件Share评论功能Comments多人实时协作版本历史Version History实践任务创建一个分享链接View only在文件中添加评论创建一个版本并命名时间投入1-2 小时Day 23 - 开发者协作学习目标理解开发者的 Figma 使用方式学习内容Dev Mode 介绍查看设计稿标注导出资源Export查看代码片段实践任务从开发者视角查看一个设计稿导出需要的图片资源查看 CSS 代码并理解时间投入2 小时Day 24 - 插件使用学习目标学会使用 Figma 插件提高效率学习内容安装插件常用插件推荐Unsplash图片素材Iconify图标库Content Reel内容填充Autoflow连接线Stark无障碍检查实践任务安装至少 3 个插件在实际项目中使用插件时间投入2 小时Day 25-27 - 期末项目3 天项目目标完成一个完整的产品原型设计项目要求选择一个产品方向如待办事项 App、阅读 App、健身 AppDay 25需求分析与信息架构确定产品定位和目标用户绘制功能结构图绘制用户流程图Day 26界面设计设计至少 8 个核心页面建立完整的设计系统使用组件化方式设计Day 27交互原型添加完整的页面跳转添加微交互动画制作可演示的原型时间投入每天 4 小时Day 28 - 作品整理与导出学习目标整理和展示你的作品实践任务整理设计文件结构创建一个作品展示页导出关键页面预览图准备一份设计说明文档时间投入2-3 小时Day 29 - 复盘与总结学习目标回顾 30 天学习成果实践任务回顾第一天和第三十天的作品对比总结学到的技能列出还需要提升的地方制定后续学习计划时间投入1-2 小时Day 30 - 分享与展示学习目标展示学习成果实践任务将作品发布到 Dribbble/Behance/站酷或者在团队内部分享或者写一篇学习总结文章时间投入2 小时 推荐学习资源官方资源Figma 官方教程Figma YouTube 频道中文教程B 站搜索Figma 教程推荐 UP 主设计师的睡前毒鸡汤站酷高高手Figma 相关课程设计系统参考Material DesignAnt DesignHuman Interface Guidelines灵感网站DribbbleBehancePinterest站酷免费素材Unsplash图片Iconify图标undraw插画 学习建议给前端开发者的特别提示1. 发挥你的优势你理解组件化思维学 Figma 组件会很快你理解布局概念Auto Layout 很容易上手你理解状态管理组件变体很好理解2. 注意思维转换设计追求视觉效果不只是功能实现多关注细节间距、颜色、字体、圆角学会抄优秀的设计慢慢形成感觉3. 实践建议每天保证至少 1 小时专注学习多临摹优秀作品加入 Figma 社群看别人怎么做4. 避免的坑不要只看不练一定要动手不要追求完美先完成再优化不要忽视图层命名和文件组织 进度追踪表周次学习主题完成度第一周基础入门□□□□□□□第二周进阶技能□□□□□□□第三周原型交互□□□□□□□第四周实战协作□□□□□□□□□ 30 天后的下一步完成这个计划后你可以1. 继续深化学习更高级的动画技巧研究动效设计原理学习 3D 设计Figma Spline2. 拓展技能学习动效工具Principle、ProtoPie学习插画技能学习品牌设计基础3. 实战应用在工作中主动承担设计任务参与产品设计讨论建立自己的作品集4. 向产品负责人迈进用 Figma 技能辅助产品原型设计能够快速表达产品想法与设计师高效沟通 写在最后这份学习计划是为你——前端开发者转型产品负责人而定制的。Figma 作为当前最流行的 UI 设计工具掌握它将帮助你更好地与设计师沟通- 理解设计语言减少沟通成本快速表达产品想法- 用原型代替文字描述更直观提升产品竞争力- 设计能力是产品负责人的核心技能之一坚持 30 天你会感谢现在努力的自己如果觉得这篇文章对你有帮助欢迎点赞⭐收藏关注我会持续分享更多前端转型相关内容有任何问题欢迎在评论区留言交流
Figma 30 天学习计划
发布时间：2026/7/4 19:40:31
写在前面这是一份专为前端开发者设计的 Figma 学习计划帮助你快速掌握产品设计技能向产品负责人转型。 学习目标完成 30 天学习后你将能够✅ 熟练使用 Figma 进行界面设计✅ 制作高保真原型和交互演示✅ 创建和维护设计系统✅ 与设计师高效协作✅ 独立完成产品原型设计️ 第一周基础入门Day 1-7Day 1 - 环境搭建与界面认知学习目标熟悉 Figma 界面和基本操作学习内容注册 Figma 账号figma.com下载并安装 Figma 桌面应用了解界面布局左侧图层面板Layers右侧属性面板Properties顶部工具栏Toolbar画布区域Canvas实践任务创建一个新文件尝试添加一个矩形、圆形、文本学习缩放、移动、复制操作参考资源Figma 官方入门教程B 站搜索Figma 入门教程观看第一个视频时间投入1-2 小时Day 2 - 基础工具使用学习目标掌握 Figma 基础绘图工具学习内容框架工具Frame- 快捷键 F形状工具Shape- 矩形、圆形、三角形等钢笔工具Pen- 快捷键 P文本工具Text- 快捷键 T布尔运算Union、Subtract、Intersect、Exclude实践任务创建一个手机界面框架375x812设计一个简单的登录界面包含输入框、按钮、文字使用布尔运算制作一个图标时间投入2 小时Day 3 - 颜色与填充学习目标掌握颜色、渐变、图片填充学习内容纯色填充渐变填充线性渐变、径向渐变图片填充颜色取样器创建颜色样式Color Styles实践任务为昨天的登录界面添加配色创建一个渐变按钮制作一个带背景图的卡片小技巧使用吸管工具I快速取色保存常用颜色为样式方便复用时间投入1-2 小时Day 4 - 图层与编组学习目标理解图层管理和编组逻辑学习内容图层面板操作编组Group- 快捷键 CmdG / CtrlG框架Frame与编组的区别图层排序与锁定隐藏/显示图层实践任务整理之前设计的登录界面图层合理使用编组和框架给图层规范命名时间投入1-2 小时Day 5 - 文本与排版学习目标掌握文本样式和排版技巧学习内容文本工具详解字体、字号、字重行高、字间距文本对齐方式创建文本样式Text Styles实践任务创建一套文本样式标题、副标题、正文、辅助文字设计一个文章列表页面练习中英文混排时间投入2 小时Day 6 - 对齐与分布学习目标掌握精确对齐和布局技巧学习内容对齐工具左对齐、居中、右对齐等分布工具平均分布智能参考线网格系统Layout Grid标尺与参考线实践任务使用网格系统设计一个 8 列布局精确对齐多个元素制作一个规范的卡片列表时间投入2 小时Day 7 - 第一周综合练习学习目标综合运用第一周所学知识实践任务设计一个完整的 App 首页包含导航、内容区、底部 Tab要求使用框架作为画布合理编组和图层命名使用统一的配色方案元素精确对齐导出 PNG 预览参考参考微信、支付宝等常见 App 的首页布局尺寸参考 iPhone 13 (390x844)时间投入3 小时️ 第二周进阶技能Day 8-14Day 8 - Auto Layout 基础学习目标理解并掌握自动布局学习内容什么是 Auto Layout创建 Auto Layout - 快捷键 ShiftA间距设置Gap内边距Padding对齐方式实践任务用 Auto Layout 制作一个按钮制作一个带图标的列表项体验调整内容时自动布局的变化时间投入2 小时Day 9 - Auto Layout 进阶学习目标掌握 Auto Layout 高级用法学习内容嵌套 Auto LayoutHug Contents / Fill Container / Fixed响应式 Auto LayoutAuto Layout 与约束实践任务制作一个完整的卡片组件包含标题、描述、按钮制作一个导航栏组件练习让组件自适应不同宽度时间投入2-3 小时Day 10 - 组件基础Components学习目标理解组件和实例的概念学习内容创建组件Component- 快捷键 CmdOptionK主组件与实例的关系修改主组件同步到实例覆盖Overrides实践任务将之前设计的按钮转换为主组件创建多个实例并测试同步效果练习对实例进行覆盖修改时间投入2 小时Day 11 - 组件变体Variants学习目标掌握组件变体的使用学习内容什么是组件变体创建变体组设置变体属性Property使用变体切换实践任务为按钮组件创建变体状态Default / Hover / Pressed / Disabled类型Primary / Secondary / Tertiary创建一个图标组件库至少 5 个图标时间投入2-3 小时Day 12 - 设计系统基础学习目标了解设计系统的构成学习内容什么是设计系统颜色系统Color Palette字体系统Typography间距系统Spacing圆角系统Radius实践任务创建一套完整的颜色样式创建一套完整的文本样式创建间距和圆角样式参考资源查看 Material Design 设计系统、Ant Design 设计系统时间投入2-3 小时Day 13 - 设计系统实践学习目标搭建自己的设计系统实践任务创建一个设计系统文件包含以下内容颜色板主色、辅助色、中性色、功能色字体样式H1-H6、正文、辅助文字基础组件按钮、输入框、开关、复选框图标库时间投入3-4 小时Day 14 - 第二周综合练习学习目标综合运用组件和设计系统实践任务使用设计系统组件设计一个完整的用户中心页面要求全部使用组件库中的组件使用 Auto Layout 布局图层结构清晰可以适配不同屏幕宽度时间投入3-4 小时️ 第三周原型交互Day 15-21Day 15 - 原型基础学习目标理解原型模式和连接学习内容原型模式Prototype Tab创建连接Connection交互触发OnClick、OnHover 等动画类型Instant、Dissolve、Smart Animate实践任务制作两个页面之间的跳转添加按钮点击交互尝试不同的动画效果时间投入2 小时Day 16 - 交互动画学习目标掌握 Smart Animate 动画学习内容Smart Animate 原理图层命名要求动画时长设置缓动函数Easing实践任务制作一个侧边菜单滑出动画制作一个卡片展开动画制作一个 Tab 切换动画时间投入2-3 小时Day 17 - 高级交互学习目标学习高级交互功能学习内容拖拽交互Drag滚动区域Scroll固定元素Fix Position叠加层Overlay实践任务制作一个可拖动的底部菜单制作一个带滚动区域的内容页制作一个弹窗Overlay时间投入2-3 小时Day 18 - 微交互设计学习目标设计精致的微交互学习内容按钮状态变化输入框焦点状态开关切换动画加载状态实践任务制作一个完整的按钮交互Default/Hover/Pressed/Loading制作一个输入框交互Default/Focus/Error/Success制作一个开关切换动画时间投入2-3 小时Day 19 - 原型综合练习 - 登录流程学习目标完成一个完整的登录流程原型实践任务设计并制作以下页面登录页注册页忘记密码页首页添加完整交互页面跳转输入框交互按钮反馈错误提示时间投入3-4 小时Day 20 - 原型综合练习 - 导航系统学习目标制作完整的导航系统原型实践任务制作底部 Tab 导航至少 4 个 Tab制作侧边抽屉导航制作顶部导航栏实现 Tab 切换和内容联动时间投入3 小时Day 21 - 第三周综合练习学习目标完成一个可交互的完整原型实践任务选择一个常见 App如微信、美团、小红书临摹其核心流程至少 5 个页面添加完整的交互动画导出原型链接分享时间投入4 小时️ 第四周实战与协作Day 22-30Day 22 - 协作功能学习目标掌握 Figma 协作功能学习内容分享文件Share评论功能Comments多人实时协作版本历史Version History实践任务创建一个分享链接View only在文件中添加评论创建一个版本并命名时间投入1-2 小时Day 23 - 开发者协作学习目标理解开发者的 Figma 使用方式学习内容Dev Mode 介绍查看设计稿标注导出资源Export查看代码片段实践任务从开发者视角查看一个设计稿导出需要的图片资源查看 CSS 代码并理解时间投入2 小时Day 24 - 插件使用学习目标学会使用 Figma 插件提高效率学习内容安装插件常用插件推荐Unsplash图片素材Iconify图标库Content Reel内容填充Autoflow连接线Stark无障碍检查实践任务安装至少 3 个插件在实际项目中使用插件时间投入2 小时Day 25-27 - 期末项目3 天项目目标完成一个完整的产品原型设计项目要求选择一个产品方向如待办事项 App、阅读 App、健身 AppDay 25需求分析与信息架构确定产品定位和目标用户绘制功能结构图绘制用户流程图Day 26界面设计设计至少 8 个核心页面建立完整的设计系统使用组件化方式设计Day 27交互原型添加完整的页面跳转添加微交互动画制作可演示的原型时间投入每天 4 小时Day 28 - 作品整理与导出学习目标整理和展示你的作品实践任务整理设计文件结构创建一个作品展示页导出关键页面预览图准备一份设计说明文档时间投入2-3 小时Day 29 - 复盘与总结学习目标回顾 30 天学习成果实践任务回顾第一天和第三十天的作品对比总结学到的技能列出还需要提升的地方制定后续学习计划时间投入1-2 小时Day 30 - 分享与展示学习目标展示学习成果实践任务将作品发布到 Dribbble/Behance/站酷或者在团队内部分享或者写一篇学习总结文章时间投入2 小时 推荐学习资源官方资源Figma 官方教程Figma YouTube 频道中文教程B 站搜索Figma 教程推荐 UP 主设计师的睡前毒鸡汤站酷高高手Figma 相关课程设计系统参考Material DesignAnt DesignHuman Interface Guidelines灵感网站DribbbleBehancePinterest站酷免费素材Unsplash图片Iconify图标undraw插画 学习建议给前端开发者的特别提示1. 发挥你的优势你理解组件化思维学 Figma 组件会很快你理解布局概念Auto Layout 很容易上手你理解状态管理组件变体很好理解2. 注意思维转换设计追求视觉效果不只是功能实现多关注细节间距、颜色、字体、圆角学会抄优秀的设计慢慢形成感觉3. 实践建议每天保证至少 1 小时专注学习多临摹优秀作品加入 Figma 社群看别人怎么做4. 避免的坑不要只看不练一定要动手不要追求完美先完成再优化不要忽视图层命名和文件组织 进度追踪表周次学习主题完成度第一周基础入门□□□□□□□第二周进阶技能□□□□□□□第三周原型交互□□□□□□□第四周实战协作□□□□□□□□□ 30 天后的下一步完成这个计划后你可以1. 继续深化学习更高级的动画技巧研究动效设计原理学习 3D 设计Figma Spline2. 拓展技能学习动效工具Principle、ProtoPie学习插画技能学习品牌设计基础3. 实战应用在工作中主动承担设计任务参与产品设计讨论建立自己的作品集4. 向产品负责人迈进用 Figma 技能辅助产品原型设计能够快速表达产品想法与设计师高效沟通 写在最后这份学习计划是为你——前端开发者转型产品负责人而定制的。Figma 作为当前最流行的 UI 设计工具掌握它将帮助你更好地与设计师沟通- 理解设计语言减少沟通成本快速表达产品想法- 用原型代替文字描述更直观提升产品竞争力- 设计能力是产品负责人的核心技能之一坚持 30 天你会感谢现在努力的自己如果觉得这篇文章对你有帮助欢迎点赞⭐收藏关注我会持续分享更多前端转型相关内容有任何问题欢迎在评论区留言交流
