Updates

yuanqing · Aug 27, 2023 · 70a4446 · 70a4446
1 parent 62a5e61
commit 70a4446
Show file tree

Hide file tree

Showing 11 changed files with 15 additions and 13 deletions.
diff --git a/configuration/index.html b/configuration/index.html
diff --git a/index.html b/index.html
diff --git a/quick-start/index.html b/quick-start/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Quick start — Create Figma Plugin</title><meta name="description"content="The comprehensive toolkit for developing plugins and widgets for Figma and FigJam"><meta name="twitter:card"content="summary_large_image"><meta name="twitter:description"content="The comprehensive toolkit for developing plugins and widgets for Figma and FigJam"><meta name="twitter:image"content="https://yuanqing.github.io/create-figma-plugin/media/share-quick-start.png"><meta name="twitter:title"content="Quick start — Create Figma Plugin"><meta name="viewport"content="width=device-width,initial-scale=1"><meta property="og:description"content="The comprehensive toolkit for developing plugins and widgets for Figma and FigJam"><meta property="og:image"content="https://yuanqing.github.io/create-figma-plugin/media/share-quick-start.png"><meta property="og:title"content="Quick start — Create Figma Plugin"><link href="/create-figma-plugin/style.css"rel="stylesheet"><link rel="icon"href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cstyle%3E circle %7B fill: %23000; %7D @media (prefers-color-scheme: dark) %7B circle %7B fill: %23fff; %7D %7D %3C/style%3E%3Ccircle cx='50' cy='50' r='50' /%3E%3C/svg%3E%0A"></head><body class="page"><div class="page__skip-to-content"><a href="#content">Skip to content</a></div><header class="page__header"><h1 class="title"><a href="/create-figma-plugin/">Create Figma Plugin</a></h1><button class="menu-toggle-button"aria-expanded="false"><div class="menu-toggle-button__inner">Toggle menu</div><svg fill="none"viewBox="0 0 20 20"class="menu-toggle-button__svg-menu"><path fill-rule="evenodd"d="M0 3.25h20v1.5H0v-1.5Zm0 6h20v1.5H0v-1.5Zm20 6H0v1.5h20v-1.5Z"clip-rule="evenodd"/></svg> <svg fill="none"viewBox="0 0 20 20"class="menu-toggle-button__svg-close"><path fill-rule="evenodd"d="M10 11.0607L16.4697 17.5303L17.5303 16.4697L11.0607 10L17.5303 3.53033L16.4697 2.46967L10 8.93934L3.53033 2.46967L2.46967 3.53033L8.93934 10L2.46967 16.4697L3.53033 17.5303L10 11.0607Z"clip-rule="evenodd"/></svg></button><nav class="menu"><ul><li><a href="/create-figma-plugin/">Introduction</a></li><li><a href="/create-figma-plugin/quick-start/"class="menu__active">Quick start</a><div class="menu__toc"><h2 class="menu__toc-header">On this page</h2><ul><li><a href="#pre-requisites">Pre-requisites</a></li><li><a href="#bootstrapping-a-new-plugin-widget-from-a-template">Bootstrapping a new plugin/widget from a template</a></li><li><a href="#configuring-the-plugin-widget">Configuring the plugin/widget</a></li><li><a href="#building-the-plugin-widget">Building the plugin/widget</a></li><li><a href="#installing-the-plugin-widget">Installing the plugin/widget</a></li><li><a href="#debugging">Debugging</a></li><li><a href="#publishing-to-figma-community">Publishing to Figma Community</a></li><li><a href="#see-also">See also</a></li></ul></div></li><li><a href="/create-figma-plugin/configuration/">Configuration</a></li><li><a href="/create-figma-plugin/ui/">UI</a></li><li><a href="/create-figma-plugin/utilities/">Utilities</a></li><li><a href="/create-figma-plugin/recipes/">Recipes</a></li><li><a href="/create-figma-plugin/reference-plugins-and-widgets/">Reference plugins/widgets</a></li></ul><ul><li><a href="/create-figma-plugin/storybook/"target="_blank">Storybook</a></li><li><a href="https://github.com/yuanqing/create-figma-plugin/blob/main/CHANGELOG.md#readme"target="_blank">Changelog</a></li><li><a href="https://github.com/yuanqing/create-figma-plugin"target="_blank">GitHub</a></li><li><a href="https://twitter.com/yuanqinglim"target="_blank">@yuanqinglim</a></li></ul><ul><li><a href="https://figma.com/plugin-docs/"target="_blank">Plugin API docs</a></li><li><a href="https://figma.com/widget-docs/"target="_blank">Widget API docs</a></li></ul><div class="menu__version">v2.6.0</div></nav></header><main role="main"class="page__main"><div class="page__main-inner"><div class="content"id="content"><h1>Quick start</h1><h2 id="pre-requisites">Pre-requisites<a aria-hidden class="header-link"tabindex="-1"href="#pre-requisites">#</a></h2><ul><li><a href="https://nodejs.org"target="_blank">Node.js</a> – v18</li><li><a href="https://figma.com/downloads/"target="_blank">Figma desktop app</a></li></ul><h2 id="bootstrapping-a-new-plugin-widget-from-a-template">Bootstrapping a new plugin/widget from a template<a aria-hidden class="header-link"tabindex="-1"href="#bootstrapping-a-new-plugin-widget-from-a-template">#</a></h2><div data-rehype-pretty-code-fragment=""><pre data-language="sh"data-theme="default"><code data-language="sh"data-theme="default"><span class="line"><span style="color:#d4d4d4">$ npx --yes create-figma-plugin</span></span></code></pre></div><p>You’ll then be prompted to select from the following templates:</p><ul><li><a href="https://github.com/yuanqing/create-figma-plugin/tree/main/packages/create-figma-plugin/templates/plugin/hello-world"target="_blank"><code>plugin/hello-world</code></a> — A plugin without a UI.</li><li><a href="https://github.com/yuanqing/create-figma-plugin/tree/main/packages/create-figma-plugin/templates/plugin/preact-rectangles"target="_blank"><code>plugin/preact-rectangles</code></a> — A plugin with a UI built using <a href="/create-figma-plugin/ui/#using-the-preact-component-library">Create Figma Plugin’s Preact component library</a>.</li><li><a href="https://github.com/yuanqing/create-figma-plugin/tree/main/packages/create-figma-plugin/templates/plugin/preact-resizable"target="_blank"><code>plugin/preact-resizable</code></a> — A plugin with a <a href="/create-figma-plugin/ui/#making-the-plugin-widget-ui-window-resizable">resizable UI window</a>.</li><li><a href="https://github.com/yuanqing/create-figma-plugin/tree/main/packages/create-figma-plugin/templates/plugin/preact-tailwindcss"target="_blank"><code>plugin/preact-tailwindcss</code></a> — A plugin with a UI that <a href="/create-figma-plugin/ui/#using-tailwind-css">uses Tailwind CSS</a>.</li><li><a href="https://github.com/yuanqing/create-figma-plugin/tree/main/packages/create-figma-plugin/templates/plugin/react-editor"target="_blank"><code>plugin/react-editor</code></a> — A plugin with a UI that <a href="/create-figma-plugin/ui/#using-react">uses a React component</a>.</li><li><a href="https://github.com/yuanqing/create-figma-plugin/tree/main/packages/create-figma-plugin/templates/widget/notepad"target="_blank"><code>widget/notepad</code></a> — A FigJam widget with a UI.</li></ul><h2 id="configuring-the-plugin-widget">Configuring the plugin/widget<a aria-hidden class="header-link"tabindex="-1"href="#configuring-the-plugin-widget">#</a></h2><ul><li><a href="https://figma.com/plugin-docs/"target="_blank">Plugin API docs</a></li><li><a href="https://figma.com/widget-docs/"target="_blank">Widget API docs</a></li></ul><p>Configuration options for your plugin/widget go under the <strong><code>"figma-plugin"</code></strong> key of your <code>package.json</code> file.</p><p>A Figma plugin (eg. <a href="https://github.com/yuanqing/create-figma-plugin/tree/main/packages/create-figma-plugin/templates/plugin/preact-rectangles"target="_blank"><code>plugin/preact-rectangles</code></a>) would be configured as follows:</p><div data-rehype-pretty-code-fragment=""><pre data-language="json"data-theme="default"><code data-language="json"data-theme="default"><span class="line"><span style="color:#d4d4d4">{</span></span>
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Quick start — Create Figma Plugin</title><meta name="description"content="The comprehensive toolkit for developing plugins and widgets for Figma and FigJam"><meta name="twitter:card"content="summary_large_image"><meta name="twitter:description"content="The comprehensive toolkit for developing plugins and widgets for Figma and FigJam"><meta name="twitter:image"content="https://yuanqing.github.io/create-figma-plugin/media/share-quick-start.png"><meta name="twitter:title"content="Quick start — Create Figma Plugin"><meta name="viewport"content="width=device-width,initial-scale=1"><meta property="og:description"content="The comprehensive toolkit for developing plugins and widgets for Figma and FigJam"><meta property="og:image"content="https://yuanqing.github.io/create-figma-plugin/media/share-quick-start.png"><meta property="og:title"content="Quick start — Create Figma Plugin"><link href="/create-figma-plugin/style.css"rel="stylesheet"><link rel="icon"href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cstyle%3E circle %7B fill: %23000; %7D @media (prefers-color-scheme: dark) %7B circle %7B fill: %23fff; %7D %7D %3C/style%3E%3Ccircle cx='50' cy='50' r='50' /%3E%3C/svg%3E%0A"></head><body class="page"><div class="page__skip-to-content"><a href="#content">Skip to content</a></div><header class="page__header"><h1 class="title"><a href="/create-figma-plugin/">Create Figma Plugin</a></h1><button class="menu-toggle-button"aria-expanded="false"><div class="menu-toggle-button__inner">Toggle menu</div><svg fill="none"viewBox="0 0 20 20"class="menu-toggle-button__svg-menu"><path fill-rule="evenodd"d="M0 3.25h20v1.5H0v-1.5Zm0 6h20v1.5H0v-1.5Zm20 6H0v1.5h20v-1.5Z"clip-rule="evenodd"/></svg> <svg fill="none"viewBox="0 0 20 20"class="menu-toggle-button__svg-close"><path fill-rule="evenodd"d="M10 11.0607L16.4697 17.5303L17.5303 16.4697L11.0607 10L17.5303 3.53033L16.4697 2.46967L10 8.93934L3.53033 2.46967L2.46967 3.53033L8.93934 10L2.46967 16.4697L3.53033 17.5303L10 11.0607Z"clip-rule="evenodd"/></svg></button><nav class="menu"><ul><li><a href="/create-figma-plugin/">Introduction</a></li><li><a href="/create-figma-plugin/quick-start/"class="menu__active">Quick start</a><div class="menu__toc"><h2 class="menu__toc-header">On this page</h2><ul><li><a href="#pre-requisites">Pre-requisites</a></li><li><a href="#bootstrapping-a-new-plugin-widget-from-a-template">Bootstrapping a new plugin/widget from a template</a></li><li><a href="#configuring-the-plugin-widget">Configuring the plugin/widget</a></li><li><a href="#building-the-plugin-widget">Building the plugin/widget</a></li><li><a href="#installing-the-plugin-widget">Installing the plugin/widget</a></li><li><a href="#debugging">Debugging</a></li><li><a href="#publishing-to-figma-community">Publishing to Figma Community</a></li><li><a href="#see-also">See also</a></li></ul></div></li><li><a href="/create-figma-plugin/configuration/">Configuration</a></li><li><a href="/create-figma-plugin/ui/">UI</a></li><li><a href="/create-figma-plugin/utilities/">Utilities</a></li><li><a href="/create-figma-plugin/recipes/">Recipes</a></li><li><a href="/create-figma-plugin/reference-plugins-and-widgets/">Reference plugins/widgets</a></li></ul><ul><li><a href="/create-figma-plugin/storybook/"target="_blank">Storybook</a></li><li><a href="https://github.com/yuanqing/create-figma-plugin/blob/main/CHANGELOG.md#readme"target="_blank">Changelog</a></li><li><a href="https://github.com/yuanqing/create-figma-plugin"target="_blank">GitHub</a></li><li><a href="https://twitter.com/yuanqinglim"target="_blank">@yuanqinglim</a></li></ul><ul><li><a href="https://figma.com/plugin-docs/"target="_blank">Plugin API docs</a></li><li><a href="https://figma.com/widget-docs/"target="_blank">Widget API docs</a></li></ul><div class="menu__version">v2.6.1-alpha.0</div></nav></header><main role="main"class="page__main"><div class="page__main-inner"><div class="content"id="content"><h1>Quick start</h1><h2 id="pre-requisites">Pre-requisites<a aria-hidden class="header-link"tabindex="-1"href="#pre-requisites">#</a></h2><ul><li><a href="https://nodejs.org"target="_blank">Node.js</a> – v18</li><li><a href="https://figma.com/downloads/"target="_blank">Figma desktop app</a></li></ul><h2 id="bootstrapping-a-new-plugin-widget-from-a-template">Bootstrapping a new plugin/widget from a template<a aria-hidden class="header-link"tabindex="-1"href="#bootstrapping-a-new-plugin-widget-from-a-template">#</a></h2><div data-rehype-pretty-code-fragment=""><pre data-language="sh"data-theme="default"><code data-language="sh"data-theme="default"><span class="line"><span style="color:#d4d4d4">$ npx --yes create-figma-plugin</span></span></code></pre></div><p>You’ll then be prompted to select from the following templates:</p><ul><li><a href="https://github.com/yuanqing/create-figma-plugin/tree/main/packages/create-figma-plugin/templates/plugin/hello-world"target="_blank"><code>plugin/hello-world</code></a> — A plugin without a UI.</li><li><a href="https://github.com/yuanqing/create-figma-plugin/tree/main/packages/create-figma-plugin/templates/plugin/preact-rectangles"target="_blank"><code>plugin/preact-rectangles</code></a> — A plugin with a UI built using <a href="/create-figma-plugin/ui/#using-the-preact-component-library">Create Figma Plugin’s Preact component library</a>.</li><li><a href="https://github.com/yuanqing/create-figma-plugin/tree/main/packages/create-figma-plugin/templates/plugin/preact-resizable"target="_blank"><code>plugin/preact-resizable</code></a> — A plugin with a <a href="/create-figma-plugin/ui/#making-the-plugin-widget-ui-window-resizable">resizable UI window</a>.</li><li><a href="https://github.com/yuanqing/create-figma-plugin/tree/main/packages/create-figma-plugin/templates/plugin/preact-tailwindcss"target="_blank"><code>plugin/preact-tailwindcss</code></a> — A plugin with a UI that <a href="/create-figma-plugin/ui/#using-tailwind-css">uses Tailwind CSS</a>.</li><li><a href="https://github.com/yuanqing/create-figma-plugin/tree/main/packages/create-figma-plugin/templates/plugin/react-editor"target="_blank"><code>plugin/react-editor</code></a> — A plugin with a UI that <a href="/create-figma-plugin/ui/#using-react">uses a React component</a>.</li><li><a href="https://github.com/yuanqing/create-figma-plugin/tree/main/packages/create-figma-plugin/templates/widget/notepad"target="_blank"><code>widget/notepad</code></a> — A FigJam widget with a UI.</li></ul><h2 id="configuring-the-plugin-widget">Configuring the plugin/widget<a aria-hidden class="header-link"tabindex="-1"href="#configuring-the-plugin-widget">#</a></h2><ul><li><a href="https://figma.com/plugin-docs/"target="_blank">Plugin API docs</a></li><li><a href="https://figma.com/widget-docs/"target="_blank">Widget API docs</a></li></ul><p>Configuration options for your plugin/widget go under the <strong><code>"figma-plugin"</code></strong> key of your <code>package.json</code> file.</p><p>A Figma plugin (eg. <a href="https://github.com/yuanqing/create-figma-plugin/tree/main/packages/create-figma-plugin/templates/plugin/preact-rectangles"target="_blank"><code>plugin/preact-rectangles</code></a>) would be configured as follows:</p><div data-rehype-pretty-code-fragment=""><pre data-language="json"data-theme="default"><code data-language="json"data-theme="default"><span class="line"><span style="color:#d4d4d4">{</span></span>
 <span class="line"><span style="color:#d4d4d4">  </span><span style="color:#7cc4f8">"figma-plugin"</span><span style="color:#d4d4d4">: {</span></span>
 <span class="line"><span style="color:#d4d4d4">    </span><span style="color:#7cc4f8">"editorType"</span><span style="color:#d4d4d4">: [</span></span>
 <span class="line"><span style="color:#d4d4d4">      </span><span style="color:#d1a8ff">"figma"</span></span>