Back to Plugins
Toggle Grayscale Filter

Toggle Grayscale Filter

Toggle the Grayscale Filter in just 1 second. Good for accessibility testing and contrast checking.

Plugin Preview

Toggle Grayscale Filter preview

About this plugin

Toggle Grayscale Filter Plugin Usage Guide


🛠️ How to Use

  1. Create a new Rectangle object in Figma.
  2. Set the Fill color to #000000 (black) in the properties panel.
  3. Change the Blend Mode to Saturation in the properties panel.
  4. Rename the layer to "Grayscale Filter".
  5. Move the layer to the top level in the 'Layers' panel. (📌 Note: The layer must not be inside any Section.)
  6. Resize the Rectangle to cover the area where you want grayscale mode applied.
  7. Run the plugin to toggle the visibility of the "Grayscale Filter" layer.


⚠️ The plugin will not work if:

  1. The object is not a Rectangle (e.g., Circle, Polygon, etc.)
  2. The layer name is not exactly "Grayscale Filter"
  3. The layer is inside a Section (it must be at the top level)


💡 Using with AutoHotkey

You can use AutoHotkey to quickly run the plugin with the shortcut.

Save this script in AutoHotkey and run it. Pressing Ctrl + Y will instantly activate the plugin.

Example script:

^y::
Send, ^k
Sleep, 200
Send, Toggle Grayscale Filter
Sleep, 200
Send, {Enter}
return

Plugin Details

Version2
CreatedFebruary 16, 2025
Last UpdatedAugust 13, 2025
Categoryediting & effects plugins
CreatorChawl
Stats4 installs, 1 likes
PricingFree

Technical Details

  • API:1.0.0
  • main:code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none