Figma Plugin template with Vue.js
This template recreates the base plugin with UI offered by Figma when creating a new plugin, but implemented with Vue3 and Vite.
Get started
Building the project locally
git clone [email protected]:joaomarcelofm/figma-plugin-template-vue.git
cd figma-plugin-template-vue
npm install
npm startImporting plugin into figma
Open Figma -> Plugins -> Development -> Import plugin from manifest... and choose manifest.json file from your new repo.
Using the template
Development
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.
Deployment
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.
Features
Useful resources
Contributing
Contributions are welcome! However, it's important to maintain the template's simplicity, avoiding opinionated features that are only relevant for some use cases.
Support
If you benefit from this template and can support me, I'd be very grateful!
