用户体验

本文约5858字，阅读需要15分钟

关于 Figma

如果你是从零开始学习 Figma，或者从平面切换到 UI，或者（像我一样）从切换，不妨一起学习！

在过去的几年里，我从心底里喜欢它，并且是它的忠实粉丝。 但是后来发现它的团队协作和交付，比如在 , , Craft, 之间切换，很麻烦。 不管我用哪种组合，效果都不是很好，有额外的成本，原型制作也不是很顺利。 但Figma的出现，让多软件协同的乱象不再出现。

优势：

- 免费（每个帐户最多可建立 2 个用户和 3 个项目）；

- 在 Mac 和 PC 上运行（仅适用于 Mac）；

- 实时团队协作；

- 可以导出文件（不支持）；

- Mac 和 PC 的集成开发者交接/说明；

- 优秀的团队库/设计系统；

-高质量的原型设计

缺点：

-云端在线协作，但可以将文件保存到本地进行处理，方便后期添加。

01 入门

1.1 安装 Figma

进入Figma.com官网，按照提示进行注册，注册成功后即可使用！

登录并开始申请

进入应用界面，Figma 会引导你创建团队和项目。 现在，只需在任何地方创建一个新文件（点击菜单或 CMD+N）以便快速使用。

主界面

与 不同的是，Figma 的文件并不存储在本地电脑上，而是存储在云端，你可以随时随地通过浏览器访问你的所有作品。

1.2 导入草图文件

Figma 可以快速准确地导出草图文件，只需将文件拖放到 Figma 画布上，即可继续使用。

将文件拖放到屏幕上

缺点：无法从 Figma 复制粘贴单个项目（如果拖放，它将转换为图像），如果将单个项目保存为 SVG，则可以从中复制单个项目！

提示：导出前建议先下载Figma App，因为本地字体很难在浏览器中渲染，而且会弄脏文件。

02 用 Figma 设计

2.1 新建画板

和中间操作一样，按A或F键可以在右侧的属性面板中查看所有画板选项，选择你要使用的规格或者随意建一个。 使用 1x 视角（实际像素大小）工作，因为在 Figma 中调整大小不会损失图像质量，只需在导出时选择合适的大小即可。

按“F”设置一个新的框架

与传统画板不同，画板可以相互嵌套，便于以后创建更复杂的交互设计。

2.2 网格与布局

在移动端，可以使用标准的8点网格； 在网页端，建立布局网格非常重要，所以在设计之前，建立一个12列的引导网格。 以我个人的喜好，自定义 CSS 网格更快更容易，最好事先与开发人员达成一致。 在右边的网格属性菜单中，调整列和行是否固定，行间距按需要设置。

创建网格、列和行

Figma 中网格和列的酷炫之处在于你可以设置多个网格并将它们保存为样式。 这是一个方便的功能，不仅可以使布局适应各种设备，还可以让它们与团队成员共享或在其他项目中轻松重用。

提示：使用 Ctrl+G 切换可见性。

2.3 层和组

与 一样，找到屏幕一侧的视口面板。

左侧视口面板

层→手动添加的每个新元素都会创建一个视口。 您可以通过拖动重新排列视口；

Group → 确保视口已分组（选择视口并按 cmd+G）以保持文件井井有条。 它还可以帮助您快速跨帧连接和复制。 要选择组中的元素，请按 cmd，然后单击该项目；

页面 → 设置设计的不同部分或区域，我通常会为头脑风暴、线框图和与最终版本的交互构建单独的页面；

→ 组件保存在这里，库按钮也在这里；

嵌套框架 → Figma 可以嵌套框架，特别方便结构设计和原型制作。

2.4 矢量形状

Figma 使用一种称为 , 的方法来创建复杂的形状。

使用 Figma 创建形状

从底部菜单中选择，或按 R（矩形）、L（线）或 O（椭圆）绘制形状。 按住 Shift 键保持比例，每个形状将手动创建自己的视口。 要制作更复杂的形状sketch导出svg图标，请按 P，或从底部菜单中选择铅笔。 完成后按回车键手动关闭路径，在设计过程中可以随时通过两侧的属性菜单修改属性和操作矢量图形。

注意：矢量图形可以按任意大小缩放和导入，但文件大小会很小。 它们非常适合简单的形状、按钮、图标、徽标和各种简单的插图。

2.5张图片

在 Figma 中，图像总是放置在形状遮罩内。 要更改图像的形状，请打开图像属性，然后在两侧的属性窗口中单击“填充”。

Figma 中的图像

下拉菜单中的选项：

填充→图像填充；

Fit → 当我们调整大小时，图像不会被裁剪或隐藏；

裁剪→将图像裁剪为所需的大小和选择。 请注意，这里它并没有丢失，而只是掩盖了图像；

平铺→根据需要重复原始图像，调整平铺的大小。

Figma 允许调整颜色和饱和度等属性，多次调整不会改变原始图像属性。

注意：当用图像填充现有形状时，单击该形状，转到填充，然后从下拉列表中选择图像，否则将设置颜色。 注意图片版权，推荐，画质特别高，还有Figma插件。

2.6 格式

Figma 预装了字体，如果您更喜欢使用本地字体，则需要安装 Font 或 Figma 桌面应用程序，并确保访问该文件的其他人都安装了相同的字体。 按T建立一个文本窗口（或点击开始输入），在两侧的属性菜单上设置文本属性。

Figma 中的文本

提示：确保文字不大于16px，最好是18px，甚至加宽栏宽以提高可读性。

03款式

可以保存和重新应用的样式属性。 这样，可以立即更新大文件，并可以为颜色、文本、网格和阴影等效果创建样式。

要查看所有使用的样式，请单击画板后面的蓝色背景，它们将出现在右侧的属性菜单中。

3.1 创建颜色样式

Figma 中的颜色和渐变样式很棒，设置一种样式并在文本、填充和轮廓上重复使用。 您可以在设计过程中随时右键单击样式进行修改和删除。

创建和使用颜色样式：

创建形状：

修改填充为需要的颜色值；

单击包含颜色样式的方形符号；

点击“+”进行添加。

提示：命名颜色时，最好定义其特定用途，而不是颜色本身。 例如，将其命名为“突出显示颜色”而不是“橙色”。

3.2 创建文字样式

与 不同，Figma 中的文本样式仅存储字体系列、大小、行高和宽度。 这使样式库保持美观和简单。

设置文本样式几乎与颜色样式相同：

单击要设置样式的文本：

在右侧的属性菜单中，点击样式方形图标；

单击 + 并为样式命名；

要为现有文本添加样式，只需单击文本并通过样式框从左侧菜单中选择所需的样式；

添加样式后，您还可以通过相同的菜单修改属性或分离样式。

提示：命名文字样式时，最好在使用后调用，例如“H1”或“”“引用”，而不是具体描述字体或字号。

3.3 更多样式

Figma 不止于此，网格还可以作为样式保存、共享和重复使用。 此外，还有阴影、内阴影、图层模糊和背景模糊等效果样式。

04组件

组件是可以在设计文件中重复使用的 UI 元素。 组件保持设计的一致性，更新和扩展，节省大量工作！

4.1 创建可重用组件

选择对象并按屏幕底部或 cmd+alt+K 创建组件键。 在 面板中，一个紫色的组件图标表示已经创建了一个主组件。

主组件和实例

复制此主组件会创建一个相同的副本，称为原样复制。 主组件中的任何修改都会对所有实例造成相同的修改。 在右侧视口对面的“资产”选项卡中找到所有组件，并将它们拖到框架上。

TIP：从长远来看，Figma 组件应该与后端组件（如 中的那些）保持一致，最好与技术团队协调。

4.2 交换和嵌套

组件可以嵌套在主组件中，这意味着您可以在一个组件中包含多组组件。 使用左侧的实例交换菜单交换嵌套组件，或 cmd + alt + 从团队库中拖动它们。

4.3 覆盖范围

实例在大小和整体布局上仍然遵循主要组件，但您可以修改实例属性，例如文本和 . 如果重置为原始状态sketch导出svg图标，请注意两侧属性菜单中的重置按钮。 可以通过右键单击来分离。

4.5 命名组件

如，使用“/”命名组件，例如，将“share-icon”更改为icon/share。 Figma 将手动创建一个名为 icon 的父类别。

确保正确命名您的组件

顺便说一句，如果您在多个页面上有主要组件，它们将按页面组织。

提示：为了让您的组件井井有条，为每个组创建一个新框架，例如按钮或表单。

05 自动布局

Auto 允许创建随着内容修改而缩小或缩小的动态框架。 这是一项巨大的改进，因为它节省了大量调整时间，还允许一键式检查正确的设计。

5.1 将视口更改为手动布局

输入内容；

shift+A 将在文本层周围手动创建一个新的手动布局框架，并带有垂直和水平填充。 您可以在左侧的手动布局属性菜单中调整那些值；

更改内容将听到手动调整大小的击键。

5.2 嵌套手动布局

嵌套的手动布局框架，结合了水平和垂直布局属性以实现引人注目的界面设计。

选择对象，按 shift+A，自动布局框架现在是父框架内的子框架。

在右侧的“属性”菜单中选择“垂直分布”或“水平分布”，以防止文本框向一个方向增长，确保选择“固定为”或“高度”。

提示：只能通过连接视口来交换子框架在父框架中的位置；

注意：任何手动布局都可以保存为组件。

06 Figma 中的原型

Figma 为您的 Web 和应用程序设计提供卓越的原型设计。 您不需要任何其他工具。

6.1 原型制作

选择一个框架并单击右侧属性菜单上的原型。 单击原型设置并选择要设计的设备。 单击右上角的播放按钮查看设计，或下载 Figma 在设备上进行实时预览。

原型菜单

6.2 连接画面

确保在左侧的“原型”菜单中，当元素被选中时，它周围会出现一个红色的小圆圈。 单击并按住圆圈进行拖动，将出现一个指示连接的图标。 在右侧的属性面板中，选择动作（滑动、点击、鼠标悬停等）和动画类型（移入、推入、滑出等）。

6.3 滚动方式

除了垂直滚动，Figma 还提供了其他特别逼真的滚动页面方式。

水平滚动 → 选择所有元素并将它们分组。 画一个需要大小的框，连接或者复制到里面，这样滑动就会隐藏，在下拉菜单中选择水平滚动。

像地图一样平移 → 画一个框并添加图像。 在滚动中，选择水平和垂直滚动。

Fixed → 要使标题或按键具有粘性，请确保选择“Fixed ”（在左侧属性菜单中的 > 中）

6.4 智能动画

智能动画找到匹配的视口以识别原型中帧之间的差异和动画视口，创建强大的原型。

07 与他人共享和协作

7.1 演示模式

按下菜单右上角的播放图标，联通终端原型将在新标签页进行演示，您可以评论和分享演示链接。

演示模式

7.2 创建团队和项目

Figma 上的团队可以与其他人协作，您可以邀请成员、添加项目并将它们保存到库中。

要创建团队，只需单击 Figma 概述上的“创建团队”按钮并按照说明进行操作。 付费试用更强大的功能。

Figma 中的团队、项目和文件

Team → 一群人，比如设计师、开发人员、文案等；

项目→将相关文件放在一起；

文件 → 个人设计文件。

注意：您可以随时在项目和团队之间交流文件。

7.3 共享库

在团队中工作时，您需要确保所有组件都实时更新，并且所有团队成员都可以访问存储位置。 Figma 共享库可以很好地处理这些情况。

注意：如今，设计系统已成为 UX/UI 的重要组成部分，值得花一些时间熟悉这些概念和不同的方法。

创建共享库：

在右侧菜单中，进入并点击书籍图标；

点击发布；

为发布命名，并保存副本；

在 Teams 中打开一个新文件；

进入选项卡，单击库图标并激活您刚刚创建的共享库。

更新共享库：

当更改设计内容或样式时，Figma 会提示您更新团队库。 更新后，所有其他团队成员将收到更新通知，他们可以同步查看更新。

注意：共享库特别强大，可以成为设计过程的有力支持。 在您的工作中使用共享库时，有许多资源可供您参考和练习。

7.4 与其他设计者和开发者分享

顶部菜单中的红色按钮可以发送共享邀请，或者只需输入电子邮件地址或复制链接。

发送给设计师和文字作者→设置为可编辑模式，共享者可以访问所有功能。 您将遇到其他用户并在同一个文件上实时协作！

编辑模式

开发人员 → 设置为开发模式，向技术人员展示所有维度（切换 CSS、iOS 和代码）。 他们还可以访问和下载原型。

查看模式

注意：如果在文件仍在处理时与开发人员共享，最好设置一个新页面以防止混淆。

7.5 资源导入

如上所述，在 Figma 中，即使仅授予“查看”权限，也可以直接从共享文件导入任何大小的所有资产，因此作为设计师，您不需要自己导入任何东西。 但是，如果您希望它在任何情况下都像这样：

在 Figma 中导入资源

选择对象；

在两侧的“属性”菜单上单击“导入”。

注意：记得用“/”命名，比如image/home/, icon/，他们会手动把排序成文件。

备忘单，何时导入：

SVG → 用于矢量文件，例如徽标和图标。 SVG 可以缩放到任何大小而不会降低质量；

Jpg→用于各种不透明的圆形图像和照片，确保提供实际尺寸（1x）和黄斑码率（2x）；

Png→如果图片或照片需要透明背景导入，也需要按1x导入，至少2x；

1x/2x → 1x是实际尺寸，是2x的两倍，显示器上的清晰图像需要2倍。 注意，2x、3x等后缀为@2x、@3x，编码时应用该技巧；

wh→设置图片的宽高，例如300w=一张宽为300px的图片；

Pdf → 如果要导入整个页面，例如用于发送或添加到演示文稿的高质量图像，请使用 Pdf。

/结尾。

相关参考资料

-翻译自原文

-图片及GIF来自网络； Gur的封面动画

如有侵权请联系删除！