【Figma】一.初识设计工具Figma，简单尝试和笔记

figma是一个直观的设计工具，figma.com

基本布局

打开一个初始的项目后，新界面

• 左边是类似于大纲一样的组件导航树，可以切换显隐和锁定，使用鼠标配合shift可以任意多个组件的位置和层级覆盖关系
• 中间是画布
• 底部是快捷工具
• 右边是画布上任意元素的细节调整区域

常用技巧

• figma画布感受上是无限延伸的，可以在一个画布上画很多东西
• 画东西可以先在旁边放大画好，然后拖动到对应的位置上再缩放
• 图形、边框、颜色、圆角、材质等的组合就可以画出很多很多好看有趣的图案了

常用名词

strock 边框
effect 特效如阴影等
corner radius 边角
fill 填充颜色
demensions 宽高
position 方位和对齐方式

一些概念延伸

• Frame
  相当于画布或者图层的概念，无限延伸，通过底部快捷栏中的#字图案创建，一个界面可以有很多个画布组成，每个画布独立互不干扰，可以单独显隐和锁定（锁上就不会被误编辑）
  Frame之间有层级关系，通过拖动Frame的次序来控制是在上层还是在下层

动手做实例

根据以上概念来绘制一个简单的房屋图形

通过简单的图形和颜色组合上去，窗户使用的是四个白色矩形加边框，也可以使用一个矩形中间用划线连接上下左右。

简单感受一下图形、圆角、边框、阴影的使用

钢笔工具

上手感受和技巧

• 钢笔工具非常强大，几乎可以用来创建任意图形
• 不用追求一次画出完美曲线。可以先用点击的方式，大致勾勒出形状的轮廓，然后再双击形状，进入编辑模式，拖动锚点和控制手柄来调整曲线的弧度。

示例

以下是花费半小时时间使用钢笔工具画出的枫叶骨架

先画出了左侧简单的大概轮廓;
再双击编辑，使用钢笔点上去两点后，ctrl按住，拖动两线之间的位置，可以调整直线为曲线。
左侧调整完后复制一份，旋转180度，再上下翻转，相当于做了一个镜像，拼凑到一起。
叶柄和脉络使用钢笔工具画出来即可，使用路径增宽工具画出粗壮的叶柄和脉络；
再微调每个图形的长度。这里也可以用三角图形来完成，不过钢笔工具更便捷一些。

使用figma图形和画笔等画出的所有图形均可导出为svg