figma-plugin-ds-vue is a Vue component library that matches the UI2: Figma Design System for building Figma plugins. It is based on thomas-lowry/figma-plugin-ds.

View Documentation

✨ Installation

1. Install the package npm i figma-plugin-ds-vue

2. Include the global stylesheet in your app (either on component-level or make it accessible globally by importing it to your app's entry file, ex: main.js)

   import 'figma-plugin-ds-vue/dist/figma-plugin-ds-vue.css'

3. Import and register the Vue components you want to use, refer to the documentation for details and an overview of all available components

4. Enjoy building your plugin 💻✨

📝 Documentation

Refer to the library's documentation for a detailed overview of each component and its usage.

Quick reference:

• Button
• Checkbox
• Disclosure
• Divider
• Icon
• Icon Button
• Input
• Number Input
• Radio menu
• Select menu
• Label
• Text
• Textarea
• Title
• Toggle
• Tooltip

The global stylesheet also includes style variables 🎨 and utility classes 🧰 which can be used to format your plugin 🌈

🌀 Misc

A great writeup on Figma plugin design & heuristics is @yuanqing's The UX of Figma plugins 📚

This project is based on thomas-lowry/figma-plugin-ds. It also includes refactored components of Morglod/figma-vue-boilerplate, a project which basically kickstarted the development of this one. S/o to these amazing humans 👋

📝 License

MIT