课程官网筹备版 · 课程方案待讲师确认,班期与招生信息以正式公布为准
CURRICULUM / 课程内容

一条清晰的学习路径,
八次向前的练习。

先理解,再制作;先完成,再优化。以下为拟定课程方案,具体课时与排课安排待讲师确认。

入门 → 项目实战8 个模块含练习与评价标准
01认识 Figma 与设计工作流

建立文件、页面和图层的组织习惯,理解 Frame、Group 与基础编辑操作。

  • 画布导航、选择与快捷操作
  • Frame、图层命名和页面组织
  • 形状、文字、图片与基础导出
练习产出 · 搭建一张个人介绍卡片
检查标准 · 图层结构清晰,文字可读,图片比例正确
02视觉基础与界面表达

把排版、颜色和间距转化为有层次的界面。

  • 字体层级与阅读顺序
  • 颜色搭配、对比与留白
  • 栅格、对齐及界面一致性
练习产出 · 设计一张活动介绍页
检查标准 · 视觉层级明确,间距规则一致
03自动布局与响应式思维

让界面适应内容变化,减少重复调整。

  • Auto Layout 的方向与间距
  • Hug、Fill 和固定尺寸
  • 嵌套布局、约束与不同宽度适配
练习产出 · 制作可伸缩的课程卡片与列表
检查标准 · 文本变长后仍可正常排布
04组件、变体与复用

把重复元素整理为可维护的设计组件。

  • 主组件与实例
  • 变体、组件属性和状态
  • 命名规范与复用边界
练习产出 · 建立按钮、输入框和卡片组件集
检查标准 · 状态清楚,实例修改不破坏结构
05样式、变量与基础设计系统

用统一规则管理颜色、间距和界面风格。

  • 颜色与文字样式
  • 变量与模式的基础用法
  • 组件说明及使用规范
练习产出 · 整理一份小型 UI Kit
检查标准 · 命名一致,能够说明组件适用场景
06交互原型与用户流程

让静态界面变成可演示、可检查的操作流程。

  • 用户流程与页面关系
  • 连接、触发条件及交互反馈
  • 过渡、浮层和异常状态
练习产出 · 完成课程浏览到报名的交互原型
检查标准 · 主要路径可走通,返回与错误状态合理
07完整项目:学习产品界面

串联需求理解、草图、界面和原型,完成一个完整案例。

  • 目标用户与任务定义
  • 信息架构和低保真草图
  • 关键页面、高保真与迭代
练习产出 · 完成学习产品首页、详情页和学习页
检查标准 · 页面一致,能解释设计选择
08交付整理与作品讲述

把设计过程整理成别人能够理解的交付成果。

  • 文件与组件整理
  • 标注、资源导出与协作说明
  • 案例结构、复盘及后续改进
练习产出 · 提交项目文件、原型及案例说明
检查标准 · 文件可理解,成果与问题对应