https://github.com/craigmdennis/figma-apply-colors-to-selection

figma generator plugin random swatches typescript

Last synced: about 2 months ago
JSON representation

Apply a set of colors randomly to a selection

Host: GitHub
URL: https://github.com/craigmdennis/figma-apply-colors-to-selection
Owner: craigmdennis
Created: 2020-03-27T10:39:12.000Z (about 5 years ago)
Default Branch: master
Last Pushed: 2025-02-13T09:38:05.000Z (3 months ago)
Last Synced: 2025-03-20T18:58:51.538Z (about 2 months ago)
Topics: figma, generator, plugin, random, swatches, typescript
Language: TypeScript
Homepage: https://www.figma.com/community/plugin/830583682222038085/Apply-Colors-to-Selection
Size: 993 KB
Stars: 4
Watchers: 1
Forks: 0
Open Issues: 4
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml

README

![](./assets/figma-cover.png)

# Apply Color to Selection

1. (Optional) Before opening the plugin, select the element(s) who's fill color you want to use as a swatch.

2. Open the plugin and add/remove any swatches you want. Adding a new one will generate a new random color.

3. Back on the canvas, select all the elements you want and hit "Apply Colors". The selection will be filled randomly using the swatches.

![Github Heat Map Demo](./src/assets/figma-plugin-github-heatmap-demo.gif)

The plugin doesn't automatically close so you can hit "Apply Colors" as many times as you like.

**HINT**: If you want more of one color than any others, add more swatches of that color.

---

## Build instructions

First clone the repository and install the dev dependencies:

```
git clone [email protected]:craigmdennis/figma-apply-colors-to-selection.git
cd figma-apply-colors-to-selection
npm install
```

Then compile the source files:

```
npm run watch
```

The main plugin code is in `src/code.ts`. The HTML for the UI is in
`src/ui.html`, while the embedded JavaScript is in `src/ui.ts`.

These are compiled to files in `dist/`, which are what Figma will use to run
your plugin.