Tint & Shade Generator - Figma plugin

Overview

Generate a full set of tints and shades from a base color directly inside Figma. This plugin is the companion to the web version of the Tint & Shade Generator, bringing the same, meticulous color-generation logic to your design workflow.

Installation

Grab the plugin directly from the Figma Community.

Features

• Enter one or multiple hex colors (#hex, hex, or 3-digit shorthand).
• Generate palette frames with base color, tints, and shades.
• Choose step counts (5, 10, or 20).
• Organized Figma layer structure for easy handoff and editing.
• Create local Figma color styles with token-friendly naming.
• Add related palettes (complementary, split complementary, analogous, triadic).
• Toggle # prefix and dark background output.

Output structure

• Hex values are normalized to lowercase.
• Step values use a 100-based scale (100, 200, 300, …).

Layers panel

Tints & Shades
  └─ e96443
        ├─ Base
        │    ├─ Swatch
        │    └─ e96443
        ├─ Tints
        │    ├─ 100
        │    │    ├─ Swatch
        │    │    └─ eb7456
        │    ├─ 200
        │    └─ …
        └─ Shades
             ├─ 100
             │    ├─ Swatch
             │    └─ d25a3c
             ├─ 200
             └─ …

Styles panel

Tints & Shades
  └─ e96443
        ├─ Base
        ├─ Tints
        │    ├─ 100
        │    ├─ 200
        │    └─ …
        └─ Shades
             ├─ 100
             ├─ 200
             └─ …

Local development

Prerequisites: Node.js 18+ and a Figma account.

1. Download or clone the repo.
2. Navigate to the project in your terminal.
3. Run npm install.
4. Run npm run watch (bundles and rebuilds with esbuild on change) or npm run build (one-time esbuild bundle).
5. In Figma: Plugins → Development → Import plugin from manifest….
6. Select the repo's manifest.json.
7. Run via Plugins → Development → Tint & Shade Generator.

Feedback and contributing

If you notice a bug or want to request a feature, please file an issue on GitHub or email me the details.

If you’d like to contribute, comment on an open issue or open a new one describing your approach. Once aligned, submit a PR.

Support this project

Give the plugin a ❤️ on Figma Community.

• Buy Me a Coffee
• Cash App
• PayPal
• Venmo

License

MIT — free for commercial and personal use.