Since Figma released the Figma Community (Beta), I’ve been working on Figma plugins in my free time while I study the code. With the help of an engineer friend of mine, I’ve developed four small plugins so far. As I continue to update these, I’m also planning new plugins.

自從Figma發布Figma社區(測試版)以來，我在業余時間研究代碼時一直在研究Figma插件。 到目前為止，在我的一個工程師朋友的幫助下，我已經開發了四個小插件。 在繼續更新這些內容的同時，我也在計劃新的插件。

In this article, I will introduce some practical tips and resources for beginners of plugin development, based on my experiences with Figma plugins.

在本文中，我將根據我對Figma插件的經驗，為插件開發初學者介紹一些實用技巧和資源。

Let’s take a look!👀

讓我們來看看！👀

我的插件簡介 (Introduction to my plugins)

Figma Exporter lets you select the naming convention you want for your exported files. The available conventions are kebab-case, snake_case, and camelCase.

Figma Exporter使您可以為導出的文件選擇所需的命名約定。 可用約定為kebab-case，snake_case和camelCase。

Aspect Ratio is a Figma-optimized aspect ratio calculator.

長寬比是經過Figma優化的長寬比計算器。

• Inspect — When you select any layer, the aspect ratio value of the layer will be displayed in the inspector area.
  檢查-選擇任何圖層時，該圖層的縱橫比值將顯示在檢查器區域中。
• Calculate — Enter the value you want to calculate in the middle input field, and the value will be calculated.
  計算—在中間輸入字段中輸入要計算的值，然后將計算該值。
• Resize — Click the Resize button to apply the calculated value to the selected layer.
  調整大小—單擊“調整大小”按鈕，將計算出的值應用于選定的圖層。

Golden Spiral is a plugin that calculates a sequence of golden ratios and creates layers. It was developed for use in logo design.

Golden Spiral是一個插件，可計算一系列黃金比例并創建圖層。 它被開發用于徽標設計。

Figma Finder is a launcher utility plugin. It gives you quick access to all your essential things.

Figma Finder是啟動器實用程序插件。 它使您可以快速訪問所有必需的東西。

從制作到發布的實用技巧和資源 (Practical tips and resources from crafting to publishing)

1.使用Figma用戶熟悉的設計系統 (1. Use design systems that Figma users are familiar with)

In the design phase, I use Figma’s UI2 as a reference point for my design. You can get a lot of inspiration from Figma’s design system.

在設計階段，我將Figma的UI2用作設計的參考點。 您可以從Figma的設計系統中獲得很多啟發。

You can also download the Inter font that Figma uses for free.

您也可以免費下載Figma使用的Inter字體。

In the development phase, I use Thomas-lowry/ Figma Plugin DS to implement the UI. Other design system packages for frameworks such as React and Vue are also available.

在開發階段，我使用Thomas-lowry / Figma插件DS來實現UI。 也可以使用其他框架設計系統軟件包，例如React和Vue。

• Vanilla / JavaScript: figma-plugin-ds

  香草/ JavaScript： figma-plugin-ds

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

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

• Vue: figma-vue-boilerplate

  Vue： figma-vue-boilerplate

2.提供訪問插件的簡便方法 (2. Provide easy ways to access plugins)

There are several ways to launch plugins.

有幾種啟動插件的方法。

• Click on the Plugin in the Menu to launch it from your list.
  單擊菜單中的插件以從列表中啟動它。

• Press Command+/and quickly type in the plugin to launch it faster.

  按Command + /并快速鍵入插件以更快地啟動它。

• Press Command+Option+P to relaunch the previous plugin

  按Command + Option + P重新啟動以前的插件

However, when you have a lot of plugins, it can be difficult to find them, or you may forget the plugin name. This is where setRelunchData is useful.

但是，當您有很多插件時，可能很難找到它們，或者您可能會忘記插件名稱。 這是setRelunchData有用的地方。

setRelunchData (setRelunchData)

By adding setRelunchData to manifest.jsontthe commands of the plugin will be displayed in the Plugin section of the Properties panel.Users can quickly launch the plugin from here.

通過將setRelunchData添加到manifest.jsont中，該插件的命令將顯示在“屬性”面板的“插件”部分中。用戶可以從此處快速啟動該插件。

// manifest.json
"relaunchButtons": [{"command": "open", "name": "Open Figma Finder", "multipleSelection": true}]

If you want practical tips on how to improve the UX of FigmaPlugin, this article is a must-read.

如果您想獲得有關如何改善FigmaPlugin UX的實用技巧，則必須閱讀本文。

3.制作清晰誘人的插件頁面 (3. Make a clear and attractive plugin page)

• Icon (128x128)：A look in harmony with Figma
  Icon(128x128)：與Figma融為一體
• Cover Art (1920x960) ：Displays the UI that shows how the plugin works
  封面(1920x960)：顯示顯示插件工作方式的UI
• Name：A short, unique, and clear name for your plugin.
  名稱：您的插件的簡短，唯一且清晰的名稱。
• Tags (up to 10 tags): Use tags that are easily findable by users.
  標簽(最多10個標簽)：使用易于用戶找到的標簽。
• Support contact：Github, Twitter, etc.
  支持聯系人：Github，Twitter等

Here’s a recommended template for creating a plugin page.

這是用于創建插件頁面的推薦模板。

Figma plugin promotional template ― A small template for building out and previewing assets for publishing and promoting your Figma Plugin.

Figma插件促銷模板 ―一個用于構建和預覽資產以發布和推廣Figma插件的小模板。

Recently, Figma Community’s UI was improved greatly. The most popular categories are now organized. Including this tag will ensure that your plugin is featured.

最近，Figma社區的用戶界面得到了很大的改進。 現在組織了最受歡迎的類別。 包含此標記將確保您的插件具有特色。

4.關于從提交到發表的時間 (4. About Time from Submission to Publication)

Based on my observations and experience with plugin submissions, it seems that new plugins are released mainly on Fridays.

根據我的觀察和對插件提交的經驗，似乎新插件主要在星期五發布。

In the past, it has taken about ten days to go public, but that was when it coincides with Figma’s new feature release.However, when I submitted a request on a Friday morning, it was released within 2–3 hours of submission.

過去，公開發布大約花了十天的時間，而那時恰逢Figma的新功能發布。但是，當我在星期五早上提交請求時，它在提交后的2-3小時內發布。

Figma Community continues to be updated. Recently, you can create a FigmaProfile, follow creators, and search for new creators. I’m sure more and more creators will be coming to Figma in the future.

Figma社區繼續更新。 最近，您可以創建FigmaProfile，關注創建者，并搜索新創建者。 我相信將來會有越來越多的創作者來參加Figma。

Stay tuned for more articles on new plugin development and updates.

請繼續關注有關新插件開發和更新的更多文章。

Thank you for reading!

感謝您的閱讀！

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

如果您喜歡這篇文章，請在 Twitter ， LinkedIn ， Medium 或 Figma 上關注我 。