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

扉页

内容提要

前言

资源与支持

第1章 初识Figma

1.1 开启Figma之旅

1.1.1 Figma介绍

1.1.2 创建Figma账户

1.1.3 登录Figma

1.1.4 下载与安装Figma

1.1.5 给手机安装Figma Mirror App

1.1.6 使用Figma Mirror App预览设计文件和原型

1.2 你是这样的Figma

1.2.1 编辑器介绍

1.2.2 创建团队

1.2.3 新建项目

1.2.4 新建文件

1.2.5 导入Sketch文件

1.2.6 将文件导入Figma

1.2.7 添加/显示评论

1.2.8 分享设计文件和原型

1.2.9 合作设计

1.2.10 团队资源库

练习：在“Design System”项目中创建一个名为“UI Kit”的文件

第2章 Figma基础

2.1 文件浏览器

2.1.1 了解文件浏览器

2.1.2 查看文件

2.1.3 管理最近浏览的文件

2.1.4 在草稿、项目和账户中移动文件

2.2 关于文件的那些事儿

2.2.1 Figma中的文件

2.2.2 Figma中的页面

2.2.3 添加和管理页面

2.2.4 给文件设置封面

2.2.5 修改文件权限

2.2.6 删除文件

2.2.7 恢复已删除的文件

2.2.8 版本记录

2.3 形状和工具

2.3.1 Figma中的画框

2.3.2 组

2.3.3 形状工具

2.3.4 矢量网络

2.3.5 编辑对象

2.3.6 使用缩放工具调整对象大小

2.3.7 将参考线添加到画布或画框

2.3.8 布尔运算

实战：对两个矩形分别进行5种布尔运算

2.3.9 蒙版遮罩

2.4 图层

2.4.1 批量重命名图层

2.4.2 锁定和解锁图层

2.4.3 显示和隐藏图层

2.4.4 填充

2.4.5 阴影和模糊

实战：制作一个带有背景模糊效果的iPhone 8导航栏

2.4.6 混合模式

2.4.7 约束

2.4.8 布局网格

2.4.9 约束与布局网格的结合使用

实战：给移动端的顶层画框设置布局网格

2.5 颜色

2.5.1 配置颜色

2.5.2 查看和调整颜色

2.5.3 颜色吸取工具

2.6 文本

2.6.1 文本属性

2.6.2 美化文本

2.6.3 给文本添加链接、项目符号、图标字体

2.6.4 启用本地字体

2.6.5 管理缺少的字体

2.6.6 将文本转换为矢量路径

2.7 图片

2.7.1 添加图片

2.7.2 将GIF图片添加到原型

2.7.3 批量添加图片

2.7.4 裁剪图片

2.7.5 调整图片属性

2.8 排版

2.8.1 选择图层或对象

2.8.2 利用图层顺序调整图层的纵向位置

2.8.3 对齐

2.8.4 整理

2.8.5 调整对象的位置和尺寸

2.8.6 测量距离

2.8.7 对象之间的关系

2.8.8 使用智能选择排列对象

2.8.9 使用自动布局创建动态框架

第3章 Figma进阶

3.1 样式

3.1.1 了解样式

3.1.2 创建颜色、文本、效果和网格样式

3.1.3 将样式应用到对象上

3.1.4 管理和共享样式

实战：创建带有文字、颜色、效果和网格样式的文件，并发布到团队组件库

3.2 组件和变体

3.2.1 创建组件

实战：创建“单选框”组件

3.2.2 创建变体

3.2.3 命名和整理组件

3.2.4 创建组件的实例

3.2.5 切换组件的实例

3.2.6 组件和实例之间的“秘密”

3.3 原型

3.3.1 缓动

3.3.2 基础原型

3.3.3 设置展示原型的设备和起点

3.3.4 触发

3.3.5 动作

3.3.6 动画

3.3.7 构建完善的交互原型

3.3.8 固定滚动位置

3.3.9 溢出行为

3.3.10 智能动画

3.3.11 叠加原型

实战：创建叠加层

3.3.12 分享原型

3.3.13 在移动设备上查看原型

3.3.14 给原型添加评论

3.4 导出

3.4.1 导出PNG、JPG、SVG或PDF文件

3.4.2 图标切片的命名规则推荐

第4章 社区

4.1 插件

4.1.1 查找并安装插件

4.1.2 在编辑器中使用插件

4.1.3 管理插件

4.2 社区

4.2.1 浏览社区

4.2.2 使用社区文件

4.2.3 构建自己的社区页面

第5章 团队协作

5.1 团队组件库

5.1.1 将组件和样式发布到团队组件库

5.1.2 从团队组件库中删除文件

5.1.3 从已发布的团队组件库中删除部分样式和组件

5.2 检查面板的使用

5.2.1 了解检查面板

5.2.2 观察模式

第6章 使用Figma设计页面

6.1 基础样式和约束规则

6.1.1 布局网格样式规范

6.1.2 文本样式规范

6.1.3 颜色样式规范

6.1.4 效果样式规范

6.1.5 间距规范

6.1.6 边界半径规范

6.1.7 线条规范

6.1.8 图标规范

6.2 基础组件

6.2.1 按钮变体组件

6.2.2 输入框变体组件

6.2.3 文字组合变体组件

6.2.4 卡片变体组件

6.2.5 提示变体组件

6.2.6 导航栏

6.2.7 产品Logo

第7章 Framer应该这样用

7.1 仪表盘

7.1.1 仪表盘介绍

7.1.2 创建新的Framer项目

7.1.3 将Figma、Sketch或Framer Desktop文件导入Framer

7.1.4 草稿和最近浏览的作用

7.1.5 项目示例和教程讲解

7.1.6 善用存档

7.1.7 Framer的团队功能应该怎样使用

7.2 编辑器

7.2.1 工具栏

7.2.2 画布

7.2.3 图层面板

7.2.4 属性面板

7.3 图层

7.3.1 文本图层

7.3.2 堆叠图层

7.3.3 滚动图层

7.3.4 翻页图层

7.3.5 图形图层

7.4 开始设计

7.4.1 默认组件

7.4.2 配套包

7.4.3 分享颜色

7.4.4 模板

7.4.5 响应式设计

7.4.6 绘图模式

7.4.7 替换

7.5 使用Framer制作原型

7.5.1 预览

7.5.2 动画编辑器

7.5.3 自动过渡

7.5.4 魔术动画

7.5.5 组件画布

7.5.6 在组件画布中使用变量和变体

7.5.7 变量

7.5.8 变体

附录

Figma快捷键

Framer快捷键