Figma是什么
Figma是一款在线的 UI 设计软体，它可以用来设计网页等手机和用户界面，展示操作时的互动功能，同时也可以让团队成员针对设计内容进行即时的沟通和协作。
Figma 的一大特色就是可以直接通过浏览器来操作，项目都是存储在云端，我们可以从 Figma 首页的右上角点击免费注册，可以使用 Google账号或者是自己的邮箱，如果你喜欢桌面端的软件，它也支持 Mac 和 Window的桌面软件。
Figma 画布与图层
预设画布
快捷键 a ，Figma预设了很多尺寸的画布，让我们可以非常方便的开始创作。
图片等比例缩小
按下 r 键 切换到矩形工具，画一个 height 80的矩形。
拖入图片或者按下 ctrl + shift + k 选择图片，选择图片，按下 shift 移动鼠标等比例缩放图片大小。
注意图层之间的层级，图片要在矩形上面，这样才会显示。
矩形样式
选中矩形，在右侧栏，你可以更改不一样的填充样式，如渐变填充，图片填充，也可以给矩形加搭边，阴影等其他效果。
网格系统
网格系统非常的有用，通常情况下，我们设计一个APP，需要有一定的边界，或者说规范化元素之间的边距等，这个时候就可以用网格系统。
选中iPhone8 图层，在右侧栏找到布局网格，点+
点击它
设置网格的属性
复用风格
点击 + ，取一个名称。
插件外挂
安装插件
右键选择插件，打开。
输入 user ，找到一个随机头像的插件
使用插件
回到figma，右键选择插件，就可以看到所有安装的插件。
icon插件
安装 iconify 插件，我们要给页头加上菜单和搜索两个icon。
响应式
对于不同尺寸的屏幕，我们需要查看它的显示效果，如果不设置响应式的话，调整页面会这样：
设置响应后：
约束属性，设置logo 居中，居上，这样无论页面宽度多大，它都会固定在中间和顶部。
水平滚动
设置自动布局，可以快速的调整横版，竖版的布局。
调整大小，并设置水平滚动。
点击右上角的预览播放按钮，看到如下效果。
固定导航栏
将顶部导航编组，选中所有元素按 ctrl + g ，然后给这个组勾选 “滚动时保持固定”，右上角预览
Components
对于我这个前端来说，Components 真的是太好理解了，对于没有基础的人来说，Components 就是一个模板。
来看个例子，假设我们要修改上面的头像全部修改为其它形状，如果不是组件，可能要一个个修改，如果是组件了，就可以一键修改所有：
叠加图层
- 新建个矩形，拉出画布，转换为画框
- 添加内容
- 拉一个跳转交互的线
4. 设置打开叠加，从底部弹出等
查看效果
切换页面
和上面打开叠加图层类似，我们新建一个页面，拉个交互线，就可以实现切换页面了。
作者：Geekape
博客：geekape.net
为成为独立开发者而奋斗