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

# install dependencies
$ npm install

# serve in watch mode
$ npm run watch

# build for production
$ npm run build

For UI

# install dependencies
$ npm install

# serve with hot reload at localhost:8080
$ npm run serve

# build for production
$ npm run build

UI Setup

Check out instruction to setup Figma Plugin UI

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