实现一个简单的插件

在前面两节我们一起进入代码的世界，体验到了用代码做设计的神奇之处。在这一节，我将通过一个具体的案例，向你介绍如何使用代码编写一个插件，来解决亮暗色模式的切换。

先看一下我们今天的最终成果。

插件是怎样工作的？

在此之前，我先介绍一下 Figma 插件的工作方式。Figma 的插件分为两部分——插件界面和后台任务，他们的分工如下：

• 插件界面：展示界面元素，用户可以通过它与插件交互，比如输入数字 5，再点击按钮，插件就会创建一个五边形。它就像一个小网页，我们还可以在里面进行网络请求、展示媒体等。
• 后台任务：后台任务是看不见的部分，它没有可交互界面，但是它可以访问 Figma 画布，从而对我们的设计进行操作，比如在画布中插入一张图片，更改元素的颜色等。这和我们前两节学到的在控制台和 Scripter 插件中通过 figma 对象对设计稿进行各种统计和操作是一样的。

插件界面可以显示界面发送网络请求但是无法访问 Figma 画布，后台任务代码可以访问画布但是无法显示界面，所以它们需要互相合作。它们通过 postMessage 来发送和接收消息，互相通信，比如在我们今天的例子中，用户在插件界面中点了按钮，插件界面就会向后台发送消息，后台接收到消息，就逐个切换元素的颜色为暗色模式。

它们就像两兄弟，互相合作，来完成各种任务。但是，插件界面并不是必须的，有很多插件我们可以通过 Cmd P 输入快捷指令唤起，这种插件只需要后台任务代码就行了……