Invert Colors

About this plugin

Description

Invert Colors is a Figma plugin designed to help designers quickly experiment with color inversions in their designs. Whether you're exploring dark mode alternatives, creating visual effects, or simply need to invert colors for accessibility testing, this plugin makes the process effortless.

Key Features

1. Real-time Preview: See color inversions instantly before applying changes
2. Batch Processing: Invert colors for multiple selected items at once
3. Smart Color Handling: Works with solid colors, gradients, and images
4. Non-destructive Workflow: Preview changes before committing

What Gets Inverted

1. Solid Colors: RGB values are inverted (e.g., black becomes white)
2. Gradients: All gradient stops are inverted while maintaining the gradient structure
3. Images: True inversion for image fills by processing pixel data.
4. Strokes: Both fills and strokes are processed

ㅤ

ㅤ

User Guide

➊ Select Your Elements

1. Open your Figma file
2. Select one or more elements you want to invert:
3. Shapes (rectangles, circles, polygons, etc.)
4. Text layers
5. Frames or groups
6. Components or instances

Tip: You can select multiple items at once to batch process them.

ㅤ

ㅤ

➋ Launch the Plugin

1. With your elements selected, open the plugin:
2. Go to Plugins → Invert Colors
3. Or use the Quick Actions menu (Cmd/Ctrl + /) and search for "Invert Colors"

ㅤ

ㅤ

➌ Preview Your Changes

1. The plugin window will open with a Preview checkbox enabled by default
2. Your selected elements will immediately show the inverted colors
3. Toggle the Preview checkbox on/off to compare before and after:
4. Checked: See the inverted colors in real-time
5. Unchecked: Return to original colors

Note: Preview is non-destructive - your original colors are preserved until you click Apply.

ㅤ

ㅤ

➍ Apply or Cancel

Once you're satisfied with the preview:

1. Click "Apply": Permanently apply the color inversion to your selected elements
2. Click "Cancel": Close the plugin and revert to original colors

ㅤ

ㅤ

➎ Undo if Needed

If you applied the changes and want to revert:

1. Use Figma's undo function (Cmd/Ctrl + Z)
2. Your original colors will be restored

ㅤ

ㅤ

☻ Usage Examples

Creating Dark Mode Variants

1. Duplicate your light mode design
2. Select all elements in the duplicate
3. Run Invert Colors to quickly generate a dark mode starting point
4. Fine-tune as needed

Accessibility Testing

1. Select UI elements
2. Use Invert Colors to test contrast and readability
3. Identify potential accessibility issues

Creative Effects

1. Select specific design elements
2. Invert colors for artistic or dramatic effects
3. Combine with other Figma features for unique results

ㅤ

ㅤ

Need more design tools? Visit Samolevsky.com to discover more plugins and resources.