figma 安装插件_figma插件教程2 6

figma 安装插件

Before we can really go any further we should understand how Figma plugins actually run. Understanding the basic architecture will make the code we are about to write make more sense.

在我们进一步深入之前，我们应该了解Figma插件如何实际运行。 了解基本体系结构将使我们将要编写的代码更有意义。

Much of this is summarised from Figma’s own documentation, which is tremendous, so if you prefer you can read that here.

很多内容都是从Figma自己的文档中总结出来的，该文档非常有用，因此，如果您愿意，可以 在此处 阅读 。

Also feel free to skip to the next part if you don’t care!

如果您不在乎， 也可以随时 跳到下一部分 ！

Sand沙盒 (⏳ The Sandbox)

A plugin runs in a sandbox inside of Figma, isolated from the rest of the application and this has some interesting consequences:

一个插件在Figma内部的沙箱中运行，与应用程序的其余部分隔离开来，这会产生一些有趣的结果：

• Access to the Figma document is exposed through a figma instance in this sandbox. So every time we want to use or manipulate something from the document we call a method or dig into the figma instance. For example, getting the current selection looks something like this:

  通过该沙箱中的figma实例公开了对Figma文档的访问。 因此，每当我们要使用或操作文档中的某些内容时，我们都会调用一个方法或深入到figma实例。 例如，获取当前选择看起来像这样：

const selection = figma.currentPage.selection[0]

• Because the plugin code runs in a sandbox and not in the browser itself (remember even the desktop app is just a browser underneath) we have access to all the latest javascript goodness. It supports ES6 libraries without us having to compile them. No babel 🎉

  因为插件代码在沙箱中运行，而不是在浏览器本身中运行(请记住，甚至桌面应用程序只是其下方的浏览器)，所以我们可以访问所有最新的javascript优点。 它支持ES6库，而无需我们对其进行编译。 没有通天塔🎉

• For the same reason, we don’t have access to the browser APIs. This is tricky because we can’t use things like fetch() to get data in the sandbox. The solution to this problem is what defines the architecture of a plugin. Anytime we need access to the browser APIs we have to launch an iframe and send messages to it.

  出于同样的原因，我们无权访问浏览器API。 这很棘手，因为我们不能使用fetch()类的东西来获取沙箱中的数据。 解决此问题的方法是定义插件的体系结构。 每当我们需要访问浏览器API时，我们都必须启动iframe并向其发送消息。

  An

  一个

  iframe is essentially a mini HTML document inside another HTML document but we can think of it like our own little browser window. We can send messages between our sandbox and our iframe to pass data between them.

  iframe本质上是另一个HTML文档中的一个微型HTML文档，但我们可以将其视为我们自己的浏览器小窗口。 我们可以在沙箱和iframe之间发送消息以在它们之间传递数据。

https://www.figma.com/plugin-docs/how-plugins-run/ https://www.figma.com/plugin-docs/how-plugins-run/中找到

The iframe can be visible, for plugins that have a user interface, or invisible. This means you can still have access to the browser APIs even if you don’t want the user to interact with anything.

对于具有用户界面的插件，iframe可以是可见的，也可以是不可见的。 这意味着即使您不希望用户与任何东西交互，您仍然可以访问浏览器API。

Fig Figma文件 (📄 The Figma Document)

The Figma document is represented as a node tree. What does that mean? Well a tree is a type of data structure that looks like this:

Figma文档表示为节点树。 那是什么意思？ 好吧，树是一种数据结构，看起来像这样：

Similar to what you find in genealogy with family trees.

类似于您在家谱中发现的家谱。

There is a root node that contains children nodes. Those children can then in turn have their own children and so on. In Figma, the root node is the document and every layer is a child. That means the above tree would look like this in the layers panel:

有一个root包含子节点的节点。 这些孩子然后可以拥有自己的孩子，依此类推。 在FIGMA中， root节点是document和每一个层是儿童。 这意味着上面的树在“图层”面板中看起来像这样：

Added the “root” group here for demonstration purposes

在此处添加了“ root”组以进行演示

Notice how things we think of as just being empty containers, like Groups and Frames, are nodes themselves.

请注意，我们认为像Groups和Frames这样的空容器是节点本身。

🕸节点类型 (🕸 Node Types)

Each node in this tree has a type property ie: RECTANGLE, TEXT, GROUP. These types map pretty well to how we think about layers when using Figma. A node’s type dictates what properties it can have. There are properties that are common to all types but there are some properties that are unique to a certain type.

该树中的每个节点都有一个type属性，即： RECTANGLE ， TEXT ， GROUP 。 这些类型很好地映射了我们使用Figma时如何考虑图层。 节点的type决定了它可以具有的属性。 存在所有类型共有的属性，但是某些类型具有某些唯一的属性。

For example: a FRAME type can have a property called .constraints but a node of type RECTANGLE can’t. It’s important to understand this because we need to make our plugins work even if the user selects a node type that we didn’t expect.

例如： FRAME类型可以具有称为.constraints的属性，而RECTANGLE类型的节点则不能。 理解这一点很重要，因为即使用户选择了我们不期望的节点类型，我们也需要使我们的插件正常工作。

We can see a list of all the node types here as well as comprehensive documentation on what properties each type can have.

我们可以在此处查看所有节点类型的列表，以及有关每种类型可以具有的属性的综合文档。

🕵️‍♀️找到正确的节点 (🕵️‍♀️ Finding the Right Node)

Most plugins can be divided into two behaviours:

大多数插件可以分为两种行为：

1. Alters currently selected nodes.
   更改当前选定的节点。
2. Goes through all the nodes and alters ones that meet some criteria.
   遍历所有节点并更改满足某些条件的节点。

The first case is fairly straight forward. The figma instance has a currentPage property (each page has it’s own selection) and the currentPage has a selection property ie: figma.currentPage.selection. This returns an array of the currently selected elements.

第一种情况很简单。 figma实例具有currentPage属性(每个页面都有其自己的选择)，而currentPage具有selection属性，即： figma.currentPage.selection 。 这将返回当前选定元素的数组。

The second case can be trickier because we need to loop through the document structure to find nodes that match our criteria. Luckily there are some helpful methods for finding nodes:

第二种情况可能比较棘手，因为我们需要遍历文档结构以查找符合我们条件的节点。 幸运的是，有一些有用的方法可以找到节点：

• findOne(): Finds the first node that passes the test given as an argument.:

  findOne() ：查找通过作为参数给出的测试的第一个节点：

• findAll(): Finds all the nodes that pass the test given as an argument.

  findAll() ：查找通过作为参数给出的测试的所有节点。

// returns the first text element
const node = figma.root.findOne(node => node.type === "TEXT")// returns an array of text elements
const node = figma.root.

Note: it’s not always wise to check the entire document as it could be huge.

注意：检查整个文档并不总是明智的，因为它可能很大。

In both cases we need to make sure we prepare for the possibility that there will be no nodes to work with or more nodes than we anticipated.

在这两种情况下，我们都需要确保为没有可能使用的节点或节点数量超出我们预期的情况做好准备。

📝编辑节点 (📝 Editing a Node)

Okay, so now we have the nodes we want to edit, how do we make the changes? Well for the most part it’s pretty simple. We just assign a new value to the property:

好的，现在我们有了要编辑的节点，我们如何进行更改？ 在大多数情况下，这很简单。 我们只是给属性分配一个新值：

const node = figma.root.findOne(node => node.type === "TEXT")node.textAlignHorizontal = "RIGHT"

Boom, done 🎉.

oom，done。

This works for simple properties but a lot of properties are objects or arrays. For instance the .fills property contains an array of the fills on a particular node. When we change these we need to make a copy of the original array, alter it and then assign it.

这适用于简单的属性， 但是许多属性是对象或数组。 例如， .fills属性包含特定节点上的填充数组。 当我们更改它们时，我们需要复制原始数组，对其进行更改，然后进行分配。

🆘 Bad:

🆘 不好：

const node = figma.root.findOne(node => node.type === "TEXT")// this assumes we know fills has at least one item
node.fills[0].opacity = 0.5

✅ Good:

✅ 好：

const node = figma.root.findOne(node => node.type === "TEXT")// this assumes we know fills has at least one itemconst fills = node.fills
fills.[0].opacity = 0.5node.fills = fills

There are some interesting technical reasons why it works this way, which you can read about here, but for our purposes we don’t need to know. We only need to remember to always make a copy of the array/object and alter that copy.

之所以以这种方式工作，有一些有趣的技术原因，您可以在这里阅读有关内容，但是出于我们的目的，我们不需要知道。 我们只需要记住始终复制数组/对象并更改该副本。

Enough waffling, let’s write some plugin code 🎉

摇摇晃晃，让我们写一些插件代码🎉

翻译自: https://blog.prototypr.io/figma-plugin-tutorial-2-6-2efb7944aa2

figma 安装插件