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.

Scroll through your Instagram feed or peek at your own profile and you'll likely find pixel perfect, high-resolution photos deliberately aged and weathered with analog filters and effects - Tobias van Schneider
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. Use these presets to easily edit your images within Figma. Experiment with different looks, including effects such as grain, and bloom.

What's in the plugin (100+ photo presets):

  • 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
  • Check it out on the Figma community. It's a $10 one-time payment with a 3-day free trial, so you can try it out. Any questions best to email us at support@stylecampaign.com, I'm also on X, and emailgeeks slack as Anna Yeaman.

    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.

    What's next

    Get more of the functionality under the hood in the UI. The priority being more basic adjustments, split tone color and overlay parameters.

    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 for an individual license. There's a 3-day free trial to try it out, you can purchase a license via a link within the plugin. The Figma plugin 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. We use third party service Stripe to process payments.


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

    Use the 'Purchase Plugin' button seen at the bottom, it should disappear once purchased.


    Processed through Stripe

    The 'Purchase Plugin' button at the bottom of the plugin takes you to a page on our website. If you're on Safari on mac you might need to allow pop-ups in your settings/preferences, as it opens a new browser tab. We're using Stripe to process payments, you'll receive a confirmation email after your purchase.

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

    The landing page looks like this, payments processed through Stripe.


    3-day free trial

    Once the free 3-day trial has ended, if the plugin has not been purchased the 'Apply Filter' button gets disabled. Though you can still load images and preview filters. The 'Purchase Plugin' button remains active.

    After a 3-day free trial the 'Apply Filter' button gets disabled, and the 'Purchase Plugin' button remains active.

    After a 3-day trial the 'Apply Filter' button gets disabled, the 'Purchase Plugin' button remains active.


    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