This is a template for writing Figma Design plugins with UI & browser APIs. It uses typescript, react for ui and esbuild for bundling.
First you need to update the manifest.json. Idk if there is a simpler way than generating the basic plugin template in figma by going to plugin > development > new plugin and then creating figma design plugin > with ui & browser APIs. Then you have to save the folder figma generated somewhere and take everything from manifest.json inside it, excluding main and ui options, and put it inside of this repo's manifest.json.
Now you can remove the plugin created by figma (the folder you saved in the step above), and add a new plugin providing manifest.json from THIS repo. To remove invalid plugins go to plugin > development > manage plugins in development. To add go to plugin > development > import plugin from manifest.
Install dependencies
npm i
To just build your plugin run
npm run build
To start development mode (rebuild on change) run
npm run dev
Do not delete src/plugin/run.ts, src/ui/main.tsx and src/ui/ui.html files because they are needed during build step!
Figma plugin API provides css variables for colors used in figma design. You can learn more about it in "CSS Variables and Theming" section of docs
To keep your plugin clean you probably should stick to figma's design system that can be found here.
There are other solutions like figma-plugin-ds that provide ready css styling for things like labels / inputs but you'll have to install it yourself if you decide to use it.