figma-plugin-ds-vue
v2.0.0
Published
Vue component library that matches the Figma Design System for building Figma plugins.
Downloads
15
Maintainers
Readme
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
Install the package
npm i figma-plugin-ds-vue
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'
Import and register the Vue components you want to use, refer to the documentation for details and an overview of all available components
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:
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 👋