Figma Image Filters plugin

In the last few years we've seen more demand for animation and short-form video. After a stint with After Effects templates we decided to work on a purpose built motion tool that we can use internally. For now we've called it "Drift", anyway Drift has a color panel which supports LUTs and comes with a collection of pre-made image filters.

Image filters Figma plugin.

Figma Image Filters plugin


A bit of Photoshop in Figma

Which led to the thought that I'd like to be able to use those filters in Figma. Email designers have typically worked in Photoshop, though more of us are moving to Figma or using both. At first I thought I could take the LUTs I'd created for Drift and import them into Figma, but we went the WebGL shader route instead. Check it out on the Figma community.

What's in the plugin

  • Adjust (17)
  • B&W film (13)
  • B&W tints (14)
  • Bloom (14)
  • Duotone (10)
  • Grain (3)
  • Sonochrome (17)
  • Split tone (15)
  • Customize

  • Intensity
  • Highlight rolloff
  • Shadow lift
  • Blur
  • Overlay on/off
  • Grain on/off
  • Grain intensity
  • Grain size
  • Grain color

Adjust presets

  • Classic s-curve
  • Cool shadows
  • Crush & lift
  • Drama
  • Fade
  • Faded green shadows
  • Green midtones
  • Highlights contrast
  • Matte
  • Midtone brightness boost
  • Midtone compression
  • Moody
  • Original no effect
  • Shadows only contrast
  • Smooth shadows
  • Warm highlights
  • Zero contrast

  • Experiment with B&W film presets, fade, grain, and bloom.


    8 preset collections with a total of 103 presets.

    8 preset collections with a total of 103 image presets.


    Select your image to load it into the plugin, choose a preset, hit apply filter.

    Select your image to load it into the plugin, choose a preset, hit apply filter.


    Highlight rolloff & shadow lift are in the UI and can be adjusted separately. They help to create a more film-like look

    Highlight rolloff & shadow lift.

    Blush preset 73% intensity, one of 14 bloom presets. Others include candlelight, ghostbusters, red mist and neon pink. I want to add more bloom parameters to the UI on the next update, for now pick a bloom preset and adjust the Intensity

    Blush preset 73% intensity, one of 14 bloom presets.

    Some of the 13 B&W film presets, these are loosely based on real film stocks. Though I'm more interested in certain looks, than true film emulation like Dehancer or Filmbox.

    B&W film presets, more "loosely based on" than true film emulation like Dehancer.

    Soft negative preset, there's also partial negative (just shadows) and solarization presets inspired by Lee Miller and Man Ray found in the B&W film and tints collections.

    Soft negative preset, also solarization presets inspired by Man Ray & Lee Miller.

    A B&W image with a lot of grain applied. Grain parameters are in the UI under their own tab. You can add grain to any image, or edit the grain that comes with any preset (B&W film presets all have some grain by default and a few of the bloom presets). Grain has on/off, intensity, size and color parameters for now. I plan to add sliders to adjust the amount of grain in the shadows, midtones and highlights.

    Grain has on/off, intensity, size and color parameters.

    Adjust is a collection of 17 presets including fade, cool shadows, crush & lift, and more.


    Limitations

    You don't have access to all the preset parameters, there's 30+ so it's a lot to put in the UI. You can currently customize intensity, highlight rolloff, shadow lift, blur, overlay on/off, grain on/off and grain intensity, size and color.

    Delicatessen split tone preset 100%

    Delicatessen split tone preset 100%, dial back using the intensity slider.


    Payment & privacy

    It's a $10 one-time payment, with a 3-day free trial. You can purchase a license via a link within the plugin. It automatically gets flagged as paid, no license keys required. The plugin and your image assets are private to you, and you can use it for commercial projects.


    There's a 3-day free trial, use the Purchase Plugin button seen at the bottom of the plugin, it should disappear once purchased

    'Purchase Plugin' button should disappear once purchased.


    Processed through Stripe

    The 'Purchase Plugin' button takes you to our website. If you're on Safari on mac you might need to allow pop-ups in your settings/preferences. We're using Stripe to process payments, you'll receive a confirmation email after your purchase. No-questions-asked refunds, email us.

    After the 3-day free trial the 'Landing page looks like this, payments processed through Stripe.

    Landing page, payments processed through Stripe.


    Support

    Any questions best to email us support@stylecampaign.com. I'm also on X @stylecampaign, and emailgeeks slack as Anna Yeaman.

    Cool stuff I found along the way