Figma常用工具快速上手(二)

1. 常用工具

熟悉 Sketch 的同学看到Figma的工具肯定会很欣慰，它们的重合度很高。

框架工具（Frame）

在 Figma 中一个自由调整图层的边界就称为框架（Frame），相当于Sketch中的画板。不过在Sketch中组件通常会新开一个子页来整理组件库，Figma 则大都在 Frame 里进行管理。

矢量图形工具 (Vector)

矢量图形是在设计进程中最常用的工具之一，在进入Figma 后，你可以在顶部工具栏找到它的身影。

图形工具中包括：矩形，线条，箭头，椭圆，多边形，星形，置入图片几类。可以发现他们的快捷键跟Sketch的也都保持一致。

创建出一个新的图形之后，可以清晰的看到这个图形上所包含的一些控制点，方便进行后续的一些操作，并且各有特色。

这里值得一提的便是椭圆，星形，箭头这几个工具。丰富的形状控制点，极大的方便了设计时的操作。

椭圆

三个控制点分别对应，内圆半径，起点位置，终点位置

星形

三个控制点分别对应尖角圆角，边长度，角数量

箭头

Figma 的箭头工具可以设置两端箭头，并且对于添加转折点极为友好

文字工具 （Text）

Figma 当前对于中文字符的支持已经提升了相当大的程度了，不过还是有些不太友好的地方。如果直接在画布中进行汉字输入，大概率有一半的文字是无法正常显示的。

针对这个问题，Figma 官方给出了相应的解决办法：下载 Figma 的 Font Helper。不过讲实话，我在这么操作之后还是存在文字无法显示的问题，所以我又下载了 Better Font Picker 和 Font Expolore 这两款插件，也算是解决了这个难题。

另外，Figma 可以将 emoji 添加到文本内容当中：

macOS

1. 创建一个文本对象
2. 使用 control + command + 空格来显示表情符号选择器
3. 输入你喜欢的表情符号的名称，或单击以选中

Windows

首先在任务栏中显示触摸键盘图标

1. 创建一个文本对象
2. 单击触摸键盘图标
3. 选择键盘中的表情符号按钮

相对于对中文字符的保守，Figma 对英文字符可以说是特别的友好，Figma 支持 Google Web Fonts，并且支持使用 OpenType 功能。OpenType 是可缩放字体的跨平台格式，这样在元素中可以更加自如的控制字体的样式。

2. 手册与快捷键

Figma 的操作界面简洁而美观，一个又一个的图标排列的整整齐齐，功能按钮也都隐藏在这些图标之后。刚入手的同学对这样简洁的页面可能会有一些困惑，因为一些深层的操作功能确实需要仔细的探索后才能发现。

当然 Figma 官方也考虑到了这个问题，它详细丰富的官方文档可以一步步教你成为 Figma 大佬。如果不喜欢看英文文档的同学还可以看看Figma的中文网，翻译的非常专业。链接

help.figma.com/hc/en-us

figmachina.com/guide/

这里也将 Figma 的常用快捷键汇总了一下，相信你在熟悉了这些快捷键之后，再配合上 Figma 的组件化流程，设计工作会变得更加轻松~

3. 总结

本文简单梳理了一下 Figma 的工具和快捷键，这样在后面进行页面和组件化设计时，可以更清晰的对应起功能。我一直觉得快捷键的使用是一个必要的过程，这样在做复杂且庞大的项目时可以更加专注于项目本身，有助于创造力的发挥，设计本身就是一件在既定框架里进行创造的工作，这个框架的边界便在于设计师自身的积累和天赋。各位加油~