虽然用过很多设计软件,但 Figma 依旧是我的主力。

今天分享四个不是一眼就能发现的省力技巧,我也是用久了后,才慢慢发现的。

但是一旦发现就欲罢不能,用其它软件发现没这个功能就会很不习惯……

你也可以看看自己是不是知道这些方法~

P.S. 我整理了一个 Figma 快捷键 Mac+Win 大全,需要的文章底部获取 :D

复制PNG

我最开始的时候,图片都靠 export 导出,每次挺麻烦的,但也习惯了。

后来我突然发现,shift+command+c(win:ctrl+shift+c)可以直接复制png!

按下后底部会出现这个提示:

打开网易新闻 查看精彩图片

然后往文档、聊天窗口等地方,直接粘贴就可以啦~

因为是 PNG,所以该透明的地方还是透明的,跟直接导出图片没有区别(除了更方便之外)。

从此之后,我99%的图都不用导出了

但这个方法也有问题,如果方案是按照 1/2 等较小的比例画的,就只能先放大再复制了。

那么如何放大方案呢?就是下面这个了:

Scale 尺寸修改

因为 Sketch 的画板伸缩时,可以带动里面的元素同步放大缩小(只要实现设置固定方式),所以一开始我以为 Figma 也行。

发现 Figma 的 Frame 放大缩小后,里面的元素不会有任何变化,让我一度以为 Figma 不允许缩放 Frame……

后来发现,Figma其实专门提供了一个缩放 Frame 的工具,那就是 Scale:

打开网易新闻 查看精彩图片

上图这个地方,一般默认状态是选择 Move,按下 K 键即可切换成 Scale 模式。

然后你就可以用这个双箭头缩放 Frame 啦:

打开网易新闻 查看精彩图片

如果觉得拖得不准,还可以从右侧菜单里的 Scale 模块直接设置缩放比例、宽度、高度和中心点:

打开网易新闻 查看精彩图片

想要退出 Scale 模式的话,可以按 V 键,或上图右上角的 X 图标即可。

一键换色

你有没有遇到这样的情况,改版要换主题色,但是之前没有设置主题样式,结果一个页面一个组件的手动换色……换到想吐

用 Figma 的话,你可以把所有设计换色的方案都选出来,然后在后侧菜单找到 Selection colors 模块。

你会发现它把框选部分所有颜色都列出来了,而且每种颜色只列了一条:

打开网易新闻 查看精彩图片

你只要在这里找到想要替换的颜色并修改,所选区域所有这个颜色都会一起变掉,还是蛮方便~

文字省略

做 UI 会有很多文字有行数限制,超出就要加上「…」:

打开网易新闻 查看精彩图片

这种效果前端实现起来很简单,一行代码就行了。

一般我们做设计的时候,都是靠手动删除。

删字倒是简单,怕就怕……哪天文字区域突然加大了,每一条文案都得把删掉的文字加回去……

打开网易新闻 查看精彩图片

Figma 有个很厉害的功能,可以帮我们实现前端那种自动加「…」的效果:

打开网易新闻 查看精彩图片

这么方便的功能,就算被预览图嘲笑“懒狗”我也认了~

其实自动布局也挺好用的,而且我也有一些实用小技巧可以分享,但内容太多了,如果大家感兴趣的话,下次再来一期。

其实设计工具技巧,学起来很简单,真正难的是练得滚瓜烂熟、用到方案设计里……