如何在 Figma 中创建深色模式设计

16533

前言

目前,大多数平台都支持深色模式。而且,当用户在他们的设备上切换模式时,他们通常希望所有应用程序也能够适配。在本文中,将为你展示一些可用于在Figma 中为创建深色主题的方法。

专用组件

通常,设计师更喜欢为深色模式创建单独的组件。在某些方面(就逻辑而言),这是最简单的方法。特别是对许多新手设计人员,如果每个案例都有一个专用组件(包括深色浅色模式)时,对他们而言会更加友好。

image.png

这种方式看起来虽然简单,但通常确实最耗时的。毕竟,我们需要为每个组件创建一个深色版本(其中还包括常规组件的所有变体和功能)。这种情况下,多过的关注于组件的外观,会让设计师遗忘配色方案的一半逻辑,极端情况下,开发人员必须为每个组件(甚至应用程序)创建第2个版本。

专用的 dark/light

如果你想要一个可扩展的解决方案,最合理的做法是将Light 主题的每种颜色映射到 Dark 主题对应的颜色

但是,这并不意味着我们可以简单地,例如,将白色相应的深色模式对应的颜色进行匹配。因为相同的白色可以用于不同类型的元素:文本背景图标框架等等。

对于某些组件,我们在切换到Dark Mode时可能需要不同的方法。

image.png

为了更容易根据元素类型或单独为组件选择DarkLight主题的颜色,最好我们应该使用语义颜色:而不是根据它们的外观(白色、蓝色、浅色等)来调用颜色,而已取决于它们的使用方式位置背景颜色文本按钮等。这种方法不仅在需要描述Dark theme时提供了更大的灵活性,而且在一般情况下也提供了任何颜色主题。

image.png

最重要的是,它还有助于简化开发。

但是如何在 Figma 中使用这一切呢?也就是说,如何设计将从 Light 主题转换为 Dark 主题?

Figma 中有几个选项。

属性 面板中的手动颜色转换

首先,可以通过属性面板简单地转换颜色。可以对一个元素或整个屏幕执行此操作:当选择多个元素时,Figma会将所有使用的颜色收集到一个列表中。然后用Dark模拟替换Light颜色。

image.png

这种方法很方便,优点包括:

  • 对初学者来说,容易理解
  • 可以单独更改每个元素或屏幕的主题。
  • 一切都是通过熟悉的属性面板完成的。
  • 非常透明:选择布局后,你可以从颜色列表中了解使用的主题。

但是,当然也有一些缺点:

  • 手动更换颜色可能既烦人又费时。
  • 选择颜色时很难避免错误。
  • 在某些情况下,这是低效的。

库转换

你可以将不同主题的颜色拆分为不同的颜色库。这将简化更改主题的过程。

image.png

然后转换主题,你可以:

  • 转到团队库
  • 在那里选择主颜色库(例如,Light
  • 单击转换库
  • 选择新的颜色库(例如,Dark)

这仅在两个库中的颜色名称 100% 相同时才有效。

image.png

在这种情况下,Figma 会将 Light 库中的每种颜色替换为 Dark 库中对应的颜色。对于整个文件。这意味着它将影响文件中的所有布局

这种方法非常方便,其优势包括:

  • 一切都是通过 Figma 的内置功能完成的。
  • Figma 自动替换所有元素的所有内容。
  • 允许避免手动替换时可能发生的错误(如果两个库都已正确准备)。

但是,也存在缺点:

  • 不能改变单独选择的屏幕的颜色,因为替换是针对整个文件完成的

为了解决这个问题,我们可以使用一个小技巧。实际上,当转换库时,Figma 不会替换颜色库。它将文件中使用的每种颜色替换为新库中的相应颜色(根据它们的名称),同时保持先前的库连接。因此,如果仍然需要在一个文件中显示两种模式的设计,可以在转换颜色库之前将所有设计复制到剪贴板,然后转换之后粘贴它们。

image.png

但是,同样这也并不总是很方便:如果文件中有多个页面,则很难执行此技巧 或者,如果之后需要添加新的设计

插件

Figma 的一个巨大优势是几乎所有缺失的功能都可以以插件的形式实现。 几乎是因为出于安全原因,Figma 有许多限制,不允许插件绝对做所有事情。但是,即使有这些限制,插件也可以做很多事情。

目前,我们可以使用许多不同的插件来管理 Figma 中的颜色。唯一的问题是需要什么样的功能以及插件的设置应该有多灵活

大部分时间我们都会在设计系统中工作并使用外部库。能够调整插件的参数以匹配特定库的颜色结构对我们来说也很重要。考虑到这些要求,这里只能强调几个解决方案。

Appearance 插件

Appearance 插件允许切换 Figma 中任何选定元素的颜色模式。因此,我们可以选择一个屏幕或其中的一部分,并将其颜色模式从Light更改为Dark,然后再返回。这个插件是由 Alex Dyakov 制作的,他写了一篇文章解释了它是如何工作的,甚至给出了一些实现的技术细节。

1_x0k74Km_sdVw_y-8rPSrQA.gif

该插件适用于外部库(如果事先准备好)并且易于使用。

在测试过程中,我发现只有一个小缺点——该插件不适用于同时使用多种颜色的文本

image.png 这更像是一个错误。该插件非常适合日常工作。

做为替代方案,还有Dark Mode Switcher插件。它的工作原理与外观相同,但由于缺少设置,灵活性较差。

Figma Tokens 插件

Figma Tokens 插件提供了另一种方法。它允许使用标记设置颜色并将标记组合成集合。因此,可以为选择、页面或整个文档切换令牌集。

image.png

使用颜色只是插件可以做的一小部分。

自动 dark 主题生成器

有许多解决方案提供了另一种方法——自动为Dark mode生成颜色。这意味着不是在预定义的调色板之间切换,而是基于浅色创建一个深色主题。一个很好的例子是 Ruslan HumennyDark Mode Magic 插件。

image.png

如果想从头开始为Dark mode创建调色板,并且没有机会、时间或只是想自己选择颜色,该插件非常棒。

总结

在本文中,仅列出了一些允许在 Figma 中为你的设计创建Dark theme主题的解决方案。希望你在这里找到了一些有用的技巧,并可以付诸实践。