/vue-figma-starter

A boilerplate for creating Figma plugins using Vue 3, Vite, Pinia, and Tailwind CSS. Simplifies UI development and Figma API integration.

Primary LanguageJavaScriptMIT LicenseMIT

Figma Plugin Vue Starter

A starter template using Vue 3 and Vite for developing Figma plugins.

Table of Contents

Getting Started

  1. Ensure you have Node.js installed.
  2. Clone this repository. Navigate to your development folder and run 
    git clone https://github.com/antonijap/vue-figma-starter.git your-plugin-name
  3. Install the dependencies 
    npm install
  4. This script will ask for your plugin name and do some maintenence (optional) 
    npm run reset
  5. Start the development server 
    npm run watch
  6. Open src/App.vue to start coding the Plugin UI and Figma/code.js to interact with Figma API.

Importing to Figma

Go to plugins and import plugin with the manifest.json file. The manifest is located in the root of the folder.

Publishing a Plugin

Consult with Figma's documentation for a detailed guide on how to publish your plugin to the Figma community. Remember to generate a new ID field for the manifest.json when you are ready to publish.

Libraries Included

✅ Vue 3

✅ Pinia 2

✅ Tailwind 3

Contribution

This project is open to contributions and improvements from the community! We believe that collective knowledge can create the best tools. If you have ideas for enhancements, new features, or spot any bugs, don't hesitate to submit an issue or a pull request. If you have any questions, need help getting started, or simply want to discuss something, feel free to reach out at hi@apek.me. Let's make this project better together!

License

This project is licensed under the terms of the MIT license. See LICENSE for more details.