https://github.com/alexwidua/figma-plugin-ds-vue

📚 Vue component library that matches the Figma Design System for building Figma plugins.
https://github.com/alexwidua/figma-plugin-ds-vue

figma figma-plugin

Last synced: about 1 month ago
JSON representation

📚 Vue component library that matches the Figma Design System for building Figma plugins.

• Host: GitHub
• URL: https://github.com/alexwidua/figma-plugin-ds-vue
• Owner: alexwidua
• License: mit
• Created: 2020-11-18T20:55:47.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2022-03-02T09:47:05.000Z (over 2 years ago)
• Last Synced: 2024-09-29T06:01:31.753Z (about 2 months ago)
• Topics: figma, figma-plugin
• Language: Vue
• Homepage:
• Size: 741 KB
• Stars: 23
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        






`figma-plugin-ds-vue` is a Vue component library that matches the [UI2: Figma Design System](https://www.figma.com/community/file/928108847914589057) for building Figma plugins. It is based on [thomas-lowry/figma-plugin-ds](https://github.com/thomas-lowry/figma-plugin-ds).

### [View Documentation](https://figma-plugin-ds-vue.netlify.app/)

## ✨ 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](https://figma-plugin-ds-vue.netlify.app/) for details and an overview of all available components

4.  Enjoy building your plugin 💻✨

## 📝 Documentation

Refer to the library's [documentation](https://figma-plugin-ds-vue.netlify.app/) for a detailed overview of each component and its usage.

Quick reference:

-   [Button](https://figma-plugin-ds-vue.netlify.app/docs/components/button/)

-   [Checkbox](https://figma-plugin-ds-vue.netlify.app/docs/components/checkbox/)

-   [Disclosure](https://figma-plugin-ds-vue.netlify.app/docs/components/disclosure/)

-   [Divider](https://figma-plugin-ds-vue.netlify.app/docs/components/divider/)

-   [Icon](https://figma-plugin-ds-vue.netlify.app/docs/components/icon/)

-   [Icon Button](https://figma-plugin-ds-vue.netlify.app/docs/components/icon-button/)

-   [Input](https://figma-plugin-ds-vue.netlify.app/docs/components/input/)

-   [Number Input](https://figma-plugin-ds-vue.netlify.app/docs/components/num-input/)

-   [Radio menu](https://figma-plugin-ds-vue.netlify.app/docs/components/radio-menu/)

-   [Select menu](https://figma-plugin-ds-vue.netlify.app/docs/components/select-menu/)

-   [Label](https://figma-plugin-ds-vue.netlify.app/docs/components/label/)

-   [Text](https://figma-plugin-ds-vue.netlify.app/docs/components/text/)

-   [Textarea](https://figma-plugin-ds-vue.netlify.app/docs/components/textarea/)

-   [Title](https://figma-plugin-ds-vue.netlify.app/docs/components/title/)

-   [Toggle](https://figma-plugin-ds-vue.netlify.app/docs/components/toggle/)

-   [Tooltip](https://figma-plugin-ds-vue.netlify.app/docs/components/tooltip/)

The global stylesheet also includes [style variables](https://figma-plugin-ds-vue.netlify.app/docs/utils/variables/) 🎨 and [utility classes](https://figma-plugin-ds-vue.netlify.app/docs/utils/style-utils/) 🧰 which can be used to format your plugin 🌈

## 🌀 Misc

A great writeup on Figma plugin design & heuristics is [@yuanqing's](https://github.com/yuanqing) **[The UX of Figma plugins](https://uxdesign.cc/the-ux-of-figma-plugins-f4f896f8cf35)** 📚

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

## 📝 License

[MIT](LICENSE)