Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/CoconutGoodie/figma-plugin-react-vite
𧩠A figma plugin boilerplate, that simplifies building plugins with React + Vite!
https://github.com/CoconutGoodie/figma-plugin-react-vite
boilerplate figjam figjam-plugin figma figma-plugin react template typescript vite
Last synced: 3 months ago
JSON representation
𧩠A figma plugin boilerplate, that simplifies building plugins with React + Vite!
- Host: GitHub
- URL: https://github.com/CoconutGoodie/figma-plugin-react-vite
- Owner: CoconutGoodie
- License: cc-by-sa-4.0
- Created: 2023-03-29T13:43:01.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-07-09T14:07:23.000Z (4 months ago)
- Last Synced: 2024-07-09T17:58:01.919Z (4 months ago)
- Topics: boilerplate, figjam, figjam-plugin, figma, figma-plugin, react, template, typescript, vite
- Language: TypeScript
- Homepage:
- Size: 598 KB
- Stars: 87
- Watchers: 5
- Forks: 8
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-figma - figma-plugin-react-vite
README
Figma Plugin Boilerplate: React + Vite
Create scalable Figma plugins with ease, using the power of React + Vite!
# π Key Features
1. **_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/).
2. **_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)
3. **_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!
4. **_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.
5. **_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)
6. **_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.
# π» How to start coding?
1. First thing after you clone should be to install the dependencies by executing:
```
npm install
```
2. Create a figma plugin. In Figma, right click while you're in a design file. Follow `Plugins > Development > New Plugin...`. You can also type `"New Plugin...` to the global search (Windows: CTRL + P, Mac: β Command + P)
3. 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
4. Note down the `id` field from the `manifest.json` it generated.
5. 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/))
## π± Developing
Development is very straight forward. Just run the dev command, and it will start compiling your files as you code.
```
npm run dev
```
Once dev is ran, `dist/` folder will be created, which includes your `manifest.json`. You can load it in Figma, by `Right Click > Plugins > Development > Import plugin from manifest...`
> [!TIP]
> You can turn on the `Hot reload plugin` option in Figma, to automatically reload when files in `dist/` changes.
### 𦴠Developing without Figma Context
If 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:
```
npm run dev:ui-only
```
> [!NOTE]
> 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.
## π¨ Building
Building with the following command line will yield with a `dist` folder, which is ready to be used by Figma:
```
npm run build
```
Then, `dist/manifest.json` can be used to load the plugin. In Figma, right click while you're in a design file. Follow `Plugins > Development > Import plugin from manifest...`. You can also type `"Import plugin from manifest...` to the global search (Windows: CTRL + P, Mac: β Command + P). Then select `dist/manifest.json`
## π¦ Publishing
After 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).
## πΈ File Structure
- `src`
- `src/common/` : Sources that are intended to be used both by plugin and ui logical sides.
- `src/common/network/` : Networking logic & message declarations used by Plugin - UI logical sides' intercommunication. Whenever a new message type is needed, declare and register here.
- `src/plugin/` : Sources of the plugin logical side. Place everything that interracts with figma here.
- `src/ui/` : Sources of the ui logical side, a classical Vite + React source base.
- `scripts`
- `scripts/vite/` : Potential custom vite plugins written for your project
- `scripts/windows/` : Potential custom Windows OS scripts
- `scripts/macos/` : Potential custom Mac OS scripts
- `figma.manifest.ts` - A module that exports [Figma Plugin Manifest](https://www.figma.com/plugin-docs/manifest/) for the build scripts
# π Caveats
### 1. Make sure to import SVGS as either component, url or raw!
Importing 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`.
```tsx
import MyImage from "@ui/assets/my_image.svg?component"; //
import myImage from "@ui/assets/my_image.svg?url"; // "data:svg+xml,..."
import myImageRaw from "@ui/assets/my_image.svg?raw"; // "..."
...
```
---
# π License of the Template
Β© 2024 Taha AnΔ±lcan Metinyurt (iGoodie)
For 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).
