figma 安装插件_figma插件的辅助

figma 安装插件

Plugins are a way to customize, extend, and automate Figma.

插件是自定义，扩展和自动化Figma的一种方式。

When making a plugin, you’re designing something for yourself, which can be quite fun and a nice change of pace. There’s also a certain satisfaction in definitively solving a workflow that used to take hours, or in hyper-optimizing a particular interaction or piece of UI in your plugin.

制作插件时 ，您要为自己设计一些东西，这可能很有趣，而且步伐也很好。 最终解决以前需要花费数小时的工作流程，或者对插件中的特定交互或用户界面进行超优化，这也带来了一定的满足感。

This article is my attempt to codify some heuristics for crafting plugins for Figma, referring where relevant to examples from the plugins that I’ve made. I love design tools and UI engineering, and aspire to bring a level of craft and precision to this work. The hope is that this article would be interesting to plugin creators and users alike.

本文是我尝试整理一些为Figma制作插件的启发方法，并在与我制作的插件示例相关的地方进行引用。 我喜欢设计工具和UI工程，并渴望为这项工作带来精湛的Craft.io和精确度。 希望这篇文章对插件创建者和用户一样有趣。

Here we go!

开始了！

1 /使用Figma用户熟悉的UX模式和UI组件。 (1 / Use UX patterns and UI components that are familiar to Figma users.)

Draw inspiration from Figma’s native features and commands. Using your plugin should feel as similar as possible to using Figma itself.

从Figma的本机功能和命令中汲取灵感。 使用您的插件应该与使用Figma本身尽可能相似。

Form controls are the basic building blocks of your plugin UI.

表单控件是插件UI的基本构建块。

Use colors, text styles, and UI components from Figma’s design system. Consider building your plugin with an existing component library that replicates both the look and behavior of Figma’s UI design. For example:

使用Figma设计系统中的颜色，文本样式和UI组件。 考虑使用现有组件库构建您的插件，该组件库可复制Figma UI设计的外观和行为。 例如：

• React: react-figma-plugin-ds, figma-styled-components

  React： react-figma-plugin-ds ，图像figma-styled-components

• Preact: @create-figma-plugin/ui

  Preact： @create-figma-plugin/ui

• Svelte: figma-plugin-ds-svelte

  figma-plugin-ds-svelte ： figma-plugin-ds-svelte

• Vue: figma-vue-boilerplate

  Vue： figma-vue-boilerplate

• Vanilla JavaScript: figma-plugin-ds

  香草JavaScript： figma-plugin-ds

2 /减少插件完成其工作所需的用户操作数。 (2 / Reduce the number of user actions that are required before your plugin can do its work.)

The most efficient plugin possible is a plugin that gets to work immediately when run, without requiring additional user action.

最有效的插件是可以在运行时立即使用而无需其他用户操作的插件。

A UI is needed only if your plugin has settings that must be configured by the user. If so, choose appropriate form controls that permit efficient configuration of your plugin. For example:

仅当您的插件具有必须由用户配置的设置时，才需要UI。 如果是这样，请选择适当的表单控件以允许高效配置插件。 例如：

• If there are just a handful of selectable options, use a Checkbox, a Segmented Control, or Radio Buttons.
  如果只有少数几个可选选项，请使用复选框，分段控件或单选按钮。
• If there are many selectable options, use an Autocomplete or a Dropdown Menu.
  如果有许多可选选项，请使用“自动完成”或“下拉菜单”。
• A long list of options can be made more palatable by surfacing options that tend to be selected higher up in the list. Alternatively, group related options, organize options into a hierarchy, or allow options to be filtered via search.
  通过显示往往会在列表中较高位置选择的选项，可以使一长串选项更加可口。 或者，将相关选项分组，将选项组织到层次结构中，或允许通过搜索过滤选项。
• For a numeric option, use a Numeric Textbox, or a Range Slider.
  对于数字选项，请使用“数字文本框”或“范围滑块”。

In 在“ Format Currency格式货币”中 , changing the ，更改 Format setting requires only one click because a 格式设置仅需单击一下，因为使用了 Segmented Control is used. (By comparison, a minimum of two clicks would have been required with a 分段控件 。 (通过比较， Dropdown Menu.) 下拉菜单至少需要两次单击。)

In 在“ Replace with Component用组件替换”中 , the user can type into a search box to swiftly narrow down a potentially long list of components. ，用户可以在搜索框中键入内容，以Swift缩小可能很长的组件列表的范围。

The first form control should be in focus when the UI is initially displayed, so that the user can make changes immediately.

最初显示UI时，第一个窗体控件应处于焦点，以便用户可以立即进行更改。

Move Layers移动图层”中

A good rule of thumb: Options that tend to be selected should be already selected by default, or selectable with a bare minimum of user actions — ideally, a single click.

一条很好的经验法则：倾向于选择的选项应在默认情况下已经被选择，或者只需很少的用户操作就可以选择—理想的情况是单击。

3 /解决单个具体问题。 (3 / Solve a single, specific problem.)

Your plugin should do just one thing (or, a few closely-related things) well.

您的插件应该只做一件事(或一些紧密相关的事情)。

Consider if the functionality of your plugin can be “decomposed” and built as sub-commands that can be run independently.

考虑一下插件的功能是否可以“分解”并构建为可以独立运行的子命令。

Clean Document清洁文档”中

4 /允许用户使用键盘控制您的插件UI。 (4 / Allow the user to control your plugin UI with the keyboard.)

All form controls should have an obvious focus state, and be reachable by pressing the Tab or Shift+Tab keys.

所有窗体控件应具有明显的焦点状态，并且可以通过按Tab或Shift + Tab键访问。

The tab order should follow the visual flow of the form controls in the UI, going from left-to-right and top-to-bottom. In general, refrain from modifying the natural tab order of the form controls.

选项卡顺序应遵循UI中表单控件的视觉流程，从左到右和从上到下。 通常，请勿修改表单控件的自然制表符顺序。

The tab order should “wrap around”. Pressing Tab on the last form control should move focus to the first form control. (Correspondingly, pressing Shift+Tab on the first form control should move focus to the last form control.)

制表符顺序应“环绕”。 在最后一个窗体控件上按Tab应将焦点移到第一个窗体控件。 (相应地，在第一个窗体控件上按Shift + Tab可以将焦点移到最后一个窗体控件。)

Allow the form control that is in focus to be controlled using the keyboard. For example:

允许使用键盘控制焦点对准的表单控件。 例如：

• Checkbox: Pressing the Enter or Space keys should toggle the option.

  复选框：按Enter或Space键可以切换选项。

• Segmented Control, Radio Buttons, Autocomplete, Dropdown Menu: Pressing the ↑ and ↓ keys should change the selected option.

  分段控制，单选按钮，自动完成，下拉菜单：按↑和↓键应更改所选的选项。

• Numeric Textbox: Pressing the ↑ and ↓ keys (or Shift+↑ and Shift+↓) should increment and decrement the value by 1 (or 10).

  数字文本框：按↑和↓键(或Shift + ↑和Shift + ↓ )应将值增加或减少1(或10)。

Pressing Esc should close the plugin UI.

按Esc将关闭插件UI。

Pressing Enter should execute the plugin with the currently configured settings in the plugin UI.

按下Enter应使用插件UI中当前配置的设置执行插件。

5 /定义插件的操作范围。 (5 / Define a scope of operation for your plugin.)

A plugin that operates on layers on the canvas should have a specific scope of operation. For example:

在画布上的图层上运行的插件应具有特定的操作范围。 例如：

• Layers in the user’s selection only vs. all layers on the page vs. all layers on all pages in the document.
  仅用户选择的图层与页面上的所有图层对比文档中所有页面上的所有图层。
• Layers that are directly-selected only vs. all layers within the selection, including nested layers.
  仅直接选择的层与选择中的所有层(包括嵌套层)进行对比。
• Layers at the “top-level” only vs. all layers, including nested layers.
  仅“顶层”层与所有层(包括嵌套层)相对。
• Layers of a specific type only vs. layers of any type.
  仅特定类型的层与任何类型的层。
• Layers that have the same parent layer vs. all layers, including layers with different parent layers.
  具有相同父层的层与所有层(包括具有不同父层的层)的层。

A reasonable approach: Default to operating on layers in the user’s selection, but if the selection is empty, operate on all layers on the current page.

合理的方法：默认情况下，对用户所选内容中的图层进行操作，但如果所选内容为空，则对当前页面上的所有图层进行操作。

Clean Layers operates on layers in the user’s selection or all layers on the page if the selection is empty. The active scope of operation is also stated in the plugin UI.

如果选择为空，则“ 清洁层” 将对用户选择的层或页面上所有层的层进行操作。 有效的操作范围也在插件用户界面中说明。

Prepare for the possibility that one or more layers (whether in the user’s selection or on the page) would be outside your plugin’s scope of operation. This can be handled in one of two ways:

准备好一层或多层(无论是在用户的选择中还是在页面中)超出插件的操作范围的可能性。 可以通过以下两种方式之一来处理：

1. Treat this as an error. State the error in a toast notification.
   将此视为错误。 在敬酒通知中说明错误。
2. Silently ignore the irrelevant layers, and only operate on the layers that are within the plugin’s scope.
   静默忽略不相关的层，仅对插件范围内的层进行操作。

6 /保留用户以前的输入。 (6 / Retain the user’s previous inputs.)

Pre-populate the form controls in your plugin UI with the user’s previous inputs. This is important in plugins that tend to be run repeatedly.

使用用户先前的输入来预填充插件UI中的表单控件。 这在易于重复运行的插件中很重要。

In 在 Draw Slice Over Selection“选择上绘制切片”中 , the Padding setting is pre-populated with the user’s previous input. ，“填充”设置已预先填充了用户的先前输入。

Your plugin should also allow the user to clear the data stored, and essentially reset the plugin to a “clean” state.

您的插件还应该允许用户清除存储的数据，并从本质上将插件重置为“干净”状态。

7 /根据用户操作提供系统反馈。 (7 / Provide system feedback in response to user actions.)

Show success and error messages as toast notifications. Prefix these messages with a ✔ and ✘ respectively.

将成功和错误消息显示为吐司通知。 这些消息分别以✔和✘前缀。

Distribute Layers分发层

Include a loading state in your plugin UI if there could be more than a few seconds of wait time — for example, when awaiting an API response or the completion of a particular computationally-expensive operation.

如果等待时间可能超过几秒钟，请在插件UI中包含加载状态-例如，在等待API响应或特定的计算昂贵的操作完成时。

In 在“ Insert Big Image插入大图像 ’s loading state, we see a loading spinner and the number of images that have been processed so far. ”的加载状态下，我们看到一个加载微调器和到目前为止已处理的图像数量。

8 /显示插件运行结果的实时预览。 (8 / Show a live preview of the result of running your plugin.)

A preview could be shown either within the plugin UI itself or directly on the layers on the canvas. This preview should update in real-time as the user adjusts settings in the plugin UI, or when there was a change in the user’s selection.

预览可以在插件UI本身内显示，也可以直接在画布上的图层上显示。 当用户调整插件UI中的设置时，或者当用户的选择发生更改时，此预览应该实时更新。

Format Currency格式货币”中 . In the Before column, the values that will be changed are indicated with a strikethrough. 。 在“之前”列中，将要删除的值以删除线表示。

9 /在标签上优先使用标签。 (9 / Prefer labels over icons.)

Certain concepts could be challenging to represent unambiguously with an icon. For clarity, consider using a label, written in plain language.

某些概念可能很难用图标清晰地表示。 为了清楚起见，请考虑使用以普通语言编写的标签。

Only use an icon if you are confident that users would be familiar with it. A reasonable rule: Only use icons that are already in use in the Figma UI.

仅当您确信用户会熟悉图标时，才使用图标。 合理的规则：仅使用Figma UI中已使用的图标。

In Distribute Layers , the icon that represents the space between layers is the same as the icon used in Figma’s Properties panel.

在“ 分布图层”中 ，代表 图层 之间空间的图标与Figma的“属性”面板中使用的图标相同。

10 /为您的插件选择一个简短，唯一且不言自明的名称。 (10 / Pick a short, unique, and self-explanatory name for your plugin.)

The name of your plugin and all its commands should be no longer than four words, and set in Title Case.

插件的名称及其所有命令的名称不得超过四个字，并在“标题大小写”中进行设置。

Ensure that the name is sufficiently different from the names of Figma’s native features and commands. A unique name allows users to more easily locate and run your plugin via the Figma search box.

确保名称与Figma的本机功能和命令的名称充分不同。 唯一的名称使用户可以通过Figma搜索框更轻松地找到并运行您的插件。

The best thing that you can say is that your plugin does exactly what it says on the tin. Be specific, use familiar words, and avoid made-up words. Consider using an action phrase where the first word is a verb.

您可以说的最好的事情是，您的插件完全可以像锡盒上所说的那样工作。 要具体，使用熟悉的单词，避免虚构单词。 考虑使用第一个单词是动词的动作短语。

Action-oriented plugin names that begin with a verb. 以动词开头的面向操作的插件名称。

Here, once again, are the 10 heuristics:

这里是10种启发式方法：

1. Use UX patterns and UI components that are familiar to Figma users.
   使用Figma用户熟悉的UX模式和UI组件。
2. Reduce the number of user actions that are required before your plugin can do its work.
   减少插件可以工作之前需要执行的用户操作次数。
3. Solve a single, specific problem.
   解决一个具体的问题。
4. Allow the user to control your plugin UI with the keyboard.
   允许用户使用键盘控制您的插件UI。
5. Define a scope of operation for your plugin.
   定义插件的操作范围。
6. Retain the user’s previous inputs.
   保留用户以前的输入。
7. Provide system feedback in response to user actions.
   提供系统反馈以响应用户操作。
8. Show a live preview of the result of running your plugin.
   显示运行插件结果的实时预览。
9. Prefer labels over icons.
   标签优先于图标。
10. Pick a short, unique, and self-explanatory name for your plugin.
    为您的插件选择一个简短，唯一且不言自明的名称。

Just like Figma itself, plugins are built with the same technologies that power the open web. Using HTML, CSS, and JavaScript, coupled with a comprehensive plugin API, you do have remarkably granular control over how exactly you want your plugin to work.

就像Figma本身一样，插件是使用与开放网络相同的技术构建的。 使用HTML，CSS和JavaScript以及完善的插件API ，您确实可以非常精细地控制插件的工作方式。

Good UX is the product of many modest and intentional design decisions. When done well, these details are usually invisible. But when you look a bit closer and start to pay attention, you might think, “Oh, that’s so cool — they actually thought about that!” This is the result that you should be looking for.

好的UX是许多适度而有意的设计决策的产物。 如果做得好，这些细节通常是看不见的。 但是，当您稍微靠近一点并开始注意时，您可能会想到：“哦，太酷了-他们实际上是在考虑这一点！” 这是您应该寻找的结果。

If you enjoyed this article, follow me on Twitter, LinkedIn, or Medium.

如果您喜欢这篇文章，请在 Twitter ， LinkedIn 或 Medium 上关注我 。

翻译自: https://uxdesign.cc/the-ux-of-figma-plugins-f4f896f8cf35

figma 安装插件