{"id":16329077,"url":"https://github.com/aarongarciah/figma-plugin-typescript-boilerplate","last_synced_at":"2025-10-29T00:13:47.793Z","repository":{"id":36488108,"uuid":"227206297","full_name":"aarongarciah/figma-plugin-typescript-boilerplate","owner":"aarongarciah","description":"Figma plugin TypeScript boilerplate to start developing right away","archived":false,"fork":false,"pushed_at":"2023-03-14T17:34:14.000Z","size":1099,"stargazers_count":58,"open_issues_count":7,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-26T15:59:22.877Z","etag":null,"topics":["editorconfig","eslint","figma","figma-plugin","jest","plugin","prettier","stylelint","typescript"],"latest_commit_sha":null,"homepage":"","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/aarongarciah.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":"2019-12-10T20:08:55.000Z","updated_at":"2025-03-19T03:05:41.000Z","dependencies_parsed_at":"2024-10-23T07:23:06.598Z","dependency_job_id":"6b36820c-1e6d-4d34-a8f2-2b41235bb88d","html_url":"https://github.com/aarongarciah/figma-plugin-typescript-boilerplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aarongarciah%2Ffigma-plugin-typescript-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aarongarciah%2Ffigma-plugin-typescript-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aarongarciah%2Ffigma-plugin-typescript-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aarongarciah%2Ffigma-plugin-typescript-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aarongarciah","download_url":"https://codeload.github.com/aarongarciah/figma-plugin-typescript-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251812729,"owners_count":21647954,"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":["editorconfig","eslint","figma","figma-plugin","jest","plugin","prettier","stylelint","typescript"],"created_at":"2024-10-10T23:14:40.777Z","updated_at":"2025-10-29T00:13:47.462Z","avatar_url":"https://github.com/aarongarciah.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"![Figma Plugin TypeScript Boilerplate](.github/cover.jpg)\n\n**Figma plugin TypeScript boilerplate to start developing right away.**\n\n[![Actions Status](https://github.com/aarongarciah/figma-plugin-typescript-boilerplate/workflows/CI/badge.svg)](https://github.com/aarongarciah/figma-plugin-typescript-boilerplate/actions)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n## Quick start\n\n1. Get the boilerplate **choosing one** of these methods:\n\n   - Fork this repo.\n   - Execute these commands in your terminal:\n     ```bash\n     mkdir my-plugin\n     cd my-plugin\n     npx degit https://github.com/aarongarciah/figma-plugin-typescript-boilerplate\n     ```\n   - [Download the repo](https://github.com/aarongarciah/figma-plugin-typescript-boilerplate/archive/master.zip) and extract it into your empty plugin folder.\n\n2. Install dependencies\n\n   ```bash\n   npm install\n   ```\n\n3. Develop 😄\n   ```bash\n   npm run dev\n   ```\n\n\u003e You'll need Node and npm installed to use this boilerplate. It has been tested in Node 12, 14, and 16.\n\n## Development\n\nTo develop a Figma plugin you need to install the Figma [desktop app](https://www.figma.com/downloads/). Learn more in the [Figma Plugin docs](https://www.figma.com/plugin-docs/setup/).\n\n### Available commands\n\n#### Development\n- `npm run dev`  starts the watcher for changes. Modify the files under the `src` folder and the code will be compiled automatically. Then, go to the Figma app and run your development plugin.\n\n#### Production build\n- `npm run build`  generates the production build in the `dist` folder. Important: run this command before releaseing a new version of your plugin. Before generating the build, it checks TypeScript, JavaScript and CSS files for linting errors.\n\n#### Test\n- `npm run test`  runs tests via Jest. This script runs before `build`.\n- `npm run test:watch`  runs tests via Jest in watch mode.\n\n#### Lint\n- `npm run lint`  lint TypeScript and JavaScript files with ESLint and CSS with Stylelint.\n- `npm run lint:fix`  lint and apply automatic fixes to TypeScript, JavaScript and CSS files. This script runs before `build`.\n\n## What this boilerplate does for me?\n\n\u003e It's highly recommended to take a look at the [Figma plugin development docs](https://www.figma.com/plugin-docs/intro/) before developing a plugin.\n\u003e\n\u003e A plugin has [two parts](https://www.figma.com/plugin-docs/how-plugins-run/): a mandatory worker file (a JavaScript file which has access to the Figma document) and an optional UI (an HTML file).\n\n- Compiles TypeScript.\n- Inlines JS and CSS code into the HTML for the UI. That's because the Figma plugin UI must be a unique HTML file and can't reference any other assets like CSS or JS with relative paths. You can load any external asset (e.g. a file hosted in a CDN) but not relative paths.\n- Provides setup and config for: TypeScript, webpack, ESLint, Stylelint, Prettier, Jest, EditorConfig, etc.\n- Lints and formats the code in a pre-commit hook.\n- Provides boilerplate to send messages between the worker and the UI.\n- Contains a helper to close the UI if you hit the \u003ckbd\u003eESC\u003c/kbd\u003e key outside of an input.\n- Testing environment configured with Jest. Every test file under a `__tests__` folder or ending with `.spec.*` or `.test.*` will be picked up by Jest.\n- Contains a GitHub action to run the `build` and `test` commands.\n\n---\n\n## Having problems?\n\nTake a look if someone already opened [a similar issue](https://github.com/aarongarciah/figma-plugin-boilerplate/issues?utf8=%E2%9C%93\u0026q=is%3Aissue+sort%3Aupdated-desc+) or open a [new one](https://github.com/aarongarciah/figma-plugin-boilerplate/issues/new).\n\n---\n\n## Roadmap\n\n- [ ] Add FAQ to README.\n- [ ] Add bin executables to create templates via `npx`.\n\n---\n\n## License\n\nMIT\n\nMade with ♥️ by [Aarón García Hervás](https://aarongarciah.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faarongarciah%2Ffigma-plugin-typescript-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faarongarciah%2Ffigma-plugin-typescript-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faarongarciah%2Ffigma-plugin-typescript-boilerplate/lists"}