One of the first plug-ins I got excited about when Figma released their plug-ins was Themer. Especially since it promised to be the solution to the problem I was having at that time. For those who don’t know, Themer enables you to create and swap themes from your published styles in your Figma team library. You can use the plug-in for color, text, and effect styles.

当Figma释放他们的插件时，我感到非常兴奋的第一个插件是Themer 。 特别是因为它有望解决我当时遇到的问题。 对于那些不知道的人，Themer使您可以从Figma团队库中发布的样式创建和交换主题。 您可以将插件用于颜色，文本和效果样式。

After trying out the plug-in when it was released, it wasn’t perfect. In the first release, it was a bit buggy, and not all the styles were applied correctly, ending up with a mix of multiple styles.

试用该插件发布后，它并不完美。 在第一个发行版中，它存在一些问题，并且并非所有样式都正确应用，最终混合了多种样式。

But after the release of version 2.0, I was excited to give it another try.

但是在2.0版发布后，我很高兴再次尝试。

小心 (Heads up)

This article won’t explain how to set up the plug-in with your Figma libraries because there is already quite a clear explanation on the Themer page. This article will focus mainly on problems I’ve encountered during my previous project, the journey towards using Themer, and its current implementation. If you have any specific questions about the setup, feel free to leave a comment, and I’ll be happy to answer them.

本文不会解释如何使用Figma库设置该插件，因为在Themer页面上已经有相当清楚的解释。 本文将主要关注我在上一个项目中遇到的问题，使用Themer的过程及其当前的实现。 如果您对设置有任何具体问题，请随时发表评论，我们很乐意为您解答。

问题以及我们为什么需要这个 (The problem and why we needed this)

In my previous project at GrandVision, I was part of a team that designed for a global e-commerce platform used by multiple optical retail brands. We started designing in one brand, and over time, we had to switch to one single white- label library.

在我之前的GrandVision项目中，我是一个团队的一部分，该团队是为多个眼镜零售品牌使用的全球电子商务平台设计的。 我们开始以一个品牌设计，随着时间的流逝，我们不得不切换到一个单一的白标签库。

Having one white label library and maintaining multiple brand design files is tiring and prone to inconsistencies. We wanted to be able to directly test and mock designs in various brand styles without the hassle of doing all the extra and unnecessary work.

拥有一个白色标签库并维护多个品牌设计文件很累，而且容易出现不一致的情况。 我们希望能够直接测试和模拟各种品牌风格的设计，而不必进行所有多余和不必要的工作。

我们的第一次尝试 (Our first attempt)

Before the release of Figma plug-ins, we tried to solve this problem inside Figma by nesting libraries. The idea of that workflow was:

在发布Figma插件之前，我们尝试通过嵌套库解决Figma内部的问题。 该工作流程的想法是：

1. Create a new file in Figma for brand X and pull the already existing white-label components from its library

   在Figma中为品牌X创建一个新文件，并从其库中提取现有的白标组件

2. Replace the white label styling with brand X styles

   用品牌X样式替换白色标签样式

3. Create new components from the instances
   从实例创建新组件
4. Duplicate and re-use this file for other brands
   复制此文件并将其用于其他品牌

This workflow would result in having multiple libraries with instances from the existing white-label library. If there would be changes to components of the main library, the instances would automatically update in the brand libraries. Lay-out changes would stay in sync, and the styles would stay in place since Figma remembers overrides.

此工作流程将导致拥有多个带有来自现有白标库的实例的库。 如果主库的组件发生更改，则实例将在品牌库中自动更新。 布局更改将保持同步，而样式将保留在原处，因为Figma会记住替代项。

This whole setup took quite some time to set up, and we realized that it was not fixing the problem that we were trying to solve.

整个安装过程花费了相当长的时间，我们意识到这并不能解决我们要解决的问题。

In the proof of concept, we used Unicode characters to distinguish components from each other to avoid confusion — ???? for brands and Ⓜ the master file — . This whole workflow took quite some time to set up, and we realized that it was not fixing the problem that we were trying to solve. Maintenance was going to be very difficult and prone to errors in the long run.

在概念验证中，我们使用Unicode字符将组件彼此区分开，以避免混淆— —表示品牌， Ⓜ表示主文件。 整个工作流程的建立花费了相当多的时间，我们意识到这并不能解决我们要解决的问题。 从长远来看，维护将非常困难并且容易出错。

然后有Themer (Then there was Themer)

Themer sounded like the solution to the problem described above. Before installing, we had to make some small changes to the existing white-label library. To simplify the theming process, we tried to reduce the number of variables per brand. Feedback colors (validation, error, warning) and text colors are, for example, coming from the white label library and stay as is per brand.

听起来像是上述问题的解决方案。 在安装之前，我们必须对现有的白色标签库进行一些小的更改。 为了简化主题制作过程，我们尝试减少每个品牌的变量数量。 反馈颜色(验证，错误，警告)和文本颜色例如来自白色标签库，并保持每个品牌不变。

For typography, we have a similar approach where the body font is consistent throughout the brands, and only headings have different fonts. Each brand also has two separate image styles for the brand logo.

对于排版，我们采用类似的方法，其中各个品牌的主体字体都保持一致，并且只有标题具有不同的字体。 每个品牌还为品牌徽标有两种不同的图像样式。

Inside Figma, we created a separate project folder with one file per brand. To summarize, every file contains the following styles:

在Figma内部，我们创建了一个单独的项目文件夹，每个品牌一个文件。 总而言之，每个文件都包含以下样式：

• — color — primary
  —颜色—主要
• — color — secondary
  —颜色—次要
• headings
  标题
• default + alternative logo
  默认+替代徽标

The files mentioned above are used to manage the brand styles and are published inside Figma as a shared library with the same naming as the white-label library. Using the same names is necessary for Themer to recognize the styles. After installing Themer, the only thing we had to do was create a new preset from all the brand libraries inside the plug-in itself.

上面提到的文件用于管理品牌样式，并在Figma内部作为共享库发布，其命名与白标库相同。 为了使Themer识别样式，必须使用相同的名称。 安装Themer后，我们要做的唯一一件事情就是从插件本身内部的所有品牌库中创建一个新的预设。

As a result, the plug-in is now used inside the white label files in Figma to switch between all the created brand presets. We tested different scenario’s on changing styles within the libraries, and everything stays in sync. Adding a new brand in the system is now a matter of minutes, and it allows us to rapidly test new brands for future additions to the system.

结果，该插件现在在Figma中的白色标签文件中使用，可以在所有创建的品牌预设之间切换。 我们测试了在库中更改样式的不同场景，并且所有内容保持同步。 现在，在系统中添加新品牌仅需几分钟，这使我们能够快速测试新品牌，以备将来添加到系统中。

当前系统中我们现在所缺少的 (What we are missing right now inside the current system)

• Themer does not support multiple text styles inside a text area, but looking at the plug-in description, this is on the roadmap for a future release!
  Themer在一个文本区域内不支持多种文本样式，但是查看插件说明，这是将来版本的发展方向！
• Another thing I stumbled upon is mainly an issue from Figma, and that’s the ability to have rounded corners as shared styles. In our case, brands on the platform have rounded or pill-shaped buttons. So when we switch between libraries, the buttons will change to their brand color, but the shape will stay as-is
  我偶然发现的另一件事主要是来自Figma的一个问题，那就是能够将圆角作为共享样式。 在我们的案例中，平台上的品牌具有圆形或药丸形的按钮。 因此，当我们在库之间切换时，按钮将更改为其品牌颜色，但形状将保持原样
• Shared installation. The user who has installed the plug-in needs to share the API key and BIN URL from Json.bin to be able to get access to the presets.
  共享安装。 安装该插件的用户需要共享来自Json.bin的API**和BIN URL，才能访问这些预设。

• The ability to nest color styles. It’s a common practice in front-end development but currently not supported in Figma. Something I’ve been missing for a while now. Nesting color variables would allow designers to create more flexible color systems similar to code.

  嵌套颜色样式的能力。 这是前端开发中的常见做法，但目前在Figma中不受支持。 我已经失踪了一段时间了。 嵌套颜色变量将使设计人员可以创建类似于代码的更灵活的颜色系统。

下一步 (Next steps)

To enrich the libraries, here are some other ideas :

为了丰富图书馆，这里有一些其他想法：

• Banners and product-related images as image styles for brand-specific content for more realistic content representation
  标语和与产品相关的图像作为品牌特定内容的图像样式，以更真实地表示内容

• Adding on top, Google Sheets Sync with textual product data and text labels to test different kinds of data per brand/language

  最重要的是， Google表格与文本产品数据和文本标签同步，以测试每种品牌/语言的不同类型的数据

So you are currently in a design project dealing with multiple themes or you want to explore dark/light theming alternatives? Themer can help you quickly validate, maintain, and explore these options without having to deal with multiple design files.

因此，您当前正在处理多个主题的设计项目中，还是想探索暗/亮主题替代方案？ Themer可以帮助您快速验证，维护和探索这些选项，而无需处理多个设计文件。

Thank you for reading, and if you have any suggestions or ideas, feel free to share them in the comments below.

感谢您的阅读，如果您有任何建议或想法，请随时在下面的评论中分享。

This article was originally published here.

本文最初发表在这里。