Using two directories in src folder: ui and code with two separate tsconfig files. ui folder contains an empty.ts file with export {} to satisfy the compiler.
This is a heavily modified Rollup config from https://github.com/thomas-lowry/figsvelte
Inspired by Electron, a simple event emitter you can use to communicate between your main script and your html UI. Original by @mattdesl, adapted to TypeScript by me.
Webpack guide for Figma plugins: https://www.figma.com/plugin-docs/bundling-webpack/
Install types for events:
npm install @types/events
| { | |
| "version": 1, | |
| "layers": { | |
| "vectorLayer": { | |
| "id": "27225", | |
| "name": "vector", | |
| "type": "vector", | |
| "width": 16, | |
| "height": 16, | |
| "children": [ |
This style allows you to set all default fonts on the web to Inter typeface made by Rasmus Andersson. It's a great font and fits very nicely within any website which uses default typefaces.
I use a Chrome extension called User JavaScript and CSS to inject this custom CSS into every page. Use * in place of website URL to inject the script into every webpage.
However, I would suggest excluding all websites you use frequently which use custom fonts so you don't run into trouble. For me it was Google Docs — they become buggy if this font is enabled. For example, write *, !docs.google.com, !excludedwebsite.com to activate the style on all pages except Google Docs and “excludedwebsite.com” (write a comma-separated list of domains you want to exclude starting each one with an exclamation mark).
I recommend installing the font locally so you won't use more ne
| { | |
| "name": "Figma", | |
| "author": "Gleb Sabirzyanov", | |
| "variables": | |
| { | |
| "black": "#000000", | |
| "blue": "#1ABCFE", | |
| "blue2": "#A259FF", | |
| "blue3": "#A259FF", | |
| "blue4": "#A259FF", |
| Blend Selection | |
| node selected -> Node Selected | |
| pair selected -> Pair Selected | |
| many selected -> Many Selected | |
| Nothing selected | |
| Node Selected | |
| Blend Group | |
| done -> Selection Found |
| Plugin Opened | |
| 2 objects selected -> Blend Created | |
| 1 object selected -> Select Objects | |
| 0 or many objects selected -> Select Objects | |
| Select Objects | |
| Blend Created& | |
| Blend Plugin |
| Green* | |
| tick -> Yellow | |
| Yellow | |
| tick -> Red | |
| Red | |
| tick -> Green |