This is a figma plugin to add and customize some pattern used for geographic illustrations.
- Plugin doc
- Bundling with webpack
- webpack example I tried to work with the webpack plugin
npm install
Under tools folder, the script transform.js loads all the svg files inside tools/svg, optimize them with svgo and then extract all defined colors to be customized later.
The plugin use webpack to bundle the code source, run npm run webpack to create dist files.
The manifest.json file defines the plugin name and the code (js/css) locations. so, here, we specify the main js file and the ui file.
{
"name": "YOU_PLUGIN_NAME",
"id": "plugin_id_generated_by",
"api": "1.0.0",
"main": "dist/code.js",
"ui": "dist/ui.html"
}
I tried to build this plugin following the webpack tutorial from figma, but the inline plugin used to put css in the html didn't work. So I used this inline plugin from facebook react-inline-plugin-tool, i just copied the code to avoid installing all the package.
I tried to used parcel before switching to webpack but it was complicated to add all plugins to parcel.