设计资讯：Figma vs Sketch！为什么10 家设计机构从 Sketch 转向 Figma？

原创交互设计小助手美国交互设计资讯

UI & UX

Article：2022/05/26

互联网上围绕Figma和Sketch一直存在争论。设计师们和设计机构现在想知道哪一个更适合 UX/UI 设计、原型设计、团队协作等工作。

为了让大家更容易选择两个工具，本文中将详细介绍 Figma 和 Sketch，并附有相关行业人员对他们使用软件（Sketch 或 Figma）的感受以及选择原因。

“Figma 是代理商的终极选择 - 内置设计、原型制作和开发人员移交功能，所有这些都在一个完整的基于浏览器的解决方案中，并带有与 Windows和iOS兼容的可选桌面应用程序！”

“

Figma vs Sketch：

这两个平台是什么？

将鼠标悬停在这两个平台的登录页面上时，首先看到的是这两个 UI 设计工具是如何推销自己的。Figma 通过“Figma：协作界面设计工具”保持简单，而 Sketch 通过“设计、协作、原型和移交”进行了详尽的阐述。

除此之外，我们可能被 Figma 的简单性和隐含的易用性所吸引，同时对 Sketch 的多维功能感到好奇。

什么是Figma?

Figma是一个基于浏览器的设计工具，它为来自世界各地的人们提供了一些非常强大的设计工具。设计师们可以从全球所有不同的地理位置一起在同一个设计文件中工作——即使他们都在远程工作。

这款基于矢量的强大设计工具可在浏览器上无缝运行。Figma 能够在三年内通过大量的实验、测试和使用 WebGL 的图像处理来构建它。Figma 允许其社区成员构建和发布数千个模板、插件和小部件，以增强工作流程并为 Figma 添加增强功能。我们可以使用这些Figma 社区插件更快、更高效地创建高级设计。

代理商更喜欢使用 Figma，因为它为他们的所有创作过程和努力提供了一个家——在浏览器上也是如此。IDEO等机构选择 Figma 来运行从启动到交接的设计项目。他们可以轻松地就想法进行头脑风暴，就设计进行协作，然后他们还能够使用这种协作式界面设计工具更快地完成工作和可交付成果的交付。

“今天，多亏了Figma，我们能够在不同的内部和外部设计团队中并行处理超过 15 个项目，从而保持我们设计的一致性和质量。”

——Repsol Design System的产品负责人Elena

“Figma已经释放了我们与合作伙伴共同创造的能力——让我们的团队能够按照对话的步伐前进。”

——Basic 的首席执行官 Matt Falk

Figma于2015年上市，是第一个在 Web 上提供原生应用程序功能的设计工具。

（Airbnb、GitHub 和 Conde Nast 对 Figma 的看法）

什么是Sketch?

Sketch专为UI设计而打造，是一款真正的原生 Mac应用程序。目前，这款获得Apple设计奖的应用程序拥有超过一百万用户，其中包括 Google、XBOX、保时捷、Facebook等大牌。Sketch 还有一个网络应用程序，但是不能在那里创建设计，只能分享工作和收集反馈。

Sketch的人员远程工作。其中有 100 个，都属于 25 个不同的国家，没有办公室，只是远程工作。这就是他们重视合作的原因。

Figma 和 Sketch 都允许网页设计机构和网页设计师私下工作以及分享他们的设计和协作。他们的文件格式使得开发人员可以轻松地构建插件和集成，并且任何人都可以将他们的工作移动到任何地方，而无需任何类型的平台锁定作为其开放性质的一部分。

Sketch 提供了近700个现成的扩展，因此他们可以使用这些插件、人工智能助手和集成来使他们的工作更快更好，或者在其开放文件系统上创建自己的扩展集。这为 Sketch 提供了个性化和更个性化的用户体验。

“我们在多个产品中使用 Sketch，有多个 UI/UX 设计师和图形设计师。从登陆页面到成熟的网站，应有尽有。我们喜欢缩放图形是多么容易。”

——Catena Media 的设计主管 Roberta Galea

“Sketch 具有这种惊人的能力，既欢迎初学者，又不受高级用户的限制。作为培训许多设计团队的人，这使得 Sketch 成为数字设计行业标准工具的明确选择。”

——Sketch Master 的创作者 Peter Nowell

网页设计机构和网页设计师通常偏爱Sketch的灵活性，允许灵活的矢量编辑和像素级精度的设计。Sketch 还为设计师提供了许多导出选项，以便能够在设计过程的每个阶段创建和交流设计资产以及模型。

“

为什么设计师们

从 Sketch 转向 Figma？

现在越来越多的设计师从 Sketch 转向 Figma。人们通常会在某些事情明显更好并且切换非常简单和容易时主动切换。

事实上，现在我们知道 Sketch 可以轻松导出文件。另外还应该知道 Figma 允许你一开始就导入 Figma、Sketch 和其他图像文件。这为从 Sketch 切换到 Figma 的设计师提供了一个简单的开始，他们可以随时开始在网络上进行设计。

当然还有其他原因可以解释为什么设计师转向 Figma：

01.Figma是一个多合一的设计工具

Figma是一个多合一的完整设计工具，拥有设计和协作所需的一切，它甚至为您提供了自己的 FigJam白板；而Sketch使用Zeplin、InVision 和 Abstract 等插件为您提供原型设计和开发人员移交等功能。Zeplin 允许协作式 UI/UX 设计，InVision 提供协作式白板，Abstract 是一个设计智能平台，也允许团队协作。

02.Figma是基于浏览器的应用程序

Figma是一款基于浏览器的应用程序，可让您在网络上高效地进行创作和设计。在 Sketch 上，必须在需要频繁版本更新的 Mac 应用程序上进行创建和设计，这很烦人并且会造成糟糕的可用性。据ClickZ称，“79% 的用户最重视网站或应用程序的整体可用性。” .

此外，使用 Sketch，您需要在 Mac 应用程序上创建所有设计，并且只有在导出文件以供查看、共享、反馈和评论时才能在 Web 上进行协作。

在Figma上，一切都发生在一个地方，也就是网络上。所以 Figma 使用起来更简单，因此用户体验更好。

03.Figma 允许更好的协作和团队合作

Sketc 无法做到的事情是在一个地方完成所有事情的灵活性。使用 Figma，您可以通过共享设计文件轻松地在 Web 上进行实时协作。

一些网页设计机构可能会质疑 Figma 是否真的可以匹配 Sketch、Zaplin 和 InVision 的综合性能。为了回答他们，我们会说可以，为什么呢？

因为 Figma 拥有所有功能，使设计工作流程更加顺畅。例如，由于它自己的原型设计功能，它使您的线框/设计的显示更加流畅。此外，与使用 InVision 或 Sketch 中的其他原型制作软件相比，使用 Figma 自己的 FigJam 白板可以获得更流畅的用户体验。

Figma是一个完整的解决方案，从创建和协作设计文件，到原型交互，共享原型和文件的链接，通过评论收集反馈，以及访问作为网页设计机构所需的所有代码片段和规范Web开发。

“

Figma vs Sketch：一目了然

Unfold的创意总监说：“比较Sketch和Figma 就像比较 Notepad 和 Google Docs。”但真的是这样吗？好吧，让我们快速看看这些设计机构都在思考什么：Sketch 还是 Figma？Figma 显然是赢家。

“

Figma vs Sketch：

详细的功能比较

我们将在这里详细讨论Sketch和Figma 工具，特别关注它们的功能、定价、平台和性能。

01.平台、兼容性和性能

让我们看看 Figma 和 Sketch 如何在平台和性能方面相互竞争:

Figma

如果谈论Figma的平台和性能，那么Figma基础架构的速度和稳定性必须提及。这个想法是为设计师提供头脑风暴设计的速度，这样他们就可以轻松地从 Figma 更广泛的设计系统中绘制形状、确定样式和拖动 UI 元素。

Figma 的整个基础架构团队完全负责协作设计工具的最终性能、规模和可用性。尽管它是一个基于 Web 的应用程序，但它与桌面应用程序一样快。

Figma 的工程团队不断致力于改进后端以使 Figma 更快。他们致力于通过在后端使用不同的策略、扩展数据库和提高国际用户的性能来加快交互延迟。他们正在积极地在 Figma 设计工具中构建新的响应功能，以使其能够提供卓越的平台体验和定价。

Sketch

Sketch 平台是 MacOS 的原生平台，它还允许您在本地工作。至于兼容性，使用 Sketch，您只能在 Mac 应用程序上创建您的设计。但是，它允许用户在浏览器上查看、共享和评论。

很多设计机构提到他们首先必须在 Sketch 中创建设计，然后去 InVision 创建原型，收集反馈并在此基础上进行构建。他们还告诉我们，然后他们必须去 Zeplin 才能上传最终的、完全批准的项目。因此，尽管 Sketch 在其网站上说它是一个多合一平台，但我们从使用它的人那里发现它不是。

Sketch 在 Apple Silicon 上的性能也非常快。如果您已经熟悉在 Mac 上使用应用程序，该平台将为您提供良好的用户体验。Sketch 的人员还致力于为 Sketch 带来新的更新和功能。他们还在主页上展示了它们，因此您可以阅读设计工具的最新动态。

02.定价

现在让我们一一看看 Figma 和 Sketch 的定价和计划。

Figma

当谈到 Figma 设计工具平台时，您应该知道入门是多么容易，并且您也可以免费使用它，并且可以在免费计划中工作多久就可以工作多久。

Figma 有四个主要的定价计划。有免费计划，Figma专业计划，Figma组织计划，然后是 Figma Enterprise计划。Figma 专业计划从每位编辑每月 12 美元起。

Sketch

Sketch 不提供免费计划，但为您提供 30 天的试用期。只有在您共享文件并且您的团队或客户必须查看它的情况下，查看者才免费。

有两种定价计划，标准和商业。标准计划从每位编辑每月 9 美元起。它没有像 Figma 这样的企业级计划。

03.界面、仪表板和绘图工具

Figma

当您在 Figma 上创建帐户时，您会进入 Figma 仪表板，其中包含不同的选项卡和详细信息。在这里，您将能够创建新文件、导入所需的任何文件、搜索现有文件以及查看所有最近的文件。

一旦你选择创建一个新文件，你就会进入一个看起来非常简单的编辑器，所以如果你从任何 UI 设计工具切换到 Figma，你不会不知所措。工具栏为您提供了许多选项：例如菜单、移动和缩放选项、框架工具、形状工具、钢笔工具、文字工具、手工具、评论工具、个人资料头像、分享按钮和播放和缩放按钮。

通过菜单，您可以访问插件、库、不同的自定义选项、设置首选项、查看和更改帐户设置等。

使用框架工具，您可以创建新的画板（就像在 Sketch 中所做的那样）。您可以自由创建自定义的。但是，如果您想从右侧面板上的默认选项之一中进行选择，您也可以这样做。请参考下图了解：

框架工具还允许您访问切片工具。您可以使用此工具在框架上指定要导出的区域。

使用形状工具，您可以创建基本的预定义形状。如果要使用矢量锚点创建自定义形状，可以使用钢笔工具。铅笔工具也可在钢笔工具下拉菜单中使用。

使用文字工具，您还可以在设计中添加文本元素，而手形工具可让您将鼠标悬停在设计文件周围，而不会意外移动任何其他元素。您可以使用评论工具添加、查看和回复评论。

您可以通过右侧的用户个人资料头像轻松查看在给定时间查看文件的人员（请参阅上图）。接下来，您还可以使用共享按钮，它会为您提供嵌入代码或可以共享的链接。它还使您可以访问共享设置。分享按钮旁边是播放按钮，可让您查看您拥有的任何原型。然后，您还有缩放选项。缩放设置还为您提供其他选项，如网格、轮廓、标尺等。

工具栏的中间包含项目名称和文件名。您只需单击它们即可编辑它们。您的设计文件在一个项目中（就像一个文件夹）。您可以更改项目名称以将设计文件移动到另一个项目（文件夹）。

Figma 编辑器上有两个面板。左侧面板是图层面板，其中包含已添加到设计文件的资源、图层和页面。而编辑器右侧的属性面板可让您自定义框架大小、位置以及笔触、颜色和效果等元素。它还向您显示元素的代码。这使您可以轻松地将不同的元素复制并粘贴到您网站的实际页面上。

在上图中，您可以看到您可能必须将不同的设计元素放在不同的页面中。这通常发生在您从事大型设计项目时。您可以在 Figma 中创建许多页面，并将所有相似的元素放在一个页面上。

在 Figma 中，你有组件而不是符号。Figma 编辑器左侧的资产面板允许您将资产（或元素）保存为组件。这些可能包括表单、按钮、导航、覆盖、单元格和卡片。这非常有用且方便，因为您可以在设计文件中重复使用这些已保存的组件时访问它们。

Sketch

在 Sketch 中，你的编辑器就是 Sketch 画布。当您选择在 Sketch 上创建新设计时，您将前进到 Sketch 画布，您可以在其中创建设计。

Sketch 画布是无限的，因此您不会用完空间。但是，如果您喜欢在固定框架内工作，您可以选择将画板添加到画布中。您可以放大和缩小画布，并且您将以矢量模式查看它，这将允许您无限放大以进行尽可能多的细节。如果要处理每个像素，可以更改设置以在缩放时显示像素。像素网格的情况也是如此。

标尺是隐藏的，因此您必须稍微更改设置才能显示标尺。您可以通过单击标尺上的任意位置来创建参考线。当您想要放置设计元素时，指南很有帮助。但是，它们只会在标尺可见时显示。

Sketch 工具栏有画布和组件视图开关，它有一个 + 插入选项，有助于向画布添加图层。然后是创建符号的选项，它可以帮助您从不同的组和层创建可重复使用的资产。

您还可以在工具栏上找到用于组织图层的选项，例如向后、向前、分组和取消分组。您还可以使用工具栏上的编辑和工具选项来编辑图层。

使用 Mac 应用程序的布尔运算，您可以创建复杂的形状。union 选项可帮助您创建一个形状，该形状是多个形状区域的总和。减法选项从它下面的区域中消除形状的区域。相交选项从所选形状相交的区域创建一个形状。差异选项从原始形状不相交的区域创建形状。

然后是显示您的原型的预览选项。协作选项可让您将文档上传到工作区。当您的文档中有新的库更新或缺少元素时，通知选项会通知您。

在 Sketch 界面中，您有一个检查器，可让您查找任何图层的设置以及您正在使用的任何工具的控件。有一个图层列表，您可以在其中找到图层、页面和画板。您可以安排它们，甚至从这里重命名它们。您可以在组件视图中创建、管理和搜索符号、文本、图层和颜色变量。还有一个插入窗口，您可以从中插入不同的元素。

至于绘图工具，您可以使用矢量工具创建和使用预制形状。您还可以使用铅笔工具。您可以正常添加文本和图像，也可以使用数据工具从不同的数据源将不同的图像和文本添加到您的设计中。

04.团队与协作

在实时协作方面，Figma 无疑是赢家。让我们看看每个 UI 设计工具如何促进协作。

Figma

上图展示了 Figma 可以实现的多人协作。事实上，Figma 工程总监Samir Goel说：

“传统上，设计师在孤立的桌面应用程序中工作，这些应用程序只能在某些类型的平台上运行。如果其他人没有下载并安装该工具，他们将无法访问该作品。设计人员必须导出文件并切换到其他第三方工具来进行原型设计和开发人员移交。当他们在这些系统中迭代和打乱文件时，很容易忘记最新版本，即使不是不可能，也让协作团队工作变得痛苦。”

他进一步补充道：“相比之下，Figma 中的每个设计文件都是一个活生生的实体，并且不断发展。该设计位于云中并具有唯一的 URL，因此它是整个团队的真实来源。整个组织的不同人员可以在设计上进行协作、提供反馈、签到以了解工作的进展情况，或者标记实施过程中可能出现的问题。”

Figma 允许利益相关者查看原型，并允许开发人员从同一个文件中提取数据。这种原型设计和开发人员交接功能可以实现有效的团队协作。多人可以同时处理同一个文件。Figma 后端基础架构使得复杂的形状和大图像不是问题。数据很容易通过网络发送。交互性能比任何桌面应用程序都要流畅得多。

Sketch

尽管 Sketch 可以进行实时协作，但它可能有点复杂。如果您的团队想要在 mac Sketch 应用程序上实时协作，他们必须订阅。没有其他方法可以解决它。

来自您的网页设计机构的人员只有在应该协作处理上传到这些工作区的文件时才能查看将添加他们的工作区。您可以在帐户选项卡（草图>首选项>帐户）中可见的个人资料图片下查看您所属的所有工作区。

您必须将设计文件上传到共享工作区才能开始协作。请记住，只有拥有 Mac 应用程序兼容版本的人才能打开和编辑它。因此，总的来说，实时协作有两个要求。首先，您的整个团队需要订阅 mac 应用程序，其次，mac 应用程序的版本应该与您的兼容。这使得协作变得棘手，因为经常会出现新版本，并且经常更新它们并不总是可能的，因为这需要很多时间。

05.网格和布局

Figma 和 Sketch 都允许您在画板上方和上方覆盖网格。Figma 的框架更灵活，因为它们可以嵌套。让我们看看 Figma 和 Sketch 在网格和布局方面的比较。

Figma

Figma 允许您添加任意数量的网格、列和行。使用 Figma，您可以非常关注细节。如何？只需将装订线设置为 0，您就可以从看到填充的列切换到只看到行。Figma 允许在框架以及单个组件上使用网格。这在 Sketch 中是不可能的。

现在，因为 Figma 允许在单个组件上使用网格，所以当您碰巧使用可调整大小的组件时，您可以使用这些网格作为填充指南。Figma 还允许您设置约束以指定设计元素在调整其容器大小时将如何移动甚至缩放。

但是，在 Figma 中，约束仅适用于框架内的元素，而不适用于组。这不是理想的事情，因为当您调整组大小时，约束不起作用。但是 Figma 允许您使用比组更强大的嵌套框架。

Figma 布局网格的另一个好处是布局约束适用于包含元素的单元格或列。这与嵌套框架一起为您提供了更多控制权，因为现在您可以控制屏幕各部分的单独网格。

Sketch

Sketch 在网格和布局方面也非常出色。它允许您同时使用方形网格和柱形网格。它还允许布局网格中的行和列。

Sketch 还允许您设置约束。事实上，它具有与 Figma 几乎相似的用户界面，用于设置和管理这些约束。在 Sketch 中，约束可以对组起作用，而 Figma 则无法做到这一点。这意味着即使您想调整组的大小，它们也会起作用。

Figma 是一个完整的基于浏览器的设计工具，而 Sketch 是 macOS 原生的。Figma 还有一个桌面应用程序（与 windows 和 mac 兼容），让设计师可以自由地在浏览器和应用程序上进行设计。

使用 Figma，实时协作更容易。使用 Sketch，只有具有应用程序兼容版本的应用程序订阅者才有可能。此外，您必须将文件上传到共享工作区才能启动协作。

Figma 有课程和设计应用程序来帮助设计师入门，而 Sketch 有文档形式的资源。

Figma 有更好的绘图工具，带有矢量网络和响应式网格和布局。Sketch 有矢量路径，合理的网格和布局，选项比 Figma 少。

最后，Figma 起价为每月12 美元，而 Sketch 起价为每月 9 美元。

因此，如果您有一个网页设计机构，并且需要有效的团队协作，我们相信使用 Figma 会更好。相比之下，如果您是个人设计师，或者有一个非常小的团队，几乎不需要实时协作，您可以选择使用 Sketch。您可以在 macOS 上同时使用 Figma 和 Sketch。如果你想在浏览器上做所有事情，那么 Figma 就是你应该使用的！

（部分图文来自网络，若有侵权，请联系删除。）