之前和一个成都的公司谈好了实习，于是今天就来到公司开始我的实习之旅，之前谈的是测试岗，今天到了之后，发现自己是产品，话说以前对于产品，真的一点都不了解，还好有一个师傅带我，他给我介绍了一下他们产品用的Figma，打算这几天把Figma学会，为了加深印象！那就顺手在掘金上记录下来吧，嘿嘿

也需要和大家强调一下，就是我之后这几篇关于figma的文章，主要是基于FigmaChina发的官方手册Figma中文手册 | FigmaChina，因为手册中没有一些具体的使用用例，所以我这边会按照官方使用手册的一些介绍，来进行实操,然后将用例发出来，供大家参考

Figma是什么

首先我们需要了解，Figma是什么。
我先来谈谈我个人的理解吧，在今天之前，我其实不太了解产品这个职位
在和老板沟通之后，我发现其实产品挺重要的，他需要进行需求分析，然后按照分析出来的需求，设计页面，让开发去进行实现。
话说原来产品也属于研发部啊 那这个Figma呢，就是用来设计页面的，我们将设计的页面发送给前端，前端就照着设计的页面来做，Figma，是可以协作的设计工具。我们可以在 Figma 中设计并且制作原型，更快地将想法转化为产品。前面这段，感觉没什么好介绍的，大家可以自己看 我们今天就从第五个部分开始写！

Figma教程实操

功能界面

工具栏

工具栏包含你在Figma中设计时可能使用的各种工具和功能。工具栏中显示的内容取决于你在画布上选择的内容。
一开始的页面包含以下几个工具 从左到右，分别是：
1、主目录（Main Menu） 菜单包含 Figma 的搜索功能和各种其他功能。你可以按名称搜索各种功能，如果你尝试执行的功能有键盘快捷键，则此处也会列出。
2、移动 / 缩放工具（Move Tool / Scale Tools）
这个小箭头，主要的作用是可以通过它，来对于画布上的元素，图层进行移动或是缩放。当在 Figma 中打开文件时，默认选择移动工具 V，你可以此工具在“图层”面板中选择和重新排序图层，以及在“画布”上移动元素。 单击“移动工具”右侧的下拉图标（或使用快捷键 K），你可以找到缩放工具，然后对于我们的画布与图层进行缩放

3、区域工具（region tools） 也就是用来创建画布的，我这边给大家试验一下
先点击区域工具，然后右边自动会跳出来 这个时候，你可以选择采用哪个框架。框架就像画板一样，可以使用快捷键 A 或 F 使用框架工具。激活框架工具后，你可以从右侧的“属性”面板中选择预定义的框架尺寸

4、形状工具（Shape Tools）
也就是这个矩形的框，点开之后，可以看到有以下的选项，我们可以选择Rectangle(实心矩阵)，Line（线条），Arrow（箭头），Ellipse(椭圆)，Polygon(多边形)，Star（星形）。通过这些选项，比较常规的设计，我们都可以实现出来

这是通过上面的图标，简单做的几个图，第一个，是通过矩阵，我们首先生成一个矩阵，大小自己设计

角的弧度，也可以自己设计

颜色通过这边的fill来调配 还可以将不同的图形组合起来 组合的时候，可能会遇到这种情况，那就是本来想让星星出现在上方，但是现在，移动时，椭圆反而会遮盖住我们的星星，这种情况要怎么解决呢

这时候我们就要观察图层顺序了

我们可以看到，星星的图层，在红色图层的下方，这时候我们就需要将两个图层顺序互换，这样就可以让星星成功显示在红色椭圆的上方

这时，其实我们可以将其和为一组，这样就可以一起移动啦！

我们在对于图片进行排版时，需要对于各个方向位置进行调整，当移动完成后，可能会遇到，比如说这个位置放置不对，那如果一个一个进行移动，很容易发生移动好了，但是每个方向的数据，又需要重新进行调整，以此可以将其何为一组，排除这种情况，但是这也存在别的问题，那就是，建议大家只有确定更改完成之后再合并图层，不然会存在修改困难的问题
关于形状，还有一个知识点就是
不论是多边形，还有星星图案，他的角的数量，都是可以增加的！比如我现在可以把它的五个角，加为六个角，也可以往下递减，都是ok的

今天就写到这吧，累了累了

• 我正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿。