figma有哪些提升效率的小技巧

dacihua

今天分享的figma在日常工作中经常使用，简单干燥的总结，希望我们的效率能大大提高

[backcolor=rgba(18, 18, 18, 0.5)]​

编辑切换为居中




添加图片注释，不超过 140 字（可选）

01.图标绘制中的小技巧

我们拿「V」icon举个例子，先来看看常规绘制步骤

第一步：先画矩形；第二步：然后旋转角度.再复制一个.水平旋转；第三步:对齐后给圆角

此时发现有点太大，需要调整高度

问题很明显，调整高度(H)学位结束后，我们必须进行对齐调整。如果我们仍然觉得不够精致，我们必须重复前面的步骤

效率不高，特别烦人，就这么简单icon来回调整几分钟

如果你像我一样做3755@图1倍，图标厚度为1.5像素，这种情况下来回对齐真的会考验你的像素眼睛

事实上，这个问题是我们在绘制之前没有考虑过，比如图标的适应场景，以及是否会调整尺寸

然后我们来看看橙心是如何避免这种情况的

第一步：先画矩形；第二步：复制向上旋转；第三步：整体向上旋转，给圆角

或者上面的问题，需要调整高度

对比两步，前者向上缩放，后者向下缩放

以下操作步骤不手动调整对齐，除了随意调整高度也可以随意调整宽度，自由度会更高

已经画完了，想避免不调整对齐怎么操作？

假设第一种绘制问题现在很高，我们可以水平翻转.垂直翻转，此时你调整高度没有问题，但要调整宽度你必须（水）+垂)调回去

问题就像一个洞，一旦出现就要找到补救的方法，所以一开始就要考虑如何避免

综上所述，在绘制图标之前，我们需要考虑三个问题

1.绘制步骤的顺序

2.使用场景

3.是否需要高度.宽度调整

如何提高效率，就在这些不经意的小细节中

02.对齐

还是375@在1倍图下，经常会遇到0.5px，比如下面的情况

点击底部对齐是不确定的。你觉得我手动调整对齐有点傻吗？

这里只需要把手「对齐像素」关闭，使用快捷键：S+C+逗号，然后点击底部对齐，速度更快

例如，在这种情况下，实际间距为1.5px，但是你看操作面板是显示2px，数据对不起怎么办？手动调整也是不确定的。

这里也是一把「对齐像素」关闭，然后手动输入一个值进去，再去看看是一致的。

例如：0.5px的分割线

一开始没怎么注意，直接画完就在剧中.底部对齐，如果不放大仔细看，根本找不到没有对齐

方法也是如此「对齐像素」关闭它，然后去底部对齐它。你会发现它这次靠近底部。

上面提到的图标技巧与这种方法相匹配nice

如何提高效率意味着每一个细节都不容忽视

图标分类命名规范03

组件命名的方式就像一个子，一圈一圈，也许这里每个人的习惯都会不一样，所以命名方式也会不一样

这里简单分享一下橙心的命名方法

当我们建立规范时，我们通常有一个习惯，就是先归类，颜色.图标.等等，比如腾讯的这种方式

让人看起来很实用.干净.规范

这里拿语雀APP命名使用场景的图标

确定大类后，根据大类，Tab栏目分为小类，如语雀的Tab栏：小记.文档.消息.我的

这一步的命名，如：小记/搜索.小记/消息

继续下去可以分为功能模块和子页面进行延伸，小记/搜索/删除

看完之后，我发现我不知道如何命名组件，所以记住标题中的两个字「归类」

思考一个问题：如何对组件进行分类，然后为自己提供方便？如果你想理解这个问题，试试吧

不一定说规范要做多完整.多么惊艳，能给你多么惊艳，能给你多么惊艳。.给团队带来效率是一个很好的标准

当然，橙心并不一定适合所有人.所有的项目团队都能给我带来效率

如何提高效率，做事要形成自己的方式方法

nb1003

广东钢管