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

也需求和咱们着重一下，便是我之后这几篇关于figma的文章，首要是根据FigmaChina发的官方手册Figma中文手册 | FigmaChina，由于手册中没有一些详细的运用用例，所以我这边会依照官方运用手册的一些介绍，来进行实操,然后将用例发出来，供咱们参阅

Figma是什么

首要咱们需求了解，Figma是什么。
我先来谈谈我个人的了解吧，在今日之前，我其实不太了解产品这个职位
在和老板交流之后，我发现其实产品挺重要的，他需求进行需求剖析，然后依照剖析出来的需求，规划页面，让开发去进行完结。
话说本来产品也属于研发部啊
2204f8f1b5948b111190525f9b8cccd.png
那这个Figma呢，便是用来规划页面的，咱们将规划的页面发送给前端，前端就照着规划的页面来做，Figma，是能够协作的规划东西。咱们能够在 Figma 中规划而且制造原型，更快地将想法转化为产品。前面这段，感觉没什么好介绍的，咱们能够自己看
image.png
咱们今日就从第五个部分开端写！

Figma教程实操

功用界面

东西栏

东西栏包括你在Figma中规划时可能运用的各种东西和功用。东西栏中显示的内容取决于你在画布上挑选的内容。
一开端的页面包括以下几个东西
image.png
从左到右，分别是：
1、主目录（Main Menu）
image.png
菜单包括 Figma 的搜索功用和各种其他功用。你能够按名称搜索各种功用，假如你测验履行的功用有键盘快捷键，则此处也会列出。
2、移动 / 缩放东西（Move Tool / Scale Tools）
这个小箭头，首要的作用是能够经过它，来对于画布上的元素，图层进行移动或是缩放。当在 Figma 中翻开文件时，默认挑选移动东西 V，你能够此东西在“图层”面板中挑选和从头排序图层，以及在“画布”上移动元素。 单击“移动东西”右侧的下拉图标（或运用快捷键 K），你能够找到缩放东西，然后对于咱们的画布与图层进行缩放

image.png

image.png
3、区域东西（region tools）
image.png
也便是用来创建画布的，我这边给咱们实验一下
先点击区域东西，然后右边自动会跳出来
image.png
这个时分，你能够挑选选用哪个结构。结构就像画板相同，能够运用快捷键 A 或 F 运用结构东西。激活结构东西后，你能够从右侧的“特点”面板中挑选预定义的结构尺度
image.png

image.png
4、形状东西（Shape Tools）
也便是这个矩形的框，点开之后，能够看到有以下的选项，咱们能够挑选Rectangle(实心矩阵)，Line（线条），Arrow（箭头），Ellipse(椭圆)，Polygon(多边形)，Star（星形）。经过这些选项，比较常规的规划，咱们都能够完结出来
image.png

image.png
这是经过上面的图标，简单做的几个图，第一个，是经过矩阵，咱们首要生成一个矩阵，大小自己规划

image.png
角的弧度，也能够自己规划

image.png
颜色经过这边的fill来调配
image.png
还能够将不同的图形组合起来
image.png
组合的时分，可能会遇到这种状况，那便是本来想让星星出现在上方，可是现在，移动时，椭圆反而会遮盖住咱们的星星，这种状况要怎样解决呢

image.png
这时分咱们就要调查图层顺序了

image.png
咱们能够看到，星星的图层，在赤色图层的下方，这时分咱们就需求将两个图层顺序互换，这样就能够让星星成功显示在赤色椭圆的上方

image.png

image.png
这时，其实咱们能够将其和为一组，这样就能够一同移动啦！

image.png

image.png
咱们在对于图片进行排版时，需求对于各个方向方位进行调整，当移动完结后，可能会遇到，比方说这个方位放置不对，那假如一个一个进行移动，很容易发生移动好了，可是每个方向的数据，又需求从头进行调整，以此能够将其何为一组，排除这种状况，可是这也存在其他问题，那便是，建议咱们只有确认更改完结之后再兼并图层，否则会存在修改困难的问题
关于形状，还有一个知识点便是
不论是多边形，还有星星图画，他的角的数量，都是能够添加的！比方我现在能够把它的五个角，加为六个角，也能够往下递减，都是ok的

image.png

image.png

image.png
今日就写到这吧，累了累了

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