This template recreates the base plugin with UI offered by Figma when creating a new plugin, but implemented with Vue3 and Vite.
git clone [email protected]:joaomarcelofm/figma-plugin-template-vue.git
cd figma-plugin-template-vue
npm install
npm start
Open Figma -> Plugins -> Development -> Import plugin from manifest... and choose manifest.json file from your new repo.
The ui.vue is the main component that will generate the Plugin's UI, you can use it directly or create children components (as the sample-component.vue provided) to create your views.
Vite will compile your application and output a Figma ready code in dist/src/ui.html.
When running npm start your application will be compiled on save, but you can also build a production ready application running npm run build.
* The manifest.json file in this template doesn't include an id for the plugin. This information will be provided by Figma at the time of publishing the plugin which then should be included to your project's manifest.
- Create Figma Plugin (Utilities & Recipes)
- UI with Figma DS
Contributions are welcome! However, it's important to maintain the template's simplicity, avoiding opinionated features that are only relevant for some use cases.
If you benefit from this template and can support me, I'd be very grateful!
