Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yuanqing/figmake
:icecream: A tiny CLI for making Figma plugins in HTML, CSS, and vanilla JavaScript
https://github.com/yuanqing/figmake
figma figma-plugin figma-plugins
Last synced: 6 days ago
JSON representation
:icecream: A tiny CLI for making Figma plugins in HTML, CSS, and vanilla JavaScript
- Host: GitHub
- URL: https://github.com/yuanqing/figmake
- Owner: yuanqing
- License: mit
- Created: 2020-05-08T14:04:05.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-01-30T07:40:16.000Z (almost 4 years ago)
- Last Synced: 2024-10-17T10:51:08.964Z (23 days ago)
- Topics: figma, figma-plugin, figma-plugins
- Language: TypeScript
- Homepage:
- Size: 263 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Figmake [](https://www.npmjs.com/package/figmake) [](https://github.com/yuanqing/figmake/actions?query=workflow%3Abuild)
> A tiny CLI for making [Figma plugins](https://figma.com/plugin-docs/) with HTML, CSS, and vanilla JavaScript
- Stitches together `ui.html`, `ui.scss`, and `ui.js` into a single HTML file for your plugin UI
- Automatically inlines any image assets into the generated HTML file
## Goals
- As few files as possible
- No `package.json` or `node_modules`
- No TypeScript
- No JavaScript UI framework; just use [`figma-plugin-ds`](https://github.com/thomas-lowry/figma-plugin-ds)
- No API; just use the [Figma plugin API](https://figma.com/plugin-docs/)
- Tiny CLI that just does one thing
## Quick start
*Requires [Node.js](https://nodejs.org/).*
First:
```
$ npm i -g figmake
```
Figmake assumes that your plugin code comprises the following files:
```
main.js
manifest.json
ui.scss
ui.html
ui.js
```
(Of these, only `main.js` and [`manifest.json`](https://figma.com/plugin-docs/manifest/) are mandatory.)
`manifest.json` should look something like:
```json
{
"name": "My Plugin",
"id": "314159265358979323",
"api": "1.0.0",
"main": "build/main.js",
"ui": "build/ui.html"
}
```
To build the plugin:
```
$ figmake
```
This will generate the following two files:
- **`build/main.js`** — The plugin entry point, built from `main.js`.
- **`build/ui.html`** — HTML file for the plugin UI, stitched together from `ui.html`, `ui.scss`, and `ui.js`.
- `ui.scss` will be compiled down to CSS.
- Image assets referenced in `ui.html` and `ui.scss` will be inlined into the resulting HTML file.
To watch for code changes and rebuild the plugin automatically:
```
$ figmake -w
```
To minify the output files:
```
$ figmake -m
```
## See also
- [Create Figma Plugin](https://github.com/yuanqing/create-figma-plugin)
## License
[MIT](/LICENSE.md)