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