{"id":27302256,"url":"https://github.com/hyperbrew/bolt-figma","last_synced_at":"2025-04-12T02:15:43.238Z","repository":{"id":250347749,"uuid":"717231924","full_name":"hyperbrew/bolt-figma","owner":"hyperbrew","description":"A lightning-fast boilerplate for building Figma Plugins in Svelte, React, or Vue built on Vite + TypeScript + Sass","archived":false,"fork":false,"pushed_at":"2025-03-11T15:36:50.000Z","size":639,"stargazers_count":43,"open_issues_count":2,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-12T02:15:39.132Z","etag":null,"topics":["figma","figma-plugin","react","scss","svelte","typescript","vite","vue"],"latest_commit_sha":null,"homepage":"https://hyperbrew.co/resources/bolt-figma","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hyperbrew.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2023-11-10T21:42:20.000Z","updated_at":"2025-04-03T19:45:33.000Z","dependencies_parsed_at":"2025-03-11T16:27:56.329Z","dependency_job_id":"287af1dd-78d2-4e5c-b1c9-231146d0eeb0","html_url":"https://github.com/hyperbrew/bolt-figma","commit_stats":null,"previous_names":["hyperbrew/bolt-figma"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperbrew%2Fbolt-figma","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperbrew%2Fbolt-figma/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperbrew%2Fbolt-figma/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperbrew%2Fbolt-figma/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hyperbrew","download_url":"https://codeload.github.com/hyperbrew/bolt-figma/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248505922,"owners_count":21115354,"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":["figma","figma-plugin","react","scss","svelte","typescript","vite","vue"],"created_at":"2025-04-12T02:15:42.539Z","updated_at":"2025-04-12T02:15:43.220Z","avatar_url":"https://github.com/hyperbrew.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"src/assets/bolt-figma-darkmode.svg\" alt=\"Bolt Figma\" title=\"Bolt Figma\" width=\"400\" /\u003e\n\nA lightning-fast boilerplate for building Figma Plugins in Svelte, React, or Vue built on Vite + TypeScript + Sass\n\n![npm](https://img.shields.io/npm/v/bolt-figma)\n[![License](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/hyperbrew/bolt-figma/blob/master/LICENSE)\n[![Chat](https://img.shields.io/badge/chat-discord-7289da.svg)](https://discord.gg/PC3EvvuRbc)\n\n## Features\n\n- Lightning Fast Hot Reloading on changes\n- Setup with TypeScript Definitions for Figma in Frontend, Backend, and Manifest\n- Optimized Build Size\n- Easy Smart Bundling in Frontend UI and Backend Code contexts\n- Spin a up a new project in Svete, React, or Vue\n- Select apps including Figma (Design Mode), Figma (Dev Mode), or FigJam\n- Easily configure in figma.config.ts\n- Easy Package to Zip archive with sidecar assets\n- GitHub Actions ready-to-go for Zip Releases\n\n## Backers\n\nHuge thanks to our backers who have made this project possible!\n\n### Founding Backers\n\n_Founding backers have made substantial contribution to the project at the start which has made this project possible._\n\n\u003ca href=\"https://figma.com/\" target=\"_blank\"\u003e\n\u003cimg src=\"https://cdn.sanity.io/images/g3so7nt7/production/6cb43009e94a67554c68fb50b9363a0aa68f3d23-418x200.png?w=1000\u0026h=1000\u0026fit=max\" alt=\"Figma\" title=\"Figma\" width=\"300\" /\u003e\u003c/a\u003e\n\n...\n\n### Feature Backers\n\n_Feature backers have sponsored individual features that have made this project better for the whole community._\n\n\u003ca href=\"https://battleaxe.co/\" target=\"_blank\"\u003e\n\u003cimg src=\"https://battleaxe.dev/servile/logotype_lightgrey.png\" alt=\"Battle Axe\" title=\"Battle Axe\" width=\"150\" /\u003e\u003c/a\u003e\n\n...\n\nIf you're interested in supporting this open-source project, please [contact the Hyper Brew team](https://hyperbrew.co/contact/).\n\n## Support\n\n### Free Support\n\nIf you have questions with getting started using Bolt Figma, feel free to ask and discuss in our free Discord community [Discord Community](https://discord.gg/PC3EvvuRbc).\n\n### Paid Support\n\nIf your team is interested in paid consulting or development with Bolt Figma, please [contact the Hyper Brew team](https://hyperbrew.co/contact/). More info on our [Custom Plugin Development \u0026 Consulting Services](https://hyperbrew.co/landings/boost-development)\n\n## Can I use Bolt Figma in my free or commercial project?\n\nYes! Bolt Figma is **100% free and open source**, being released under the MIT license with no attribution required. This means you are free to use it in your free or commercial projects.\n\nWe would greatly appreciate it if you could provide a link back to this tool's info page in your product's site or about page:\n\nBolt Figma Info Page Link: https://hyperbrew.co/resources/bolt-figma\n\n**Built with Bolt Figma** button graphics:\n\n**PNG Files**\n\n\u003cdiv style=\"display:flex;gap:1rem;\"\u003e\n\u003ca href=\"./src/assets/built-with-bolt-figma/Built_With_BOLT_Figma_Logo_White_V01.png\" target=\"_blank\"\u003e\n\u003cimg src=\"./src/assets/built-with-bolt-figma/Built_With_BOLT_Figma_Logo_White_V01.png\" width=\"200\" /\u003e\u003c/a\u003e\n\n\u003ca href=\"./src/assets/built-with-bolt-figma/Built_With_BOLT_Figma_Logo_Black_V01.png\" target=\"_blank\"\u003e\n\u003cimg src=\"./src/assets/built-with-bolt-figma/Built_With_BOLT_Figma_Logo_Black_V01.png\" width=\"200\" /\u003e\u003c/a\u003e\n\n\u003c/div\u003e\n\n**SVG Files**\n\n\u003cdiv style=\"display:flex;gap:1rem;\"\u003e\n\u003ca href=\"src/assets/built-with-bolt-figma/Built_With_BOLT_Figma_Logo_White_V01.svg\" target=\"_blank\"\u003e\n\u003cimg src=\"src/assets/built-with-bolt-figma/Built_With_BOLT_Figma_Logo_White_V01.svg\" width=\"200\" /\u003e\u003c/a\u003e\n\n\u003ca href=\"src/assets/built-with-bolt-figma/Built_With_BOLT_Figma_Logo_Black_V01.svg\" target=\"_blank\"\u003e\n\u003cimg src=\"src/assets/built-with-bolt-figma/Built_With_BOLT_Figma_Logo_Black_V01.svg\" width=\"200\" /\u003e\u003c/a\u003e\n\n\u003c/div\u003e\n\n## Prerequisites\n\n- [Node.js 18](https://nodejs.org/en/) or later\n- Package manager either\n  - NPM (comes with Node.js)\n  - [Yarn](https://classic.yarnpkg.com/lang/en/docs/install/) ( ensure by running `yarn set version classic` )\n  - [PNPM](https://pnpm.io/installation) ( ensure by running `pnpm --version` )\n- Figma Desktop App\n\n## Quick Start\n\nCreate your new Bolt Figma project (follow CLI prompts)\n\n- yarn - `yarn create bolt-figma`\n- npm - `npx create bolt-figma`\n- pnpm - `pnpm create bolt-figma`\n\nChange directory to the new project\n\n- `cd project`\n\nInstall Dependencies (if not already done by create command)\n\n- yarn - `yarn`\n- npm - `npm i`\n- pnpm - `pnpm i`\n\nBuild the plugin (must run before `dev`, can also run after for panel to work statically without the process)\n\n- yarn `yarn build`\n- npm `npm run build`\n- pnpm `pnpm build`\n\nRun the plugin in hot reload mode for development\n\n_Note: Ensure \"Hot reload plugin\" is checked in Figma Plugin Development menu_\n\n- yarn `yarn dev`\n- npm `npm run dev`\n- pnpm `pnpm dev`\n\nBundles your plugin and specified assets from `copyZipAssets` to a zip archive in the `./zip` folder\n\n- yarn `yarn zip`\n- npm `npm run zip`\n- pnpm `pnpm zip`\n\nWrite frontend UI code in `src/main.svelte`\n\nWrite backend figma code in `src-code/code.ts`\n\n### Add Plugin to Figma\n\n1. Open Figma\n2. Select Figma Menu \u003e Plugins \u003e Development \u003e Import Plugin from Manifest\n3. Select the `manifest.json` file in the `dist` folder\n4. Your plugin can now be launched from the menu or managed under \"Manage Plugins\"\n\n### Load and Debug Plugin\n\n1. Launch your plugin by going to `Figma Menu \u003e Plugins \u003e Development \u003e \"Your Plugin\"`\n2. Ensure Hot Reloading is checked under `Figma Menu \u003e Plugins \u003e Development \u003e Hot Reloading Plugin`\n3. Open the Dev Tools console with `Figma Menu \u003e Plugins \u003e Development \u003e Show/Hide Console`\n\n---\n\n## Sending Messages between the Frontend and Backend\n\nBolt Figma makes messaging between the frontend UI and backend code layers simple and type-safe. This can be done with `listenTS()` and `dispatchTS()`.\n\nUsing this method accounts for:\n\n- Setting up a scoped event listener in the listening context\n- Removing the listener when the event is called (if `once` is set to true)\n- Ensuring End-to-End Type-Safety for the event\n\n### 1. Declare the Event Type in EventTS in shared/universals.ts\n\n```js\nexport type EventTS = {\n  myCustomEvent: {\n    oneValue: string,\n    anotherValue: number,\n  },\n  // [... other events]\n};\n```\n\n### 2a. Send a Message from the Frontend to the Backend\n\n**Backend Listener:** `src-code/code.ts`\n\n```js\nimport { listenTS } from \"./utils/code-utils\";\n\nlistenTS(\"myCustomEvent\", (data) =\u003e {\n  console.log(\"oneValue is\", data.oneValue);\n  console.log(\"anotherValue is\", data.anotherValue);\n});\n```\n\n**Frontend Dispatcher:** `index.svelte` or `index.tsx` or `index.vue`\n\n```js\nimport { dispatchTS } from \"./utils/utils\";\n\ndispatchTS(\"myCustomEvent\", { oneValue: \"name\", anotherValue: 20 });\n```\n\n### 2b. Send a Message from the Backend to the Frontend\n\n**Frontend Listener:** `index.svelte` or `index.tsx` or `index.vue`\n\n```js\nimport { listenTS } from \"./utils/utils\";\n\nlistenTS(\n  \"myCustomEvent\",\n  (data) =\u003e {\n    console.log(\"oneValue is\", data.oneValue);\n    console.log(\"anotherValue is\", data.anotherValue);\n  },\n  true,\n);\n```\n\n_Note: `true` is passed as the 3rd argument which means the listener will only listen once and then be removed. Set this to true to avoid duplicate events if you only intend to recieve one reponse per function._\n\n**Backend Dispatcher:** `src-code/code.ts`\n\n```js\nimport { dispatchTS } from \"./utils/code-utils\";\n\ndispatchTS(\"myCustomEvent\", { oneValue: \"name\", anotherValue: 20 });\n```\n\n---\n\n### Info on Build Process\n\nFrontend code is built to the `.tmp` directory temporarily and then copied to the `dist` folder for final. This is done to avoid Figma throwing plugin errors with editing files directly in the `dist` folder.\n\nThe frontend code (JS, CSS, HTML) is bundled into a single `index.html` file and all assets are inlined.\n\nThe backend code is bundled into a single `code.js` file.\n\nFinally the `manifest.json` is generated from the `figma.config.ts` file with type-safety. This is configured when running `yarn create bolt-figma`, but you can make additional modifications to the `figma.config.ts` file after initialization.\n\n### Read if Dev or Production Mode\n\nUse the built-in Vite env var MODE to determine this:\n\n```js\nconst mode = import.meta.env.MODE; // 'dev' or 'production'\n```\n\n### Troubleshooting Assets\n\nFigma requires the entire frontend code to be wrapped into a single HTML file. For this reason, bundling external images, svgs, and other assets is not possible.\n\nThe solution to this is to inline all assets. Vite is already setup to inline most asset types it understands such as JPG, PNG, SVG, and more, however if the file type you're trying to inline doesn't work, you may need to add it to the assetsInclude array in the vite config:\n\nMore Info: https://vitejs.dev/config/shared-options.html#assetsinclude\n\nAdditionally, you may be able to import the file as a raw string, and then use that data inline in your component using the `?raw` suffix.\n\nFor example:\n\n```ts\nimport icon from \"./assets/icon.svg?raw\";\n```\n\nand then use that data inline in your component:\n\n```js\n// Svelte\n{@html icon}\n\n// React\n\u003cdiv dangerouslySetInnerHTML={{ __html: icon }}\u003e\u003c/div\u003e\n\n// Vue\n\u003cdiv v-html=\"icon\"\u003e\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyperbrew%2Fbolt-figma","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhyperbrew%2Fbolt-figma","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyperbrew%2Fbolt-figma/lists"}