惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

V
Visual Studio Blog
I
InfoQ
H
Help Net Security
GbyAI
GbyAI
博客园 - 叶小钗
Recent Announcements
Recent Announcements
Engineering at Meta
Engineering at Meta
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
爱范儿
爱范儿
Y
Y Combinator Blog
L
LangChain Blog
腾讯CDC
酷 壳 – CoolShell
酷 壳 – CoolShell
WordPress大学
WordPress大学
Stack Overflow Blog
Stack Overflow Blog
F
Fortinet All Blogs
G
Google Developers Blog
Apple Machine Learning Research
Apple Machine Learning Research
The GitHub Blog
The GitHub Blog
T
The Blog of Author Tim Ferriss
博客园 - Franky
D
Docker
Jina AI
Jina AI
罗磊的独立博客

人人都是产品经理

为什么你的产品找不到差异化?90%的失败都卡在第一步上(下) – 人人都是产品经理, 3年从30万到1300万用户、获2200万美元融资,这个AI教育产品用“抽卡”破解了获客难题 – 人人都是产品经理, 园区招商系统怎么做才能真正帮到去化?我加了这一个功能,推广链接转发400次阅读过万 – 人人都是产品经理, AI大事件:OpenAI发完网络安全模型又搞药物研发,小鹏汽车要抓”DeepSeek时刻” – 人人都是产品经理, 电商不是卖货,是一场更残酷的产品经理实战 – 人人都是产品经理, 没想到,活动营销又回来了! – 人人都是产品经理, 为何All-in海外KOC:一场关于AI时代窗口期的豪赌 – 人人都是产品经理, 重新理解企业的内部协作 – 人人都是产品经理, 苹果的 AI 战略到底是什么? – 人人都是产品经理, 医疗智能体·第2讲——合规护城河:等保、PIPL与HIPAA的架构实战 – 人人都是产品经理, 向量知识库五步法:从“答非所问”到“精准回复” – 人人都是产品经理, 鸿蒙PC三方库构建总指挥HPKBUILD(sha)库为例 – 人人都是产品经理, 何时该用LLM?AI产品经理的LLM设计指南 – 人人都是产品经理, 医疗信息领域的需求方、决策方、准入方以及关注点(二) – 人人都是产品经理, 即梦涨价:一场被误读的「傲慢」 – 人人都是产品经理, 面试AI PM必答题:Hermes和OpenClaw的区别,如何讲清楚业务价值 – 人人都是产品经理, AI的下一张船票:世界模型——AI产品经理必须理解的技术拐点 – 人人都是产品经理, 小红书做GEO,怎么让AI信你?记住这 3 个重要信息 – 人人都是产品经理, 5 家印度 AI 初创公司,看看印度 AI 再做什么 – 人人都是产品经理, AI项目跨团队协作:产品技术业务如何不打架 – 人人都是产品经理, Agentic Workflow(智能体工作流):让AI从”答案生成器”变成”数字员工” – 人人都是产品经理, lycium_plusplus 项目全景解读:OpenHarmony 三方库构建的“大管家” – 人人都是产品经理, 从爆单救火到前置履约:两套预采策略,把生鲜大促履约效率拉满 – 人人都是产品经理, 什么时候该补货?我用一轮数据做了一个决定 – 人人都是产品经理, 从“机械兜底”到“动态分流”:AI客服重复进线治理的4大底层逻辑 – 人人都是产品经理, 抖音拼效率,红书拼洞察 – 人人都是产品经理, 全民狂欢与退潮——为什么龙虾这波热潮冷却得如此之快? – 人人都是产品经理, Stripe押注!MPP重塑全球支付 – 人人都是产品经理, 小红书GEO:AI引用你的内容,不是因为你对,而是因为你看起来可信 – 人人都是产品经理, 前百度副总裁押注办公Agent,日韩付费爆发,Manus迎来强劲对手 – 人人都是产品经理,
用了两年figma,总结的这几个小技巧让我的效率提升一大截!
橙心 · 2022-08-20 · via 人人都是产品经理

在进行设计时,运用一些小技巧,有时会起到事半功倍的效果。本文作者总结了一些日常工作中经常会用到的figma小技巧,希望能给你带来帮助。

今天分享的figma小技巧都是日常工作中经常会用到的,简单又干的总结,希望我们的效率都能够提升一大截。

01 图标绘制中的小技巧

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

  1. 先画一个矩形
  2. 然后旋转角度、再复制一个、水平旋转一下
  3. 对齐后给圆角

用了两年figma,总结的这几个小技巧让我的效率提升一大截!

这个时候发现有点太大了,需要调整一下高度:

用了两年figma,总结的这几个小技巧让我的效率提升一大截!

问题很明显,调整完高度(H)度之后,我们又得进行对齐调整,如果还是感觉不够精致,又得重复前面的步骤。

效率不高还特烦人,就这么一个简单的icon来回调整几分钟有木有。

如果你像我一样做的是375@1倍图,图标粗细用的是1.5像素,这种情况下来回对齐就真的考验你的像素眼了。

出现这个问题其实就是在绘制之前我们没有经过思考,比如说这个图标的适应场景,以及是否会出现调整大小的情况。

接着子阿来看下橙心是如何避免这种情况的出现:

  1. 先画一个矩形
  2. 复制一个往上旋转
  3. 整体往上旋转,给圆角

用了两年figma,总结的这几个小技巧让我的效率提升一大截!

还是上面那个问题,需要对高度进行调整:

用了两年figma,总结的这几个小技巧让我的效率提升一大截!

两个步骤进行对比一下,前者是往上缩放,后者是向下缩放。

后面这个操作步骤在不手动调整对齐的情况下,除了可以随意调整高度还能随意调整宽度,自由度会更高。

那已经绘制完了,想要避免不手动调整对齐如何操作假设现在高(H)出现了第一种绘制的问题,我们可以对其进行水平翻转、垂直翻转一下。这个时候你调整高是没有问题的,但是要想调整整个宽你就又得(水+垂)调回去问题就像是窟窿,一旦出现就不得不找一个个办法来补救,所以一开始就要想好如何避免。

总结一下,在绘制icon之前我们需要考虑3个问题:

  1. 绘制步骤的顺序
  2. 使用场景
  3. 是否需要进行高度、宽度上的调整

效率是如何提升的,就在这些不经意的小细节当中。

02 对齐

还是375@1倍图下,经常会遇到0.5px,比如下面这种情况:

用了两年figma,总结的这几个小技巧让我的效率提升一大截!

点底部对齐是搞不定的,你是否会想着我手动去调整对齐,那就有点傻了。

这里只需要把「对齐像素」关了,使用快捷键:S+C+逗号,然后再点一下底部对齐,更速度。

比如这种情况,实际间距是1.5px,但是你看操作面板是显示2px,数据对不上怎么办?手动去调整也是搞不定的。

用了两年figma,总结的这几个小技巧让我的效率提升一大截!

这里同样是把「对齐像素」关了,然后手动输入一个数值进去,再去看下就是一致的了还有比如说:0.5px的分割线。

一开始没太注意,直接绘制完就居中、底部对齐,如果不放大仔细去看,压根发现不了其实是没有对齐。

方法也是一样「对齐像素」关了,然后再去底部对齐一下,你会发现它这次是贴着底部的。

前面提到的图标小技巧与这个方法搭配使用更nice。

效率是如何提升的,就是每一个细节都不容忽视。

03 图标归类命名规范

组件命名方式就像是圈层一样,一圈套一圈,可能这里每个人的习惯会不一样,所以命名方式也会有所不同。

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

我们建规范的时候一般都会有一个习惯就是先归好大类,颜色、图标、组件等等,比如腾讯的这种方式。

用了两年figma,总结的这几个小技巧让我的效率提升一大截!

让人看起来就非常的实用、干净、规范。

这里拿语雀APP的图标来做个命名使用场景定好大类之后,再根据Tab来分小类,比如语雀的Tab栏:小记、文档、消息、我的。

到这一步的命名,如:小记/搜索、小记/消息再继续往下可以分功能模块以及子页面,来延展一下,小记/搜索/删除。

看完还发现自己不知道如何给组件命名,那就记住小标题当中的两个字「归来」。

思考一个问题:要是你会如何去给组件进行归类,然后能够给自己提供方便?想明白这个问题就去试一下吧。

不一定说规范要做的多么的完整、多么的惊艳,能够给你、给团队带来效率才是一个好的规范。

当然,橙心的这个方式不一定适合所有人、所有项目团队,但却可以为我带来效率。

效率是如何提升的,做事要形成一个自己的方式方法。

以上就是今天的分享总结,如果你觉得那里有不明白或者你有更高的见解,欢迎一起交流讨论。

本文由 @Dark成 原创发布于人人都是产品经理。未经许可,禁止转载。

题图来自 Unsplash,基于CC0协议。

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。