/我会假装不知道的Figma省力技巧
干货2023-09-12

我会假装不知道的Figma省力技巧

虽然用过很多设计软件，但 Figma 依旧是我的主力。
今天分享四个不是一眼就能发现的省力技巧，我也是用久了后，才慢慢发现的。
但是一旦发现就欲罢不能，用其它软件发现没这个功能就会很不习惯……
复制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 有个很厉害的功能，可以帮我们实现前端那种自动加「…」的效果：

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

本文来自微信公众号“体验进阶”作者：设计师ZoeYZ（ID：Advanced_UX）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。

TAGS:

相关文章