Figma+Framer打造更好的交互设计

Figma+Framer打造更好的交互设计

第　1章 初识Figma
1．1　开启Figma之旅/11
1．1．1 Figma介绍/11
1．1．2 创建Figma账户/12
1．1．3 登录Figma/14
1．1．4 下载与安装Figma/14
1．1．5 给手机安装Figma Mirror App/16
1．1．6 使用Figma Mirror App预览设计文件和原型/17
1．2　你是这样的Figma/19
1．2．1 编辑器介绍/19
1．2．2 创建团队/24
1．2．3 新建项目/26
1．2．4 新建文件/27
1．2．5 导入Sketch文件/29
1．2．6 将文件导入Figma/30
1．2．7 添加/ 显示评论/31
1．2．8 分享设计文件和原型/31
1．2．9 合作设计/33
1．2．10 团队资源库/33
练习： 在“Design System”项目中创建一个名为“UI Kit”的文件/34

第　2章 Figma基础
2．1　文件浏览器/36
2．1．1 了解文件浏览器/36
2．1．2 查看文件/38
2．1．3 管理*近浏览的文件/39
2．1．4 在草稿、项目和账户中移动文件/40
2．2　关于文件的那些事儿/40
2．2．1 Figma中的文件/41
2．2．2 Figma中的页面/41
2．2．3 添加和管理页面/42
2．2．4 给文件设置封面/44
2．2．5 修改文件权限/45
2．2．6 删除文件/46
2．2．7 恢复已删除的文件/46
2．2．8 版本记录/47
2．3　形状和工具/48
2．3．1 Figma中的画框/48
2．3．2 组/51
2．3．3 形状工具/51
2．3．4 矢量网络/57
2．3．5 编辑对象/58
2．3．6 使用缩放工具调整对象大小/59
2．3．7 将参考线添加到画布或画框/60
2．3．8 布尔运算/61
实战：对两个矩形分别进行5种布尔运算/62
2．3．9 蒙版遮罩/63
2．4　图层/64
2．4．1 批量重命名图层/64
2．4．2 锁定和解锁图层/66
2．4．3 显示和隐藏图层/67
2．4．4 填充/68
2．4．5 阴影和模糊/70
实战：制作一个带有背景模糊效果的iPhone 8导航栏/73
2．4．6 混合模式/74
2．4．7 约束/75
2．4．8 布局网格/78
2．4．9 约束与布局网格的结合使用/83
实战：给移动端的顶层画框设置布局网格/84
2．5　颜色/85
2．5．1 配置颜色/85
2．5．2 查看和调整颜色/86
2．5．3 颜色吸取工具/87
2．6　文本/88
2．6．1 文本属性/88
2．6．2 美化文本/93
2．6．3 给文本添加链接、项目符号、图标字体/94
2．6．4 启用本地字体/98
2．6．5 管理缺少的字体/98
2．6．6 将文本转换为矢量路径/99
2．7　图片/101
2．7．1 添加图片/101
2．7．2 将GIF图片添加到原型/103
2．7．3 批量添加图片/103
2．7．4 裁剪图片/105
2．7．5 调整图片属性/105
2．8　排版/111
2．8．1 选择图层或对象/111
2．8．2 利用图层顺序调整图层的纵向位置/113
2．8．3 对齐/114
2．8．4 整理/115
2．8．5 调整对象的位置和尺寸/115
2．8．6 测量距离/117
2．8．7 对象之间的关系/118
2．8．8 使用智能选择排列对象/119
2．8．9 使用自动布局创建动态框架/122

第3章　Figma进阶
3．1　样式/130
3．1．1 了解样式/130
3．1．2 创建颜色、文本、效果和网格样式/130
3．1．3 将样式应用到对象上/131
3．1．4 管理和共享样式/133
实战：创建带有文字、颜色、效果和网格样式的文件，并发布到团队组件库/139
3．2　组件和变体/140
3．2．1 创建组件/141
实战：创建“单选框”组件/143
3．2．2 创建变体/144
3．2．3 命名和整理组件/155
3．2．4 创建组件的实例/156
3．2．5 切换组件的实例/157
3．2．6 组件和实例之间的“秘密”/159
3．3　原型/161
3．3．1 缓动/161
3．3．2 基础原型/164
3．3．3 设置展示原型的设备和起点/166
3．3．4 触发/168
3．3．5 动作/170
3．3．6 动画/171
3．3．7 构建完善的交互原型/172
3．3．8 固定滚动位置/175
3．3．9 溢出行为/176
3．3．10 智能动画/179
3．3．11 叠加原型/182
实战：创建叠加层/185
3．3．12 分享原型/185
3．3．13 在移动设备上查看原型/186
3．3．14 给原型添加评论/186
3．4　导出/188
3．4．1 导出PNG、JPG、SVG或PDF文件/188
3．4．2 图标切片的命名规则推荐/191

第4章　社区
4．1　插件/194
4．1．1 查找并安装插件/194
4．1．2 在编辑器中使用插件/196
4．1．3 管理插件/198
4．2　社区/200
4．2．1 浏览社区/200
4．2．2 使用社区文件/202
4．2．3 构建自己的社区页面/203

第5章　团队协作
5．1　团队组件库/207
5．1．1 将组件和样式发布到团队组件库/207
5．1．2 从团队组件库中删除文件/209
5．1．3 从已发布的团队组件库中删除部分样式和组件/210
5．2　检查面板的使用/211
5．2．1 了解检查面板/212
5．2．2 观察模式/214

第6章　使用Figma设计页面
6．1　基础样式和约束规则/216
6．1．1 布局网格样式规范/216
6．1．2 文本样式规范/217
6．1．3 颜色样式规范/219
6．1．4 效果样式规范/221
6．1．5 间距规范/223
6．1．6 边界半径规范/224
6．1．7 线条规范/225
6．1．8 图标规范/226
6．2　基础组件/227
6．2．1 按钮变体组件/228
6．2．2 输入框变体组件/228
6．2．3 文字组合变体组件/229
6．2．4 卡片变体组件/230
6．2．5 提示变体组件/232
6．2．6 导航栏/232
6．2．7 产品Logo/234

第7章　Framer应该这样用
7．1　仪表盘/236
7．1．1 仪表盘介绍/236
7．1．2 创建新的Framer项目/237
7．1．3 将Figma、Sketch或Framer Desktop文件导入Framer/238
7．1．4 草稿和*近浏览的作用/240
7．1．5 项目示例和教程讲解/241
7．1．6 善用存档/242
7．1．7 Framer的团队功能应该怎样使用/243
7．2　编辑器/247
7．2．1 工具栏/248
7．2．2 画布/256
7．2．3 图层面板/259
7．2．4 属性面板/261
7．3　图层/266
7．3．1 文本图层/266
7．3．2 堆叠图层/268
7．3．3 滚动图层/270
7．3．4 翻页图层/271
7．3．5 图形图层/272
7．4　开始设计/273
7．4．1 默认组件/273
7．4．2 配套包/281
7．4．3 分享颜色/283
7．4．4 模板/284
7．4．5 响应式设计/285
7．4．6 绘图模式/286
7．4．7 替换/287
7．5　使用Framer制作原型/288
7．5．1 预览/288
7．5．2 动画编辑器/290
7．5．3 自动过渡/292
7．5．4 魔术动画/293
7．5．5 组件画布/293
7．5．6 在组件画布中使用变量和变体/294
7．5．7 变量/295
7．5．8 变体/297

Figma快捷键/299
Framer快捷键/303