23个高手都在用的Figma小技巧！（2022新专辑）-Part 01

用户5009027

发布于 2022-04-07 09:35:11

3.4K0

发布于 2022-04-07 09:35:11

文章被收录于专栏：静Design静Design

静电说：在之前我们已经介绍过不少Figma的小技巧，随着Figma版本的更新，我们为大家整理出了更多的Figma小技巧，帮助你让自己的设计工作边的更爽更方便。本次的小技巧栏目分两期进行，这篇文章是第一期。

顺便说一句，Mac的快捷键与Win的快捷键有一点差别，具体看下图。

001.快速复制文件链接（cmd+L）

在您的文件中，按cmd+ L，它会将文件的链接复制到您的剪贴板。您现在可以在任何地方共享和粘贴。

分享具体的文件位置：如果您选择了特定的页面、框架或元素，文件将在使用链接打开时跳转到您的选择。这一点非常棒~

002. 在 Figma 之外快速嵌入元素和原型

使用热键cmd+L将链接复制到特定页面或框架，然后将其粘贴到 Figma 之外。您可以共享整个画布或选择要共享的特定框架。这对于文档、设计系统和样式指南来说绝对是惊人的。但也可以在其他网站上展示，比如在 Medium 中。

也就是说，你可以直接把你的设计稿嵌入到其它支持的网站中去，直接展示出来。当然，也可以直接嵌入交互原型，并且它还可以自动更新。

003. 微调文本，颜色和数值

选择一个彩色形状并打开颜色菜单，按住 shift 键并上下移动方向键。您可以看到颜色“一点点的变化”。如果您使用鼠标滚轮，也可以更改颜色的色调。如果在缩放时按住 alt，这也会改变不透明度。您还可以微调任何其他字段，例如行高。

‍

提示：在排版和行高上使用 4 或 8pt 的幅度来设置你的字体比例！顺便说一句，默认微调是 10，要更改它，请按cmd+/并键入“nudge”来调整微调数值。

004. 快速调整字段数值

将鼠标悬停在 Figma 中的某些属性字段上时，会出现一个横向双箭头。只需按下鼠标键并将箭头从左向右移动，数值就会发生变化。按住shift以增加调整数值的速度。这适用于任何在将鼠标悬停在其上时显示横向双箭头的字段。

005.复制为PNG而不导出图片

按cmd+ shift+ c（或通过右键菜单访问）将框架作为 png 复制到剪贴板。您现在可以将其粘贴到文件内部或外部的任何位置。这样，不用导出文件就可以粘贴到ppt以及任何你想粘贴的地方了。

‍

006.添加左右约束的网格

当您在将网格添加到框架（Frame）的同时设置约束时，（非嵌套）项目会将列作为其父容器。如果您希望您的元素与网格完美结合，请将它们设置为left-right。

‍

这适用于文本和组或其他框架。它不适用于自动布局设置。小技巧：只需将您的自动布局打包在一个组中，然后您就可以在该组上设置约束。

007.用页面和框架命名组件

您可能熟悉组件的“/”命名规则。但您是否知道向框架添加主组件的组织方式与使用“/”相同？它会变得更好。您还可以使用页面来创建元类别。

这样，您可以将组织与命名分离，只需将组件拖动到新框架即可在一秒钟内重新组织组件。而且您的组件名称又好又短。

在我的示例中，我为移动设备创建了一个页面，为通用创建了一个页面（我可以为每个断点设置一个，或者为 web 和应用程序、android 或 iOS 设置一个库，你懂的）。在页面内部，我只是在放置组件的位置放置框架。它可以是单个组件或具有变体的组件集。

如果你是从 Sketch 或旧的 Figma 库导入，并且有常规的“button/primary/active/”等等的命名，你可以设置页面和框架，然后简单地使用 Figma 中的批量重命名功能并删除所有带有正则表达式的前缀。

008.截图直接粘贴到Figma

你可以选择任何你想用的截图工具，比如微信，或者操作系统自带的截图功能，然后直接复制到Figma中即可。

小提示：Figma中，按住Alt键双击位图可以直接裁切图片。

009.从浏览器复制可以编辑的SVG代码

您可以直接从页面的代码中复制 SVG，而不是下载 SVG 并将它们导入回 Figma 。选择 SVG 图像并右键单击以选择检查模式。再次单击图像源。然后在图像视图中，再次右键单击检查模式，然后在整个 SVG 元素上，右键单击并选择“复制元素”。你现在可以将它粘贴到你的 Figma 文件中，它仍然是一个可扩展和可编辑的SVG，它的所有图层都包含在内。

试试阿里巴巴图标库中的复制SVG功能，那个更方便。