前言
目前,大多数平台都支持深色模式。而且,当用户在他们的设备上切换模式时,他们通常希望所有应用程序也能够适配。在本文中,将为你展示一些可用于在Figma
中为创建深色主题的方法。
专用组件
通常,设计师更喜欢为深色模式创建单独的组件。在某些方面(就逻辑而言),这是最简单的方法。特别是对许多新手设计人员,如果每个案例都有一个专用组件(包括深色和浅色模式)时,对他们而言会更加友好。
这种方式看起来虽然简单,但通常确实最耗时的。毕竟,我们需要为每个组件创建一个深色版本(其中还包括常规组件的所有变体和功能)。这种情况下,多过的关注于组件的外观,会让设计师遗忘配色方案的一半逻辑,极端情况下,开发人员必须为每个组件(甚至应用程序)创建第2个版本。
专用的 dark/light
如果你想要一个可扩展的解决方案,最合理的做法是将Light 主题的每种颜色映射到 Dark 主题对应的颜色
但是,这并不意味着我们可以简单地,例如,将白色与相应的深色模式对应的颜色进行匹配。因为相同的白色可以用于不同类型的元素:文本、背景、图标、框架等等。
对于某些组件,我们在切换到Dark Mode时可能需要不同的方法。
为了更容易根据元素类型或单独为组件选择Dark和Light主题的颜色,最好我们应该使用语义颜色:而不是根据它们的外观(白色、蓝色、浅色等)来调用颜色,而已取决于它们的使用方式和位置:背景颜色、文本、按钮等。这种方法不仅在需要描述Dark theme时提供了更大的灵活性,而且在一般情况下也提供了任何颜色主题。
最重要的是,它还有助于简化开发。
但是如何在 Figma 中使用这一切呢?也就是说,如何设计将从 Light 主题转换为 Dark 主题?
Figma
中有几个选项。
属性 面板中的手动颜色转换
首先,可以通过属性面板简单地转换颜色。可以对一个元素或整个屏幕执行此操作:当选择多个元素时,Figma
会将所有使用的颜色收集到一个列表中。然后用Dark模拟替换Light颜色。
这种方法很方便,优点包括:
- 对初学者来说,容易理解
- 可以单独更改每个元素或屏幕的主题。
- 一切都是通过熟悉的属性面板完成的。
- 非常透明:选择布局后,你可以从颜色列表中了解使用的主题。
但是,当然也有一些缺点:
- 手动更换颜色可能既烦人又费时。
- 选择颜色时很难避免错误。
- 在某些情况下,这是低效的。
库转换
你可以将不同主题的颜色拆分为不同的颜色库。这将简化更改主题的过程。
然后转换主题,你可以:
- 转到团队库
- 在那里选择主颜色库(例如,Light)
- 单击转换库。
- 选择新的颜色库(例如,Dark)
这仅在两个库中的颜色名称 100% 相同时才有效。
在这种情况下,Figma
会将 Light
库中的每种颜色替换为 Dark
库中对应的颜色。对于整个文件。这意味着它将影响文件中的所有布局
这种方法非常方便,其优势包括:
- 一切都是通过
Figma
的内置功能完成的。 Figma
自动替换所有元素的所有内容。- 允许避免手动替换时可能发生的错误(如果两个库都已正确准备)。
但是,也存在缺点:
- 不能改变单独选择的屏幕的颜色,因为替换是针对整个文件完成的
为了解决这个问题,我们可以使用一个小技巧。实际上,当转换库时,Figma
不会替换颜色库。它将文件中使用的每种颜色替换为新库中的相应颜色(根据它们的名称),同时保持先前的库连接。因此,如果仍然需要在一个文件中显示两种模式的设计,可以在转换颜色库之前将所有设计复制到剪贴板,然后转换之后粘贴它们。
但是,同样这也并不总是很方便:如果文件中有多个页面,则很难执行此技巧 或者,如果之后需要添加新的设计。
插件
Figma
的一个巨大优势是几乎所有缺失的功能都可以以插件的形式实现。 几乎是因为出于安全原因,Figma
有许多限制,不允许插件绝对做所有事情。但是,即使有这些限制,插件也可以做很多事情。
目前,我们可以使用许多不同的插件来管理 Figma
中的颜色。唯一的问题是需要什么样的功能以及插件的设置应该有多灵活
大部分时间我们都会在设计系统中工作并使用外部库。能够调整插件的参数以匹配特定库的颜色结构对我们来说也很重要。考虑到这些要求,这里只能强调几个解决方案。
Appearance 插件
Appearance
插件允许切换 Figma
中任何选定元素的颜色模式。因此,我们可以选择一个屏幕或其中的一部分,并将其颜色模式从Light更改为Dark,然后再返回。这个插件是由 Alex Dyakov
制作的,他写了一篇文章解释了它是如何工作的,甚至给出了一些实现的技术细节。
该插件适用于外部库(如果事先准备好)并且易于使用。
在测试过程中,我发现只有一个小缺点——该插件不适用于同时使用多种颜色的文本
这更像是一个错误。该插件非常适合日常工作。
做为替代方案,还有Dark Mode Switcher
插件。它的工作原理与外观相同,但由于缺少设置,灵活性较差。
Figma Tokens 插件
Figma Tokens
插件提供了另一种方法。它允许使用标记设置颜色并将标记组合成集合。因此,可以为选择、页面或整个文档切换令牌集。
使用颜色只是插件可以做的一小部分。
自动 dark 主题生成器
有许多解决方案提供了另一种方法——自动为Dark mode生成颜色。这意味着不是在预定义的调色板之间切换,而是基于浅色创建一个深色主题。一个很好的例子是 Ruslan Humenny
的 Dark Mode Magic
插件。
如果想从头开始为Dark mode创建调色板,并且没有机会、时间或只是想自己选择颜色,该插件非常棒。
总结
在本文中,仅列出了一些允许在 Figma
中为你的设计创建Dark theme主题的解决方案。希望你在这里找到了一些有用的技巧,并可以付诸实践。