Figma测试新手指南

在我们了解与其原型相关的完整的Figma测试要求之前，让我们首先尝试和了解与这个设计工具Figma相关的基础知识，这有助于改善整个设计过程和我们进行原型设计的方式。

现代网页设计过程在过去几年中不断发展。因此，有了更多的专业工具来帮助改善整体设计。有许多很好的选择，其中之一是Figma--一个强大的基于云的设计工具，可以让你创建网站、应用程序、标志等。

此外，你不需要在本地安装它，也不需要购买昂贵的许可证来为你的团队成员提供所需的设计文件权限。因此，它变得更容易为开发者所接受。此外，矢量图形编辑器和原型设计功能确保设计要求得到准确描述。

适用于 Android 和 iOS 的 Figma 移动应用程序允许您在移动设备上查看和管理 Figma 原型。所以，与用户界面和用户体验设计有关的方面是实时协作的主要重点领域。用户界面都是关于视觉元素的，如屏幕、按钮、图标等，当您在使用网站或应用程序时，与它们进行互动时可以看到这些元素。

用户体验是你与你正在使用的产品的互动。两者结合起来有助于提高整体的设计体验。为了确保令人心动的用户体验，在不同设备和网络浏览器上在线测试您的Figma设计是至关重要的。

在这篇关于 Figma 测试的文章中，我们将阐明什么是 Figma，它的首要功能、组件，以及如何对您的网页和移动应用程序进行 Figma 测试。

用户体验设计流程

在我们进一步学习Figma测试教程之前，让我们详细介绍一下有助于不断改进和完善设计的不同阶段。各个步骤如下。

• 理解设计要求。了解你的设计要求并创建不同的用户角色。然后，在用户角色的基础上，你也可以定义用例。
• 研究。这个阶段是分析竞争对手，发现不同的用户体验趋势，并密切关注新的设计准则。
• 草图。这个阶段允许你收集想法和绘制插图，以便更清楚地了解设计要求。
• 设计。你可以设计图像并创建原型。
• 实施。你可以实现功能并建立用户体验。
• 评估。你可以进行可用性测试，并评估可以在你的设计中做出的改进。

你可以通过遵循迭代的设计过程来提供一个良好的用户体验。最终确定设计要求并不是只有设计团队的责任。公司的所有主要利益相关者每天都要为改善公司的运作作出贡献。这是保留现有客户并吸引新客户的唯一途径。

Figma 的顶级功能

下面显示的是Figma提供的一些伟大的功能 -

• 跨平台兼容性。Figma 与网络浏览器上的任何操作系统兼容。您可以用 Figma 无缝地使用 Windows、Mac 和 Linux 机器。尽管被多个操作系统支持，但用户仍然可以共享、打开和编辑 Figma 文件，没有任何麻烦。在许多组织中，Figma 有助于在设计和开发团队之间带来巨大的协作，以便所有需要的团队小组都能轻松获得设计要求。

• 伟大而轻松的协作。由于 Figma 也是一个基于浏览器的工具，团队可以像在 Google Docs 中那样轻松地进行协作。它有助于跟踪正在查看和编辑文件的人，这些人就显示在顶部。

  当你点击相应的用户头像时，更容易跟踪用户的活动。这在审查设计原型的过程中很方便。设计负责人只要打开共享文件，就可以实时跟踪设计团队所做的修改。这一切都归结为向你工作的小组提供建设性的反馈，而不是紧盯着他们的设计活动。

• Slack用于团队沟通。Figma 使用 Slack 作为其沟通渠道。当您在 Slack 中创建一个 Figma 频道时，在 Figma 中所做的任何评论或与设计有关的编辑都可以在 Slack 上随时查阅。因此，在多个设计师参与的情况下对设计进行迭代修改时，Slack 可以轻松管理和跟踪所有执行的用户活动。

• 共享是简单而灵活的。Figma 允许对任何文件、页面或框架进行基于权限的共享。当创建一个共享链接时，如果分配了所需的权限，访问该链接的人将打开Figma的浏览器版本。

• 非常适用于设计审查反馈。Figma 简化了不同组织中设计审查的处理方式。那些在使用纸笔设计的模型上提供多个审查意见的传统日子已经一去不复返了，而且要花很长时间才能结束设计变更。Figma 在设计和原型设计模式下都支持应用内评论功能。这些评论可以使用Slack或电子邮件轻松跟踪。你不需要发布PNG文件，所以设计变更很快就能关闭。

• 改进现有的设计流程。像Figma这样优秀的设计工具有助于识别现有设计流程中的现有差距，并带来你可以实施的改进。

Figma 是如何改变整个用户体验设计流程的？

Figma 改变了我们审查和交付设计需求的方式。在 Figma 之前，团队曾经遵循以下步骤，设计需求需要花费大量时间才能最终确定。

1. 在与不同利益相关者讨论的基础上，创建概念的铅笔草图。
2. 使用现有的设计工具创建和更新模拟模型。
3. 你也可以在最终确定的模型的基础上创建一个原型。
4. 修改草案被公布，并与各团队一起审查设计修改。
5. 最终的修改被公布并上传到文件服务器上。
6. 在与团队进行多次迭代和审查后，将其交付给开发人员。

一旦你使用Figma来确定你的设计要求，反馈和迭代的时间就会缩短，交付周期也会很快。这包括

• 在最初讨论的基础上，创建概念的铅笔草图。
• 创建和更新模拟图。
• 原型创建。
• 实时审查和编辑更改。
• 更快地将变化交付给开发人员。

在 Figma 中创建不同的组件

在设计中，组件是可以在多个设计中重复使用的元素。有了它们，创建和管理跨项目的一致设计就更容易了。您可以从您创建的任何对象或图层中创建组件。可以包括一系列的东西，如按钮、图标、布局等。Figma 界面包括三个主要部分。

• 中间部分是设计画布的位置。
• 左边是侧边栏，包含了一个文件的图层、资产和页面。
• 最后，右边的工具栏包含了文件中元素的所有必要信息。

资源

你可以创建不同的组件，从框架到形状到资产。首先，您必须在 Figma 网站上创建一个账户或访问 Figma.com。您也可以使用您的电子邮件免费注册。然后，你可以开始创建你的第一个默认页面。接下来，选择 "+"号，或在右侧创建一个新的设计页面。下面介绍一些可在Figma中创建的关键组件。

• 在 Figma 中创建框架

您可以先在 Figma 中创建一个框架。这与显示设计的页面相同。您可以根据您的项目要求来确定一个边缘的大小。您可以创建自定义框架或移动应用专用框架。从顶部菜单中选择框架工具，在右侧面板上选择所需的框架尺寸。

• 在 Figma 中添加网格

在开始设计之前，您应该添加网格，使您能够保持适合页面的内容的一致排列。网格可以被添加到框架中，然后进行自定义。例如，在选择框架后，确保选择一个布局网格，以保持一致性和可用性。

• 在 Figma 中使用形状

您可以在 Figma 中使用形状和元素来创建方形、圆形、线条以及更多有助于使您的设计更具吸引力和用户友好的元素。您可以使用形状工具选择和调整所需形状的大小。

• 在 Figma 中添加图片

图片总是为我们的设计要求增加重要价值。Figma 提供了一个选项，可以从在线来源添加图片，或在本地执行拖放操作，将图片添加到您的页面。此外，您可以在需要时调整图片的大小。

Figma vs. Sketch

关于Figma和Sketch的争论一直存在。然而，设计团队转向 Figma 而不是 Sketch 的原因有很多。

• Figma是一个多合一的设计工具，提供了设计和协作所需的所有功能。Sketch使用Zeplin、InVision和Abstract等插件来提供与原型设计和开发人员交接有关的所需功能。
• Figma也是一个基于浏览器的应用程序，允许你在网上处理你的设计要求。而在Sketch上，你必须在一个需要频繁更新版本的Mac应用上创建和管理设计。从可用性的角度来看，这不是很好。

对于大多数以设计为中心的组织来说，Figma是比Sketch更受欢迎的选择，这一点并不奇怪，因为它是一个完整的工具，并允许设计团队之间进行很好的协作。

在 3000 多个浏览器上测试您的 Figma 设计的 Web 应用程序。现在就试试LambdaTest!

Figma 原型测试的优点和缺点

当您对包括高保真和低保真原型在内的Figma原型进行测试时，会涉及以下好处。

• 成本效益高。为您现有的设计解决可用性问题，将花费比您想象的多几倍的费用。因此，在对 Figma 原型进行测试时，您可以节省时间和精力来留住现有客户。
• 识别潜在的问题。在最终产品推出给最终用户或客户之前，潜在的问题就会被识别和修复。
• 改善终端用户的体验。当您用真实用户对其原型进行Figma测试时，有助于改善整体用户体验，从长远来看，这对您的产品的成功是非常好的。
• 纳入不同利益相关者的反馈。建设性的反馈有助于提高团队的整体表现。设计团队可以结合这些反馈来改进一般的设计过程。
• 有助于消除您的疑虑。测试Figma原型可以清楚地了解您的设计要求。它有助于回答所有令人困惑的问题，确保您在推出新网站或应用程序时能够做出明智的决定。
• 发现新的想法。用户反馈改善了你目前的设计，并为未来的设计发展发现了无数的机会。与真正的用户接触可以提供我们所不知道的见解，而这正是你为你未来的发布打下坚实基础的地方。

因此，如果您想通过Figma原型提供良好的用户体验，您应该进行可用性测试。通过发现潜在的问题，从终端用户的角度来看，设计只会越来越好，越来越可用。

除了Figma的优点外，它也有一些局限性。

• Figma为不同的设计团队提供了很好的协作，但你必须始终在线才能进行无缝的合作。
• Figma 中有一个版本控制功能，但跟踪最后一次执行的编辑是至关重要的，因为一个小的变化可能会影响整个现有版本。如果设计更新做得不正确，您可能需要恢复这些更改。
• 当设计文件处于草稿状态时，并没有为其分配所有者，所以总是可能出现它们所出现的所有权问题。
• Figma中的浏览器存在特定的缓存问题，团队同伴所做的设计更新甚至可能无法反映。因此，您需要对您的 Figma 文件进行刷新，以查看更新的变化。

何时应进行 Figma 测试？

评估您何时要对其原型进行 Figma 测试变得至关重要。没有固定的答案，完全取决于项目要求。但预留一些准则，让设计团队每次都能遵循，以保持一致性，这总是一个很好的做法。在开发一个新产品或试图改进现有产品时，在设计过程的早期进行可用性测试总是一个好的做法。它可以让你在完成太多的开发工作之前就能得到关于你的设计的早期反馈。

当你对现有的产品进行微小的改进时，实施全面的可用性测试可能不是一个好主意。相反，你可以得到快速的反馈，以确保你的设计要求与项目目标一致。

总而言之，当引入一个具有新功能和增强功能的新产品时，最好是进行全面的Figma测试来评估你的设计质量。另一方面，当现有产品已经提供给客户，而您正在进行新的改进时，不需要进行完整的可用性测试。

进行Figma测试的先决条件

这里有一些提示，可以帮助您对其原型进行Figma测试。

• 仔细选择参与者。当您测试高保真 Figma 原型时，选择熟悉 Figma 并有使用类似软件经验的参与者是至关重要的。刚接触 Figma 的参与者可用于测试低保真度的 Figma 原型。
• 您可以在实际执行 Figma 测试之前执行一次试运行。这可确保在对潜在用户进行 Figma 测试时不会出现任何障碍或问题。
• 您可以安排与相关的利益相关者对设计原型进行演练。
• 在测试过程中提出问题并获得参与者的反馈是非常好的。此外，你还可以从设计和最终用户体验的角度收集反馈。
• 分析反馈结果并改进设计，是非常必要的。
• 确保你有正确的测试策略，以达到预期的结果。

Figma测试中的常见错误

如果试图制定与Figma测试有关的策略，请不要犯以下错误。

• 你不允许你的用户完成整组任务。因此，给他们时间来试验原型并回答他们的问题是至关重要的。这时你会得到关于你的设计要求的很好的反馈。
• 当你没有为用户提供一套清晰的指令来完成所需的任务时，如果他们不知道他们应该做什么，他们甚至不能提供你所寻找的准确的反馈。
• 你甚至在测试完成之前就要求早期反馈。不幸的是，这给被邀请参加这个测试活动的参与者带来了亟需的挫折感。相反，给他们必要的时间来探索不同的特点和功能。

Figma测试的不同方法

以下是进行Figma测试的不同方法 -

使用迷宫测试 Figma 原型

如果您有以下与编辑有关的必要权限，您可以使用Maze测试您的Figma原型。Maze是一个很好的工具，用于与真实用户测试原型。您可以使用它来

• Figma原型的可用性测试。
• A/B测试设计以比较性能。
• 获得定量的数据，如成功率。
• 为您的设计找到最佳用户流。

Maze使用Figma原型共享链接来创建一个新项目。然后，你可以将文件导入Maze，在那里你可以对你的原型进行所需的Figma测试。

专门的远程用户测试工具

假设您正在寻找专门的工具来执行您的 Figma 原型测试。在这种情况下，您可以依靠远程用户测试工具，如 Userbrain，它也与 Figma 兼容。还有很多其他的远程测试工具，您可以根据您的测试要求来使用。以下是使用远程用户测试工具的最大好处。

• 你可以通过简单的注册和预定义模板在几分钟内完成设置。
• 你可以邀请你的测试人员团队来验证测试要求。
• 你可以通过随时重温测试视频来分析用户的需求。
• 您还可以根据设计的修订获得迭代反馈。

LambdaTest平台 - 简化测试需求

技术已经发展，所以你会看到组织运作方式的突然转变。我们已经超越了传统的测试方式，一个专门的测试人员团队将创建手动测试案例和场景，并使用excel表记录他们的测试观察。这意味着你必须花大量的时间来配置你的测试和基础设施要求。

依靠传统的测试手段没有坏处，但在多个浏览器和操作系统上进行测试时，就会成为一种挑战。因此，这又是关于管理你的测试要求的规模。这就是像LambdaTest这样的跨浏览器测试平台出现的地方。

LambdaTest是一个测试协调和执行平台，使用云基础设施满足你的测试需求。它可以让你在3000多个真实的桌面和移动浏览器的在线浏览器农场上测试你的网站和网络应用。

以下是LambdaTest的一些伟大功能，使其成为满足您Figma测试需求的伟大平台。

• 使用自动化测试工具（如 Selenium、Cypress、Playwright、Puppeteer、Appium、Espresso 和 XCUITest）测试网站和 Web 应用程序的自动化测试。
• 极快的测试自动化云--HyperExecute比任何传统的云网格快70%。
• 网络和移动应用程序的实时互动测试。
• 更快的自动浏览器屏幕截图测试。
• 你可以对你的应用程序或网站进行本地主机测试，以达到预期的性能。
• 地理定位测试和本地化测试，以测试网络和移动应用程序。
• 将 LambdaTest 平台与您最喜爱的工具（如 JIRA、Bitbucket、Slack、GitHub 等）集成，以便您能够有效地跟踪项目的关键性能指标。

在真实设备上测试您的 Figma 设计的移动应用程序。现在就试试 LambdaTest!

如何使用 LambdaTest 平台进行 Figma 测试

LambdaTest 让您可以在其高性能的真实设备云上灵活地对您的 Figma 开发的网站和移动应用程序进行 Figma 测试。您还可以在不同的浏览器和操作系统组合中执行手动或自动 Figma 测试。

此外，您可以利用以下额外的功能来进行 Figma 测试 --

1. 屏幕截图测试
2. 响应性测试
3. UI对比测试

屏幕截图测试

使用自动屏幕截图测试，您可以在各种桌面和移动设备上同时捕捉屏幕截图，这些设备运行在多个操作系统上。你可以直观地看到你的网络应用在不同的屏幕尺寸上使用不同的浏览器进行无缝渲染的情况。你可以在一个测试环节中捕获多达25张不同浏览器和操作系统配置的屏幕截图。

你可以在各种浏览器版本上进行测试，包括Chrome、Firefox、Safari、Edge、Internet Explorer和Opera。你还可以在多个操作系统上测试，包括Windows、macOS、Android和iOS。

你可以按照以下步骤在LambdaTest平台上进行屏幕截图测试。

1. 登录到你的LambdaTest账户。没有账户？免费注册吧。
2. 从左边的侧边栏，导航到更多工具>屏幕截图。

4. 它将把你重定向到屏幕截图测试控制台。为了演示，让我们在桌面浏览器上运行屏幕截图测试。首先，输入你的URL并选择浏览器和操作系统的组合。然后按CAPTURE。

6. 点击捕获将带你到屏幕截图结果页面。在这里你可以查看和下载你的屏幕截图。

要在LambdaTest上开始屏幕截图测试，请查看下面的视频教程。

响应式测试

LambdaTest响应式测试可让您一次性在50多种不同的屏幕尺寸上测试移动网站。

1. 登录到您的LambdaTest账户。
2. 从左边的侧边栏，导航到更多工具>响应式。

3. 选择所需的显示器尺寸。
4. 输入测试URL。您还可以添加隧道的详细信息。(如果需要)
5. 接下来，从可用的选项中选择设备，设备名称和视口是自动填充的。
6. 一旦所有需要的细节被输入，点击生成。

要在LambdaTest上开始响应式测试，请查看下面的视频教程。

UI对比测试

通过UI比较测试，你可以测试和比较两个图像布局，以确定它们的差异。此外，你可以一键查看视觉错误，包括图标大小、填充、颜色、布局、文本、元素位置等。

你可以按照以下步骤在LambdaTest平台上进行UI对比测试。

1. 登录到你的LambdaTest账户。
2. 从左边的侧边栏，导航到更多工具 > UI比较。

3. 点击 "+"图标，上传一张基线图像。

4. 一旦你上传了基线图像，点击上传比较图像。

5. 上传比较图像后，点击比较图像缩略图上的 "运行"按钮。

6. 之后，点击查看问题。

你现在可以查看你的基线图像和对比图像之间的视觉用户界面不匹配。

这还不是全部!除了网络测试，您还可以在 LambdaTest在线设备场上对您的 Figma 开发的移动应用程序进行实时和自动化的应用测试，该设备场有 3000 多个真实设备和操作系统组合。

结论

原型设计在设计过程中起着至关重要的作用。但这并不意味着你只专注于创建部分，你的工作就完成了。你必须进行Figma测试，以识别和修复影响最终用户体验的潜在问题。

在 Figma 测试阶段，有一些问题是您必须回答的。

• 您应该何时对 Figma 原型进行可用性测试？
• 如何用真实用户进行这些测试，在这种情况下，谁应该是用户？
• 在 Figma 测试过程中，有哪些常见的错误？

当您得到上述问题的明确答案时，您就可以制定一个策略，利用所需的工具进行 Figma 测试，以帮助您实现预期的结果。

常见问题 (FAQ)

我怎样才能测试我的 Figma 网站？

您可以使用各种方法来测试您的 Figma 网站，包括使用 Maze 测试 Figma 原型、使用远程用户测试工具进行测试等。测试 Figma 设计的 Web 应用程序的最佳方法是使用基于云的测试工具，如 LambdaTest。通过LambdaTest，您可以在其高性能的设备云上通过3000多个真实的桌面和移动浏览器测试您的Figma网站。

Figma 适合做原型设计吗？

使用 Figma，用户体验/用户界面原型设计很容易。您可以使用先进的工具直接在设计文件中创建互动流程。只需点击几下，您就可以将您的静态设计变成网站或应用程序的真实副本。