Figma一键切换亮色模式和暗色模式
2021-07-26 10:02:05    23    0    0
emengweb

OK,咱们开始吧。以一个PC端的应用界面为例。

在本文中,我们在创建样式的同时,会说明我们为什么会选择特定的颜色。因为这些差别对设计师非常重要。

0.常量样式

重要的是要注意,在为明暗模式选择颜色时,颜色会略有不同。但是,某些中性颜色风格是不变的,在任何一种模式下都不会改变。在Figma Design System中,我们选择了白色和黑色作为固定颜色,无论您使用哪种模式,该颜色都将保持不变。另外,图像占位符的颜色也是恒定的,不会改变。

例如,在上图中,我们展示了该按钮在浅色和深色主题中的外观。图标,文本和计数器具有恒定的颜色。按钮的背景有变化,但其中的内容未更改。

1.可变样式

可变的颜色样式分别适用于亮和暗模式,并且它们都可以进一步细分为两个主要类别-颜色样式和效果样式。出于本文的目的,我们将主要讨论“亮”模式,并且在将这些步骤应用于“暗”模式时也稍作介绍。

1.1颜色样式-灰度样式

灰度颜色是可更改的样式,因为在黑暗模式下应用相同的颜色时时,您将不会获得与在明亮模式下相同的效果。这是因为,在黑暗模式下,背景已经完全为黑色,此时在黑色背景上使用100透明度的灰度颜色时,你的颜色会完全不可见。

将灰度颜色从“浅”模式切换为“暗”模式时,建议您使用白色(#FFFFFF)并在灰度上应用90%,70%,40%和10%的透明度效果,这将在应用于“深色模式”时提供很好的平滑过渡效果。

所以在此设计系统的亮色模式时,我们特别选择以下颜色:

· 100(#1C1C1C)-主要用于标题和粗体文本。

· 200(#585757)-主要用于正文。

· 300(#969696)-用于小文本和填充图标。

· 400(#E8E8E8)-用于较小的细节,例如边框,分隔线和线条颜色。

请注意,我们仅根据自己的喜好将所有四种灰度颜色分别命名为100、200、300和400,它们与任何规则都不相关,您可以根据需要命名灰度颜色。

1.2 系统颜色

系统颜色(也称为基础色)是你项目的主要颜色。我们建议您选择温暖和亲切的颜色,但是在某些情况下,选择调色板时,您可能需要考虑品牌的颜色,这将成为设计系统的一部分。

例如,在此设计系统中,原色是分别应用于这两种模式的蓝色,绿色,橙色和红色。每个原色由两种不同的颜色对比组成,第一个由较浅版本的原色组成,第二个类别由较暗版本的原色组成。如下图:

要创建较浅和较深的基础色,您需要在其之上添加20%,40%和60%的白色和黑色。

例如,在上面的表示按钮点击状态的图片中,我们分别使用了较浅和较深的蓝色来表示按钮的不同状态效果。

1.3 背景

在主界面选择中,有两种原色:层级一和层级二(译为Primary and Secondary),他们的变化依赖于你使用浅色还是深色版本。

例如:在上面的图片中,层级一(Primary)背景色为白色,层级二(Secondary)背景色为浅灰色。

除了这些颜色之外,我们还使用了彩色版本的背景,两种蓝色分别适用于浅色和深色模式。

为了创建这些颜色的阴影,我们将基础颜色的透明度应用于背景。例如,对于浅色版本,我们对白色应用了10%的蓝色透明度,对深色版本,我们对黑色应用了25%的蓝色透明度。

请注意:可以将系统颜色作为背景,但例如按钮,标签等颜色应该从亮色或者暗色模式的“常量样式”中调用。

2. 效果样式

效果样式是应用于设计系统中某些组件的微小更改和效果。它们用来描述某些重要的选项卡,按钮或信息块,并用于使用户专注于页面上的某些元素。

阴影效果可以在亮色模式下轻松被看到,它使元素具有3D外观,使按钮浮在屏幕上。您可以在暗色模式下使用相同的效果,但是由于阴影颜色已经很暗,除非更改背景颜色,否则用户可能很难看到该效果。

内阴影效果与外部投影效果非常相似,但是这次阴影效果在元素内部给出。这使您的块元素看起来更厚。请注意,在暗模式下,由于阴影颜色是暗的,因此可能看不到这种效果。

最后,Figma具有一个非常有用且功能强大的功能,称为“自动布局”。为了使此功能起作用,应该区别对待可以“自适应”的状态栏和“非自适应”的状态栏。

3.总结

让我们总结一下,系统样式的总体结构如上图所示。总体分为非可变样式与可变样式,其中又分为基础颜色样式与效果样式。

OK,激动人心的时刻来了,如果我们已经完整创建了所有上文的效果,那么只需要使用插件简单设置一下,就可以一键在亮色模式和暗色模式之间转换。

如何在亮色模式和暗色模式之间切换

设置好设计系统后,就可以轻松地将组件和模块切换为暗色模式了。为此,您将需要一个名为Appearance的插件,该插件可以在Figma社区找到。一旦安装,您将不需要一次又一次地更改每个块卡及其组件。一旦应用了此插件功能,您将可以通过快速快捷键来应用黑暗模式。

此插件的使用非常简单,来看下面的说明(下面的内容为静电另外添加)

  1. 用[day] 和 [night]来命名你的样式即可。比如“Button[day]”或者“Button[night]”。
  2. 打开你的项目(Frame或者你想改变的内容),然后选择插件菜单中的“Appearance”,选择“Light mode”或“Night mode”即可。

以下是参考样式范例:

Color name [day]

Color name [night]

Style [day] / color-name

Style [night] / color-name

Style / color-name [day]

Style / color-name [night]

要下载此Figma插件和静电做的范例

请在我们公众号“静Design”聊天窗口

回复关键字“暗色模式”获取

作者:Pixsellz 翻译:静电

原文:https://pixsellz.medium.com/create-an-easily-switchable-light-dark-styles-in-figma

上一篇: ipv6服务器(如Scaleway的Stardust)安装宝塔面板,套CF用于ipv4环境访问必备步骤

下一篇: 寻找相似图层的插件

23 人读过
文档导航