初识Figma（ 相见恨晚）

最后因为制裁Dji的Figma大量出现在了国内各大头条新闻上，我也好奇这是一个怎样的软件，于是乎就尝试着去使用了一下，好家伙，确实是个好家伙！！！

这一款运行在云端的UI设计软件确实让我用起来得心应手，简单的学习了几分钟(如果你有PS、AI、Coreldraw基础)就基本可以上手做东西了。下面我就要需要安利这款软件了，因为我也希望等我强大的时候可以制裁一下我~

一、产品特点(免费版)

目前我基本都是个人在使用，免费版足以，在草稿箱里不限文件的数量，但在Team的项目里会有所限制。但使用空间不限，画布空间在 X、Y 轴的上限为 -65,000 到 +65,000。这样的空间应该是可以画各种内容出来，只是在管理与整理上有所不便，所以有条件的同学可以尝试收费版。目前针对学生与教育从业者是免费使用的。

1、先来说免费版的限制：

• 只能建1个工程。
• 工程下只能有3个文件。
• 文件里只能建3个分页。

2、产品特点：

• 免费版不限制工具的功能,
• 云端软件，只需要打开网址：https://www.figma.com 即可使用，当然也有客户端软件(套壳，本质上还是基于网页的)
• 跨多平台（只要有浏览器就可以使用了）可运行到任何电脑上。
• 多人协作，实时共享，不无需保存。
• 插件与模板多，可出售自己的设计。
• 运行速度快，不占用本地运算，打开与设计无卡顿现象。
• 社区完善，有大量免费的资源。
• 集合了各大设计软件的功能，并保留了其快捷键，平滑切换。
• 优点太多了，需要在使用时才能发现~ 

二、使用技巧

•  输入颜色值时，灰色只需要输入数字6，会自动补全为#666666,输入de会被全为 #dedede,以此类推。
• 在输入宽度、高度里可以使用运算符，输入100+1会自动计算结果。
• 建立自己的颜色库，使用颜色库里的颜色，方便统一调整与修改。
• 多建立组件，组件化处理再模块可以快速修改内容。
• 尽量使用快捷键，可以让设计速度翻倍。
• 使用 Shift + R 快捷键启用画布上显示标尺
• 锁定图层 以防止意外编辑。也无法在画布中移动它。但仍然可以在属性面板中更改锁定图层的属性。

三、图层类型

在figma里通过小图标显示并区别图层的类型，我们可以记下图内容以区别。

四、概念与术语解释

1、页面

页面允许你在单个文件中创建单独的画布。你可以向文件添加的无限个页面。如果你的页面太多或者你的文件变得越来越大，你可能需要考虑使用新文件。

页面非常适合：

• 将存储与文件相关的组件和样式
• 设计的迭代
• 区分设计稿版本
• 针对不同的桌面或移动平台进行设计
• 创建不同的设计原型

2、图层面板

你添加到画布的任何框架，组或对象都将显示在图层面板中。 新的图层将添加到列表的顶部，或者它所在的组或框架的顶部。 图层面板中显示了图层的嵌套关系，你可以单击“框架”或“组”旁边的箭头以查看任何嵌套的图层： 

3、视图设置

可以放大、缩小视图，快捷方式可以按住ctrl + 鼠标滚动操作。也可以使用快捷缩放到合适的区域。

4、工具栏

菜单（Menu） #菜单包含 Figma 的搜索功能和各种其他功能。你可以按名称搜索各种功能，如果你尝试执行的功能有键盘快捷键，则此处也会列出。

移动 / 缩放工具（Move Tool / Scale Tools） #当您在 Figma 中打开文件时，默认选择移动工具 V，你可以此工具在“图层”面板中选择和重新排序图层，以及在“画布”上移动元素。 单击“移动工具”右侧的下拉图标（或使用快捷键 K），你可以找到 缩放工具。

形状工具（Shape Tools） #除了使用钢笔工具绘制形状之外，你还可以在 Figma 中使用许多默认形状。单击矩形旁边的下拉菜单以查看 可用的形状。

框架工具（Frame Tool） #在 Figma 中，框架就像画板一样，你您可以使用快捷键 A 或 F 使用 框架工具。 激活框架工具后，你可以从右侧的“属性”面板中选择预定义的框架尺寸。

钢笔工具（Pen Tool） #使用用钢笔工具在矢量网络上绘制自定义形状和图标。

文本工具（Text Tool） #使用快捷键 T 将 文本对象 添加到设计中。

评论工具（Comment Tool） #评论工具 C 允许你与其他团队成员快速交换意见，任何对文件具有查看或编辑权限的人都可以使用评论工具。

编辑对象（Edit Object） #在画布上绘制形状后，使用“编辑对象”可以进入矢量编辑模式。

5、属性面板

面板顶部有三个选项，你可以在以下选项卡之间切换：

设计（Design）

允许你查看，添加，删除或更改设计中对象的属性。如果在设计面板中未选择任何内容，则可以查看文件本地的所有 样式。你还可以更新画布的背景颜色。

• 对齐和分布（Alignment and Distribution） 
• 框架的尺寸和方向（Frame Size and Orientation） 
• 画布上的位置（X和Y）（Position on the Canvas） 
• 对象的尺寸（宽度和高度）（Dimensions of the Object） 
• 实例（Instance） 
• 布局约束（Constraints） 
• 布局网格（Layout Grid） 
• 图层（混合模式）（Layer）
• 背景（Background）
• 文字（Text） 
• 填充（Fill） 
• 描边（Stroke） 
• 图层效果（Effects） 
• 导出（Export） 

原型（Prototype）

可以访问所有原型相关的功能。打开此选项卡，你将进入原型模式。你可以在框架之间建立连接，然后你可以模拟用户可能与其进行的交互。

原型面板包含四个部分：

• 触发方式（Trigger）：选择使用何种交互方式。
• 动作（Action）：决定原型如何响应用户的交互。
• 溢出方式（Overflow Behavior）：定义用户如何与超出框架边界的元素进行交互。
• 原型设置（Prototype Settings）：定义演示的设备，背景颜色和起始页面。 

代码（Code）  

属性面板中的第三个选项是 Code 选项卡，你可以在代码面板中查看如何中实现设计。

你可以选择以下不同格式：CSS（Web 开发）、iOS、Android

除非注明，网络人的文章均为原创，转载请以链接形式标明本文地址：https://www.55mx.com/post/198