figma 安装插件_我制作Figma插件的经验
figma 安裝插件
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發(fā)布Figma社區(qū)(測(cè)試版)以來(lái)，我在業(yè)余時(shí)間研究代碼時(shí)一直在研究Figma插件。 到目前為止，在我的一個(gè)工程師朋友的幫助下，我已經(jīng)開(kāi)發(fā)了四個(gè)小插件。 在繼續(xù)更新這些內(nèi)容的同時(shí)，我也在計(jì)劃新的插件。
In this article, I will introduce some practical tips and resources for beginners of plugin development, based on my experiences with Figma plugins.
在本文中，我將根據(jù)我對(duì)Figma插件的經(jīng)驗(yàn)，為插件開(kāi)發(fā)初學(xué)者介紹一些實(shí)用技巧和資源。
Let’s take a look!👀
讓我們來(lái)看看！👀
我的插件簡(jiǎn)介 (Introduction to my plugins)
https://www.figma.com/community/plugin/818724242728722680/Figma-Exporterhttps://www.figma.com/community/plugin/818724242728722680/Figma-ExporterFigma 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使您可以為導(dǎo)出的文件選擇所需的命名約定。 可用約定為kebab-case，snake_case和camelCase。
https://www.figma.com/community/plugin/843423036468250072/Aspect-Ratio https://www.figma.com/community/plugin/843423036468250072/Aspect-RatioAspect Ratio is a Figma-optimized aspect ratio calculator.
長(zhǎng)寬比是經(jīng)過(guò)Figma優(yōu)化的長(zhǎng)寬比計(jì)算器。
- Inspect — When you select any layer, the aspect ratio value of the layer will be displayed in the inspector area. 檢查-選擇任何圖層時(shí)，該圖層的縱橫比值將顯示在檢查器區(qū)域中。
- Calculate — Enter the value you want to calculate in the middle input field, and the value will be calculated. 計(jì)算—在中間輸入字段中輸入要計(jì)算的值，然后將計(jì)算該值。
- Resize — Click the Resize button to apply the calculated value to the selected layer. 調(diào)整大小—單擊“調(diào)整大小”按鈕，將計(jì)算出的值應(yīng)用于選定的圖層。
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是一個(gè)插件，可計(jì)算一系列黃金比例并創(chuàng)建圖層。 它被開(kāi)發(fā)用于徽標(biāo)設(shè)計(jì)。
https://www.figma.com/community/plugin/851217747476215597/Figma-Finderhttps://www.figma.com/community/plugin/851217747476215597/Figma-FinderFigma Finder is a launcher utility plugin. It gives you quick access to all your essential things.
Figma Finder是啟動(dòng)器實(shí)用程序插件。 它使您可以快速訪問(wèn)所有必需的東西。
從制作到發(fā)布的實(shí)用技巧和資源 (Practical tips and resources from crafting to publishing)
1.使用Figma用戶熟悉的設(shè)計(jì)系統(tǒng) (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.
在設(shè)計(jì)階段，我將Figma的UI2用作設(shè)計(jì)的參考點(diǎn)。 您可以從Figma的設(shè)計(jì)系統(tǒng)中獲得很多啟發(fā)。
You can also download the Inter font that Figma uses for free.
您也可以免費(fèi)下載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.
在開(kāi)發(fā)階段，我使用Thomas-lowry / Figma插件DS來(lái)實(shí)現(xiàn)UI。 也可以使用其他框架設(shè)計(jì)系統(tǒng)軟件包，例如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.提供訪問(wèn)插件的簡(jiǎn)便方法 (2. Provide easy ways to access plugins)
There are several ways to launch plugins.
有幾種啟動(dòng)插件的方法。
- Click on the Plugin in the Menu to launch it from your list. 單擊菜單中的插件以從列表中啟動(dòng)它。
Press Command+/and quickly type in the plugin to launch it faster.
按Command + /并快速鍵入插件以更快地啟動(dòng)它。
Press Command+Option+P to relaunch the previous plugin
按Command + Option + P重新啟動(dòng)以前的插件
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.
但是，當(dāng)您有很多插件時(shí)，可能很難找到它們，或者您可能會(huì)忘記插件名稱。 這是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.
通過(guò)將setRelunchData添加到manifest.jsont中，該插件的命令將顯示在“屬性”面板的“插件”部分中。用戶可以從此處快速啟動(dòng)該插件。
// 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.
如果您想獲得有關(guān)如何改善FigmaPlugin UX的實(shí)用技巧，則必須閱讀本文。
3.制作清晰誘人的插件頁(yè)面 (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. 名稱：您的插件的簡(jiǎn)短，唯一且清晰的名稱。
- Tags (up to 10 tags): Use tags that are easily findable by users. 標(biāo)簽(最多10個(gè)標(biāo)簽)：使用易于用戶找到的標(biāo)簽。
- Support contact：Github, Twitter, etc. 支持聯(lián)系人：Github，Twitter等
Here’s a recommended template for creating a plugin page.
這是用于創(chuàng)建插件頁(yè)面的推薦模板。
Figma plugin promotional template ― A small template for building out and previewing assets for publishing and promoting your Figma Plugin.
Figma插件促銷模板 ―一個(gè)用于構(gòu)建和預(yù)覽資產(chǎn)以發(fā)布和推廣Figma插件的小模板。
Figma Community — PluginsFigma社區(qū)—插件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社區(qū)的用戶界面得到了很大的改進(jìn)。 現(xiàn)在組織了最受歡迎的類別。 包含此標(biāo)記將確保您的插件具有特色。
4.關(guān)于從提交到發(fā)表的時(shí)間 (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.
根據(jù)我的觀察和對(duì)插件提交的經(jīng)驗(yàn)，似乎新插件主要在星期五發(fā)布。
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.
過(guò)去，公開(kāi)發(fā)布大約花了十天的時(shí)間，而那時(shí)恰逢Figma的新功能發(fā)布。但是，當(dāng)我在星期五早上提交請(qǐng)求時(shí)，它在提交后的2-3小時(shí)內(nèi)發(fā)布。
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社區(qū)繼續(xù)更新。 最近，您可以創(chuàng)建FigmaProfile，關(guān)注創(chuàng)建者，并搜索新創(chuàng)建者。 我相信將來(lái)會(huì)有越來(lái)越多的創(chuàng)作者來(lái)參加Figma。
Stay tuned for more articles on new plugin development and updates.
請(qǐng)繼續(xù)關(guān)注有關(guān)新插件開(kāi)發(fā)和更新的更多文章。
Thank you for reading!
感謝您的閱讀！
If you enjoyed this article, follow me on Twitter, LinkedIn, Medium, or Figma.
如果您喜歡這篇文章，請(qǐng)?jiān)?Twitter ， LinkedIn ， Medium 或 Figma 上關(guān)注我 。
翻譯自: https://uxdesign.cc/my-experience-with-crafting-figma-plugins-7f61bab64a8c
figma 安裝插件
總結(jié)
以上是生活随笔為你收集整理的figma 安装插件_我制作Figma插件的经验的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 饥饿的盛世读后感_满足任何设计师饥饿感的
- 下一篇： 术语解释_术语