{"id":13765192,"url":"https://github.com/CoconutGoodie/figma-plugin-react-vite","last_synced_at":"2025-05-10T20:31:48.958Z","repository":{"id":149533566,"uuid":"620847013","full_name":"CoconutGoodie/figma-plugin-react-vite","owner":"CoconutGoodie","description":"🧩 A figma plugin boilerplate, that simplifies building plugins with React + Vite!","archived":false,"fork":false,"pushed_at":"2025-01-08T13:29:32.000Z","size":774,"stargazers_count":133,"open_issues_count":3,"forks_count":12,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-05T12:02:37.844Z","etag":null,"topics":["boilerplate","figjam","figjam-plugin","figma","figma-plugin","react","template","typescript","vite"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc-by-sa-4.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CoconutGoodie.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"iGoodie","patreon":"igoodie","buy_me_a_coffee":"igoodie"}},"created_at":"2023-03-29T13:43:01.000Z","updated_at":"2025-04-01T13:49:48.000Z","dependencies_parsed_at":"2024-05-12T17:36:05.528Z","dependency_job_id":"8007d9bd-c396-4e44-b447-ce52c32b29e3","html_url":"https://github.com/CoconutGoodie/figma-plugin-react-vite","commit_stats":{"total_commits":34,"total_committers":3,"mean_commits":"11.333333333333334","dds":0.1470588235294118,"last_synced_commit":"a748a755856fbea59ee16f2530312a6da8e7f1f4"},"previous_names":[],"tags_count":4,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CoconutGoodie%2Ffigma-plugin-react-vite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CoconutGoodie%2Ffigma-plugin-react-vite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CoconutGoodie%2Ffigma-plugin-react-vite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CoconutGoodie%2Ffigma-plugin-react-vite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CoconutGoodie","download_url":"https://codeload.github.com/CoconutGoodie/figma-plugin-react-vite/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253480572,"owners_count":21915249,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","figjam","figjam-plugin","figma","figma-plugin","react","template","typescript","vite"],"created_at":"2024-08-03T16:00:35.236Z","updated_at":"2025-05-10T20:31:43.934Z","avatar_url":"https://github.com/CoconutGoodie.png","language":"TypeScript","funding_links":["https://github.com/sponsors/iGoodie","https://patreon.com/igoodie","https://buymeacoffee.com/igoodie","https://www.patreon.com/iGoodie"],"categories":["TypeScript","五、插件开发（补充开发入口，明确工具用途）","Plugins development"],"sub_categories":[],"readme":"\u003c!-- Logo --\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/CoconutGoodie/figma-plugin-react-vite/master/.github/assets/logo.png\" height=\"100px\" alt=\"Logo\"/\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003eFigma Plugin Boilerplate: React + Vite\u003c/h1\u003e\n\n\u003c!-- Slogan --\u003e\n\u003cp align=\"center\"\u003e\n   Create scalable Figma plugins with ease, using the power of React + Vite!\n\u003c/p\u003e\n\n\u003c!-- Badges --\u003e\n\u003cp align=\"center\"\u003e\n\n  \u003c!-- Github Badges --\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/TheSpawnProject/TheSpawnLanguage/master/.github/assets/github-badge.png\" height=\"20px\"/\u003e\n  \u003ca href=\"https://github.com/CoconutGoodie/figma-plugin-react-vite/commits/master\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/last-commit/CoconutGoodie/figma-plugin-react-vite\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/CoconutGoodie/figma-plugin-react-vite/issues\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/issues/CoconutGoodie/figma-plugin-react-vite\"/\u003e\n  \u003c/a\u003e\n\n  \u003cbr/\u003e\n\n  \u003c!-- Support Badges --\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/TheSpawnProject/TheSpawnLanguage/master/.github/assets/support-badge.png\" height=\"20px\"/\u003e\n  \u003ca href=\"https://www.patreon.com/iGoodie\"\u003e\n    \u003cimg src=\"https://img.shields.io/endpoint.svg?url=https%3A%2F%2Fshieldsio-patreon.vercel.app%2Fapi%3Fusername%3DiGoodie%26type%3Dpatrons\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n# 🗝 Key Features\n\n1. **_Logical Sides in Mind:_** Figma plugins that render a UI work on two different processes (split into code.js and index.html in Figma docs). This boilerplate keeps the sides separated by allowing them to share code (under ./src/common/).\n\n2. **_Intercommunitive:_** Logical sides should be able to communicate with each other without creating huge and unscalable nested if statements. This boilerplate solves it by declaring isolated messages and handlers (under `./src/common/network/messages/`)! (Using the [Monorepo Networker](https://github.com/CoconutGoodie/monorepo-networker) library)\n\n3. **_Easy to Build:_** Configure the `figma.manifest.ts` config with your plugin credentials once, then just build with your everyday `npm run build` command! The `/dist` folder will be ready to publish already!\n\n4. **_Bundled into One File:_** Figma plugins only accept a single file for `main` (js) and `ui` (html), which makes deployment of multiple files linked to each other impossible. This boilerplate is configured to bundle/inline most of the things you need like rasterize/vector image asset imports, CSS URL statements, and of course, source code imports.\n\n5. **_SVG as Component:_** Yes, you can import SVGs as inlined sources with `*.svg?url`, but what about actually importing them as React components? Easy! You can import an SVG file as a React component with `*.svg?component` (See `/src/ui/app.tsx` for examples) (Using the [vite-plugin-react-rich-svg](https://github.com/iGoodie/vite-plugin-react-rich-svg) plugin)\n\n6. **_Sassy:_** A classic, this boilerplate supports Sass/Scss/Less and modules! Check out `/src/ui/styles/` for 7-1 Sass Template and `/src/ui/components/Button.module.scss` for module examples.\n\n# 💻 How to start coding?\n\n1. First thing after you clone should be to install the dependencies by executing:\n\n```\nnpm install\n```\n\n2. Create a figma plugin. In Figma, right click while you're in a design file. Follow `Plugins \u003e Development \u003e New Plugin...`. You can also type `\"New Plugin...` to the global search (Windows: \u003ckbd\u003eCTRL\u003c/kbd\u003e + \u003ckbd\u003eP\u003c/kbd\u003e, Mac: \u003ckbd\u003e⌘ Command\u003c/kbd\u003e + \u003ckbd\u003eP\u003c/kbd\u003e)\n3. Follow the steps on opened window. I recommend using `Default` or `Run once` layout, because you'll only need to save the manifest (for the plugin id it generates). Click \"Save as\", and save it to a temporary place. Then click \"Open folder\" to navigate to the folder it generated\n4. Note down the `id` field from the `manifest.json` it generated.\n5. Go to `figma.manifest.ts`, and replace the `id` with the id you noted down. Then configure the manifest there as you like. (See [Official Figma Plugin Manifest doc](https://www.figma.com/plugin-docs/manifest/))\n\n## 🖱 Developing\n\nDevelopment is very straight forward. Just run the dev command, and it will start compiling your files as you code.\n\n```\nnpm run dev\n```\n\nOnce dev is ran, `dist/` folder will be created, which includes your `manifest.json`. You can load it in Figma, by `Right Click \u003e Plugins \u003e Development \u003e Import plugin from manifest...`\n\n\u003e [!TIP]\n\u003e You can turn on the `Hot reload plugin` option in Figma, to automatically reload when files in `dist/` changes.\n\n### 🦴 Developing without Figma Context\n\nIf you like developing your UI first, then integrating with Figma context; you can run your UI code in browser just like your every other Vite project by running:\n\n```\nnpm run dev:ui-only\n```\n\n\u003e [!NOTE]\n\u003e Since Figma context is not available in \"ui-only\" mode, any attempt to Figma API/SDK calls will look like a crash on your inspector/console.\n\n## 🔨 Building\n\nBuilding with the following command line will yield with a `dist` folder, which is ready to be used by Figma:\n\n```\nnpm run build\n```\n\nThen, `dist/manifest.json` can be used to load the plugin. In Figma, right click while you're in a design file. Follow `Plugins \u003e Development \u003e Import plugin from manifest...`. You can also type `\"Import plugin from manifest...` to the global search (Windows: \u003ckbd\u003eCTRL\u003c/kbd\u003e + \u003ckbd\u003eP\u003c/kbd\u003e, Mac: \u003ckbd\u003e⌘ Command\u003c/kbd\u003e + \u003ckbd\u003eP\u003c/kbd\u003e). Then select `dist/manifest.json`\n\n## 📦 Publishing\n\nAfter building, built `dist` folder is going to contain every artifact you need in order to publish your plugin. Just build, and follow [Figma's Official Post on Publishing Plugins](https://help.figma.com/hc/en-us/articles/360042293394-Publish-plugins-to-the-Figma-Community#Publish_your_plugin).\n\n## 🕸 File Structure\n\n- `src`\n  - `src/common/` : Sources that are intended to be used both by plugin and ui logical sides.\n    - `src/common/network/` : Networking logic \u0026 message declarations used by Plugin - UI logical sides' intercommunication. Whenever a new message type is needed, declare and register here.\n  - `src/plugin/` : Sources of the plugin logical side. Place everything that interracts with figma here.\n  - `src/ui/` : Sources of the ui logical side, a classical Vite + React source base.\n- `scripts`\n  - `scripts/vite/` : Potential custom vite plugins written for your project\n  - `scripts/windows/` : Potential custom Windows OS scripts\n  - `scripts/macos/` : Potential custom Mac OS scripts\n- `figma.manifest.ts` - A module that exports [Figma Plugin Manifest](https://www.figma.com/plugin-docs/manifest/) for the build scripts\n\n# 🛑 Caveats\n\n### 1. Make sure to import SVGS as either component, url or raw!\n\nImporting image assets other than `.svg` is easy. However, when you are importing `.svg`, by default it will load as a base64 data-uri, to import as a React component, you must add the query string `?component`.\n\n```tsx\nimport MyImage from \"@ui/assets/my_image.svg?component\"; // \u003cMyImage /\u003e\nimport myImage from \"@ui/assets/my_image.svg?url\"; // \"data:svg+xml,...\"\nimport myImageRaw from \"@ui/assets/my_image.svg?raw\"; // \"\u003csvg\u003e...\u003c/svg\u003e\"\n...\n\n\u003cMyImage className=\"something\" /\u003e\n\u003cimg src={myImage} /\u003e\n\u003cdiv dangerouslySetInnerHTML={{ __html: myImageRaw }} /\u003e\n```\n\n---\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/CoconutGoodie/figma-plugin-react-vite/master/.github/assets/preview.png\" alt=\"Preview\" /\u003e\n\u003c/p\u003e\n\n# 📜 License of the Template\n\n\u0026copy; 2024 Taha Anılcan Metinyurt (iGoodie)\n\nFor any part of this work for which the license is applicable, this work is licensed under the [Attribution-ShareAlike 4.0 International](http://creativecommons.org/licenses/by-sa/4.0/) license. (See LICENSE).\n\n\u003ca rel=\"license\" href=\"http://creativecommons.org/licenses/by-sa/4.0/\"\u003e\u003cimg alt=\"Creative Commons License\" style=\"border-width:0\" src=\"https://i.creativecommons.org/l/by-sa/4.0/88x31.png\" /\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCoconutGoodie%2Ffigma-plugin-react-vite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCoconutGoodie%2Ffigma-plugin-react-vite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCoconutGoodie%2Ffigma-plugin-react-vite/lists"}