资源介绍
视频数量：20个
总时长：2小时40分
课程介绍：
Figma实战课：从零搭建一个能写进作品集的SaaS仪表盘
你有没有过这种时刻——打开Figma，盯着空白画布，心里知道自己想做个看起来专业的东西，但就是不知道从哪儿开始？尤其是SaaS仪表盘这种自带"专业感"的项目，光想想侧边栏、数据图表、筛选按钮、通知面板堆在一起的画面，心里就没底了。如果有人能把整个流程拆开，从理解需求、画草图，到搭框架、做组件，再到加微交互、把原型跑通，一步步带你走完，事情就不一样了。这门Figma SaaS仪表盘课程做的就是这个。
讲师Ahmed Al-Hasan有四年多UI/UX设计经验，长期做数字产品和各类仪表盘的设计。课程开头他不教你按按钮，而是先带你弄明白一件事：拿到设计需求，应该怎么读懂它、拆解它，再转化成视觉层面的决策。这也是为什么第一章叫"项目搭建与规划"。
一、项目规划阶段
很多人学UI喜欢直接跳进Figma拖组件，画到一半才发现不对——颜色不对、间距不对、信息层级也不对。这门课思路不同：先带你理解一份典型SaaS仪表盘的设计简报，看看真实项目里需要关注哪些维度——用户是谁、数据展示的优先级怎么排、不同模块之间是什么关系。
弄清这些之后，用纸笔画布局草图。这个环节看着土，但对结构化思考特别有用——侧边栏放哪儿、顶部页眉要什么信息、主体区域怎么分，这些问题在草图上解决，到Figma里才不会反复返工。
草图定下来就进Figma搭基础框架。课程演示怎么设置画板尺寸、网格系统、间距规范，确定整个项目的视觉方向。这些琐碎的东西，恰恰是"随便画"和"专业出图"的分界线。
二、搭建界面结构
骨架有了，第二章才是真正在Figma里拼装界面，覆盖一个完整仪表盘最核心的四个区域。
侧边栏导航是仪表盘的"门面"，也是用户进来后第一个接触的控件。课程演示怎么设计它的视觉层级、图标风格、菜单展开方式，以及怎么在不同状态下都保持清晰。
顶部页眉和搜索区承担全局操作——搜索框、用户头像、通知入口、设置按钮都在这里。课程告诉你怎么让这块区域信息密度刚好够用，既不拥挤也不空荡。
仪表盘的核心是数据展示，卡片和统计模块是本章重点。KPI数字、趋势图标、说明文字怎么排布、怎么配色、怎么用阴影留白突出重点，都会讲到。
筛选下拉菜单看着不起眼，却是数据型界面里使用频率很高的控件。课程专门教你做这个组件，包括展开态、选中态，以及和整体风格的统一。
三、主界面设计
结构搭完，第三章开始往仪表盘里填真正的内容，也是最能体现设计功底的部分。
任务卡片是仪表盘里最常见的元素，需要承载标题、描述、状态标签、负责人头像、时间戳这么多信息，但卡片又不能太大太重。课程演示怎么在有限空间里做出信息清晰、视觉舒适的卡片，同时让不同状态——紧急、待办、进行中、已完成——之间的区分足够明确。
如果说任务卡片是文字型内容，那表格和图表就是数据型内容。讲师带你一个一个重新创建KPI图表，包括柱状图、折线图、饼图这些常见形式。重点不是按按钮自动生成图表——Figma也没有这功能——而是用最基础的几何图形和文本，自己拼出干净、精确、可控的数据可视化组件。
讲师特别强调了一种思维：不要"差不多就行"，每个像素、每条间距都要严格对齐。这听起来有点强迫症，但这就是专业和业余的差距。课程演示一个具体练习——把现成图表复制一份，然后拆解、删除、重新搭建，在过程中理解每个图形元素背后的设计逻辑。
最后还有一节课专门做"UI细节打磨"。讲师回过头审视已经做好的设计，找出"看起来还行但其实可以更好"的地方。比如仪表盘里同时出现绿、红、蓝、黄、紫各种鲜艳颜色，虽然每种都有功能——绿色代表增长、红色代表下降、黄色代表注意——但堆在一起时用户注意力被反复拉扯，整体视觉舒适度就下降。讲师演示怎么用更柔和的色系替换过亮的颜色，同时保留信息传达的有效性。这种"回过头挑刺"的习惯，是设计师成长最快的方式。
四、原型与微交互
静态界面截图和可交互原型给人的感觉完全不同。第四章专门讲怎么把静态设计变成可以点击、切换、体验的完整原型。
从最基本的交互开始：按钮的悬停态和按下态。鼠标移上去颜色变深、阴影变明显，按下去再压回去一点点，这些细节对体验影响很大。
接着是面板折叠功能。左侧边栏不需要时收起来，给主内容区腾空间，这种交互几乎所有专业应用都有。课程演示怎么用Figma的Prototype功能实现，包括折叠动画时长、缓动曲线的选择。
侧边栏菜单项的悬停交互是另一个细节——鼠标移到某一项时背景色变化，旁边图标可能也有微妙动效。课程教你做这种"看起来很自然"的微交互。
弹窗通知面板是另一个常见组件，课程演示从侧边滑入的通知列表怎么做，包括通知项布局、时间戳展示、整体视觉风格。
最后把前面做好的所有页面用Prototype连起来，形成完整的可交互原型。从打开应用看首页，到点击筛选条件、查看任务详情，再到收起侧边栏、打开通知面板，整个流程都能顺畅跑通。
五、最后的打磨与课后练习
最后一部分是预览和测试原型，确保每个交互都没问题、每个状态都符合预期。
课程还设计了一个课后练习——让你自己动手设计一个SaaS仪表盘。不是"随便做做"的作业，而是真正把前面学到的方法论应用一遍：从理解需求、画草图、搭框架、做组件、加交互，完整走一次。做完之后，手上就有了一个可以放进作品集的真实项目。
适合谁来学
如果已经掌握Figma基本操作，了解画板、组件、属性面板这些概念，想通过完整真实项目来提升设计能力和方法论，这门课就很适合。如果你是UI初学者，已经看过一些Figma入门教程，但不知道怎么把零散知识点串成完整项目，这门课也能帮到你——课程节奏不快，讲师一步步演示自己的思考过程，不只告诉你"做什么"，还告诉你"为什么这么做"。如果你是产品经理或独立开发者，需要自己画原型图沟通想法或者测试概念，这门课同样有价值：不需要从零学设计理论，跟着做一遍就能产出专业水准的原型。
两小时四十分钟，二十节课，从需求理解到原型交付，完整覆盖了一个SaaS仪表盘从无到有的全过程。课程不会承诺你学完就变成设计大神，但它能让你面对真实设计任务时，心里有底、手上有活。