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

作者: 武斌著

出版社: 人民邮电出版社

出版时间: 2022-11

版次: 1

ISBN: 9787115583611

装帧: 平装

开本: 16开

纸张: 胶版纸

页数: 304页

正文语种: 简体中文

分类: 计算机与互联网

9 张插图图片

本书对Figma和Framer的使用方法进行了详细讲解，为读者提供详细的图文说明，包括软件基础操作、使用团队组件库和界面设计等。本书第1、2、3章讲解Figma的使用，第4、5章讲解Figma社区和团队协作，第6章讲解界面设计，第7章讲解Framer的使用方法。本书附赠案例学习文件和在线视频，便于读者学习使用。
本书适合UI/UX设计师、设计团队和计划进入界面设计行业的读者学习与参考。武斌，美术学专业毕业，法学双学位，拥有五年互联网设计经验，两年区块链交易所设计经验，一年设计团队管理经验目前在一家海外交易所做 UX Design相关工作，使用Figma完成网站和App相关的设计，有自己的个人网站。 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
内容简介:
本书对Figma和Framer的使用方法进行了详细讲解，为读者提供详细的图文说明，包括软件基础操作、使用团队组件库和界面设计等。本书第1、2、3章讲解Figma的使用，第4、5章讲解Figma社区和团队协作，第6章讲解界面设计，第7章讲解Framer的使用方法。本书附赠案例学习文件和在线视频，便于读者学习使用。
本书适合UI/UX设计师、设计团队和计划进入界面设计行业的读者学习与参考。
作者简介:
武斌，美术学专业毕业，法学双学位，拥有五年互联网设计经验，两年区块链交易所设计经验，一年设计团队管理经验目前在一家海外交易所做 UX Design相关工作，使用Figma完成网站和App相关的设计，有自己的个人网站。
目录:
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

查看详情

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

内容简介:

作者简介:

目录: