Figma设计与原型：提升速度的技巧与诀窍

大家好！我是Yves，AI团队的产品设计师。AI技术发展迅速，我的设计和原型也需要跟上节奏。原型设计是传达用户交互、设计概念或长期愿景的强大工具。它可能感觉耗时，但我制作了一份指南，介绍如何减少Figma使用时间并更快地呈现高质量设计。

本指南不是Figma基础概述，因此不会涵盖Figma的基础知识。相反，它包含了我认为对提高设计和原型制作速度重要的技巧和诀窍（以及许多快捷方式）。这也不是官方文档，与任何指南一样，随着Figma更新，它可能很快过时。最后更新：2024年11月。

概述

我将回顾两个部分：设计和原型

1. 您可以使用⇧E在设计和原型之间切换

设计

技巧：创建本地组件 本地组件很重要，因为它们允许您从一个位置更新所有实例。我喜欢为它们创建一个单独的页面。

创建组件的快捷方式是⌥⌘K

创建本地组件后，确保它在整个设计中使用。当您想要自定义本地组件（或任何组件）的实例时，可以使用“选择匹配图层”功能或“多编辑文本”功能批量更新属性或复制。

1. 选择匹配图层：选择其他画板中的类似图层。将更改应用于所有图层。
2. 多编辑文本：选择其他画板中类似图层内的文本。将更改应用于所有文本。

选择匹配图层的快捷方式是⌥⌘A

注意！ 假设您有50个带有选项卡导航的屏幕，您想将“State”属性从“Idle”更改为“Default”，并将选项卡名称从“Default”更改为“Gine”。您点击图层以选中选项卡组件，然后按⌥⌘A。您看到所有相同的组件被选中，然后使用右侧面板中的属性下拉菜单更改状态。您只需操作一次，更改就会在所有地方反映。然后，您点击图层以选中文本图层，按⌥⌘A，然后按ENTER。同样，您看到所有组件被选中，当您在一个区域更新文本时，所有地方都会更新。

技巧：保持组织。命名很重要！ 能够使用Figma的强大功能（如选择匹配图层或智能动画）需要一致的命名。养成第一次就命名图层和组件的习惯，这样它会在整个设计中保持一致。

重命名的快捷方式是⌘R

技巧：利用自动布局并裁剪内容 我几乎对所有内容都使用自动布局。它创建响应式设计，可以增长填充、收缩适应并重新排列内容。您可以依赖它来实现一致的调整大小和内边距规则。在同一布局容器中，有一个“裁剪内容”选项。此功能很重要，因为它帮助您实现滚动交互。

1. 裁剪内容：当您希望内容在容器内滚动时，确保选中裁剪内容。通过启用“裁剪内容”，元素超出框架边界的任何部分将被隐藏。
2. 自动布局：自动对齐内容并创建一致的内边距和外边距规则。了解自动布局功能，如调整大小、方向+间隙、对齐和内边距。

自动布局的快捷方式是⇧A

技巧：熟悉快捷方式 以下是一些方便的快捷方式及其使用示例：

用新按钮替换旧按钮 我想将新的AIButton组件直接添加到现有UIButton组件的位置。我用⌘C复制AIButton，选择UIButton，然后用⇧⌘R粘贴替换。

复制快捷方式：⌘C 粘贴替换快捷方式：⇧⌘R

居中弹出窗口 我想看看弹出窗口是否适合我的设计中的UX模式。我按R创建一个矩形，然后按T创建文本，再添加一个UIButton。我用⇧G将它们分组。我按⇧R将组重命名为“弹出模态”。然后我想将它移动到屏幕中心。我用⌥H对齐水平中心和⌥V对齐垂直中心。我喜欢它的外观，并想进一步设计我的弹出窗口，我用⌘⇧G取消分组以继续设计。

对齐水平中心快捷方式：⌥H 对齐垂直中心快捷方式：⌥V 分组快捷方式：⇧G 取消分组快捷方式：⌘⇧G

使用自动布局创建滑动表单 我想为用户创建一个滑动表单。我按T添加文本，添加几个UITextInput和一个UIButton。我可以使用分布垂直间距或按⌃⌥V确保元素之间的垂直空间相等。相反，我选择所有元素并应用自动布局⇧A，确保间隙为16，内边距为16。我确保选中裁剪内容复选框。我按⇧R将新框架重命名为“slideout”。我想将我的一个UITextInput移动到列表顶部，因此我选择它并使用⌘]移动到前面。

分布水平间距快捷方式：⌃⌥H 分布垂直间距快捷方式：⌃⌥V 移动到前面快捷方式：⌘] 移动到后面快捷方式：⌘[ 带到前面快捷方式：] 发送到后面快捷方式：[

除了到目前为止列出的所有快捷方式外，以下是我使用的更多设计快捷方式：

显示/隐藏快捷方式：⌘⇧H 锁定快捷方式：⌘⇧L 水平翻转快捷方式：⇧H 垂直翻转快捷方式：⇧L 框架快捷方式：⌥⌘G

额外技巧：了解变量 变量应该有它们自己的教程（在此处阅读Figma的概述），利用它们将使您更快地设计和制作原型。目前，这是它们的位置以及如何应用它们。您可以在画布的空状态上找到局部变量，或通过单击画布本身（取消选择任何画板或组件）。您可以使用外观面板中的“应用变量模式”按钮应用局部变量。

1. 局部变量：变量是原始值——如颜色、数字和字符串——可以根据设计上下文改变值。
2. 应用变量模式：应用变量并将属性更改到所选图层

原型

原型制作包括交互连接线

和交互细节。

取自Figma高级教程YouTube 当您完成原型制作时，您可以用⇧[SPACE]预览。在预览模式下，您可以按R重新启动流程。务必设置流程起点以保持原型组织有序。

预览快捷方式：⇧[SPACE] 重新启动流程快捷方式：R

技巧：使用此自定义曲线作为默认值 有许多动画类型和曲线可以使用。我在下面快速概述，但在智能动画中默认使用我在Figma原型教程中学到的此自定义曲线。贝塞尔曲线为0.8, 0, 0.2, 1。

以下是其他曲线类型，您可以在此Figma博客文章或此备忘单中了解更多。

线性：可能感觉机械

适用于打开下拉菜单

缓入：慢开始，快结束

适用于将元素移出视图

缓出：快开始，慢结束

适用于将元素移入视图

缓入缓出：慢，快，慢

如果应用于所有内容可能感觉太完美

缓入回弹：超过初始关键帧，然后在结束时加速

结果在开始时有小弹跳。适用于将元素移出视图

缓出回弹：快速开始，减速，以弹跳结束

可能感觉某物正在稳定。适用于移入视图

缓入缓出回弹：小慢弹跳，加速，结束时小慢弹跳。

弹簧

柔和：最中性选项。适用于缩放内容时的微妙弹簧运动 快速：更多弹簧。适用于提示和通知 弹跳：用于有趣动画（如心形弹跳）的古怪预设 缓慢：稳定、自然的方式缩放全屏内容 自定义：调整刚度（弹跳次数）、阻尼（弹簧级别）和质量（速度）

技巧：也利用微动画 对我来说，小动画能带来大不同。仪表板水平和垂直滑入当然令人兴奋，但让按钮在悬停时改变状态才能使设计感觉生动。不要低估以下功能的力量：

悬停 常用于工具提示或悬停在CTA上

触发类型：悬停时

加载： 在页面加载时、按钮内或骨架加载时创建加载动画

触发类型：延迟后

脉冲： 让通知出现或完成加载时带有脉冲动画

触发类型：悬停时 + 延迟后

滚动： 通过容器移动内容，无论是仪表板还是表单

滚动动画。位置：固定，溢出：垂直或水平

1. 位置：类似于编码，声明所选容器应如何相对于其所在的画板行为
2. 溢出：对于超出视图的内容，它应该做什么？

额外技巧：了解变量、条件和表达式 一旦您掌握了这些技巧和诀窍，推动自己尝试高级原型制作。这将以编程方式在组件之间创建更复杂的关系。例如，当选中复选框时，将计数器更新1。 您可以在此Figma Learn中了解该示例 + 其他一些示例。