Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nathakits/spottie-figma-plugin
Spottie - A plugin for inserting Spotify artists and track images directly in Figma
https://github.com/nathakits/spottie-figma-plugin
artists figma-desktop figma-plugin javascript plugin spotify tailwind vue
Last synced: about 6 hours ago
JSON representation
Spottie - A plugin for inserting Spotify artists and track images directly in Figma
- Host: GitHub
- URL: https://github.com/nathakits/spottie-figma-plugin
- Owner: nathakits
- License: mit
- Created: 2021-02-01T16:55:45.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-04-17T18:48:29.000Z (over 3 years ago)
- Last Synced: 2023-03-05T15:26:07.569Z (over 1 year ago)
- Topics: artists, figma-desktop, figma-plugin, javascript, plugin, spotify, tailwind, vue
- Language: Vue
- Homepage:
- Size: 8.2 MB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Spottie is a Figma plugin for inserting album, artist and track covers directly into your designs using Spotify API
Figma plugin built with Vue.js and Tailwind
## Download
Install in Figma
https://www.figma.com/community/plugin/946462676168136646/Spottie
## Basic Usage
In Figma select main menu -> Plugins -> Spottie
- Browse or search for album, artist and track covers
- Click on the image to insert
## Features
- New releases on plugin start up
- Search album, artist and track covers
- Insert single image with single click
- Long press on an image to enable multi-select mode
- Selected object(s) in the canvas will get replaced with the inserted image(s)
- Browser-level image lazy-loading
- Bonus! In the Tracks tab, double-click on any thumbnail to listen to the preview track!
## Coming soon
- Search Podcast covers
- Random image insert
## Installation and build setup
The project is separated into 2 sections. The main Figma code and the UI which is based on Vue and Tailwind.
### Spotify
This project uses Spotify API so you need to get a Spotify developer account.
Create a new Spotify app and get the `Client ID` and `Secret Key` to generate the access token.
#### For main Figma code
```bash
# install dependencies
$ npm install
# serve in watch mode
$ npm run watch
# build for production
$ npm run build
```
#### For UI
```bash
# install dependencies
$ npm install
# serve with hot reload at localhost:8080
$ npm run serve
# build for production
$ npm run build
```
## [UI Setup](UI/README.md)
Check out [instruction to setup Figma Plugin UI](UI/README.md)
## Figma setup guide
You can find instructions at: https://www.figma.com/plugin-docs/setup/
## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
## License
MIT [](LICENSE)