创建响应式设计系统：SketchFigma和Adobe XD比较

Posted 2021-04-30 XD资源库

原文链接：https://boagworld.com/design/responsive-design-system/

在所有流行的UI设计工具中，对响应功能的支持都进行了重大改进。但是，按照目前的情况，显然有赢家，这可能会让您感到惊讶。

我最近发现自己处于一个独特的位置。我被要求为客户创建一个设计系统（这很正常）。但是，由于他们没有真正的UI经验，因此他们对我使用哪种工具没有偏爱。

我的工作是在图形包中创建设计系统，而不是生成代码。需要强调的是，创建响应式设计系统的最佳方式是html、CSS和javascript，因为与图形工具不同，它的行为就像最终的网站一样。但是，这不适合这里。

他们有一个图形设计师团队，他们需要能够快速制作模型页面。他们知道这些人几乎没有UI设计经验，也没有编码经验。他们需要一个设计系统来帮助他们做出正确的决定，并使他们对最终站点的行为有一种现实的感觉。

我建立的任何设计系统都需要融入响应能力，因为这是印刷设计师经常遇到的问题。

那我有一个问题，哪种工具最适合构建响应式设计系统？

回答这个问题；我对三种主要的UI设计工具进行了简短回顾：Sketch、Adobe XD、FIGMA

为了确定这三种工具构建响应界面的能力，我决定研究一下这些工具是否可以复制三种浏览器的响应行为。包括：

• 元素的缩放以适合可用区域；

  
  

• 当文本流入其他行时，浏览器将内容向下推入页面的方式；

  
  

• 根据断点调整布局位置的能力。

  
  

我想先看一下Sketch，因为这是我最熟悉的工具。

Sketch如何处理响应式设计系统

Sketch支持一定程度的响应能力已有一段时间。与其所有竞争对手一样，您可以将内容固定在左侧或右侧，并固定元素的宽度或高度。这使得添加相当程度的响应能力相对简单。

除此之外，事情开始崩溃。例如，如果您的长标题环绕在第二行或第三行上，则它将与页面下方的项目重叠。

当然，可以通过手动调整元素大小来解决。但是，如果将元素包含在symbol中，则不能这样做，这在构建设计系统时将是必需的。

直到最近，解决此问题的方法是使用名为Anima的插件。问题在于，尽管插件很棒，但有时可能会出现故障，并且无法始终做出可预测的响应。

Sketch中的Anima插件有助于响应式设计系统Anima是一个功能强大的插件，通过将页面下方的元素下推，可以容纳元素的扩展。

因此，当几天前Sketch发布58版时，我寄予厚望。乍一看，Sketch确实克服了这个问题，因为随着文本的扩展，内容被向下推到页面上。不幸的是，它确实有一些限制，其中最大的限制是，一旦嵌套了symbol，它似乎就会停止工作。

最终让Sketch失败的是符号的局限性以及它对断点的缺乏支持。除了一些替代之外，在符号中可以执行的操作还有很多限制。其中最大的一个事实是您无法适应不同屏幕宽度的symbol布局。

解决此问题的唯一方法是分离symbol并创建新的布局。当然，这样做的缺点是您对符号进行的全局更新不会反映在分离的元素上。实际上，它破坏了设计系统的功能。

Sketch几乎可用，但是最后，我决定使用别的软件，于是我将注意力转向了Figma。

在Figma中建立响应式设计系统

不幸的是，在许多方面，Figma似乎比Sketch更受限制。它确实具有简单的响应能力。但是，我找不到一种方法来使文本强制内容包装在页面下方。

另外，像Sketch一样，它不允许我修改组件（等同于符号）的布局。

不要误会我的意思。我对Figma有很多喜欢。但是，从响应式设计系统的角度来看，这就像从Sketch 58退后一步。

关于Figma，有很多值得一看的地方，但是对于创建响应式设计系统来说，它并不是正确的工具。

就是说，我没花太多时间看Figma。我一直觉得我必须丢失一些东西，因为其功能集的其他方面令人印象深刻。实际上，也许我确实没有看到如何做我需要做的事情。

当然，这本身并不是一个好兆头。如果我不知道如何使用该工具，那么它可能不适合我没有经验的客户。

由于Sketch和Figma都没有提供我想要的东西，因此我将注意力转向了Adobe XD。

您可以在Adobe XD中构建响应式设计系统吗？

我对 Adobe XD 期望不高。自从 Adobe 转向订阅模式以来，我几乎放弃了他。当 Adobe 在 Beta 中发布 XD 时，我曾看过它，这让我感到震惊，因为它试图与 Sketch 竞争。

乍一看，似乎 XD 在响应式设计系统方面不如 Sketch。

尽管其响应式功能的工作方式与 Sketch 完全相同，但它没有 Sketch 58 中引入的更强大的功能。

但是，事实证明它并不需要，因为它具有更好的功能-能够编辑组件实例。

Adobe XD 使您能够大量自定义组件实例，同时仍使您能够进行全局更改。

Sketch 使用覆盖系统来编辑其符号时，XD允许您修改实例的任何方面。而且，您可以这样做，而不会失去通过编辑主组件进行全局更改的功能。

例如，我可以在实例中四处移动元素，而无需将其与主组件分离。这样，我仍然可以通过编辑主组件来更新实例，同时保留对实例所做的更改。

这使您可以移动或调整元素大小以适应文本换行。它还使您可以根据可用的屏幕空间完全更改实例的布局，同时保持全局编辑的能力。

我最喜欢Adobe XD的最后一件事是它似乎更具可预测性和直观性。借助Figma和Sketch，我发现自己使用了反复试验来复制所需的效果，而在XD中，效果似乎显而易见并且可以正常使用。但是，我自由地承认这可能取决于我的思维模式。

判决

至少出于我的目的，Adobe XD提供了在设计包中复制Web响应特性的最佳解决方案。但是，它并不完美，我认为任何图形包都不会。

例如，如果 Adobe XD 支持以 Sketch 相同的方式自动下推内容，我会喜欢的。我还希望能够设置实例布局自动更改的断点。但是，我无法告诉您这些技术的技术可能性。

我可以说的是，所有图形包在改善对响应式界面的支持方面都取得了长足的进步，对未来来说是个好兆头。

往期回顾