figma-plugin-ds-vue

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

✨ 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

⚠️ The documentation is currently outdated. The component names changed, the 'Fig' prefix was removed (ex: <FigSelect/> → <Select/>)

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

Quick reference:

• Button
• Checkbox
• Disclosure
• Icon
• Icon Button
• Input
• Label
• Radio
• Select
• Toggle
• Text
• Textarea
• Title

TODO: NumInput, Tooltip

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

🚧 Roadmap

This project is a work-in-progress, here's a small roadmap:

⬜ ⚠️ Update documentation to reflect changes introduced in 1.2.3
...
⬜ Update the library to Vue v3.x (since v-model changed with Vue 3 this would introduce breaking changes)

🌀 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