You can apply a color tint to your product images by creating a tint layer in Figma and controlling its color directly in Cropink.
This allows you to:
unify the look of your creatives,
create seasonal color themes,
highlight certain product groups,
or change tint color dynamically using Conditional Properties.
💡 Tip: For best results, use transparent PNG product images with no background. This makes the tint effect much more natural and visually clean.
Step 1: Prepare a tint layer in Figma
In your Figma design, add a new rectangle (or any shape) that covers the entire product image area.
Name it clearly — for example:
tint_overlay
Set its opacity to 100% (full color).
Add the tint layer to Manageable Layers in the Cropink plugin and publish your design.
In Cropink, under Properties change its Blending Mode (very important!) to one of the following:
Multiply
Overlay
Color
Soft Light
Most users choose Multiply or Color for the most natural tinting effect.
Step 2: Assign the tint color in Cropink
Open your project → select your design.
Click Edit in Design Manager → open Manageable Layers.
Find the
tint_overlaylayer.Click the + icon → choose Fill Color.
Set the base tint color, for example:
#FFAA00 (warm tone)
#222222 (dark fashion look)
#00BFFF (cool summer tint)
This becomes your default tint.
Step 3: Change tint color using Conditional Properties (optional)
You can also dynamically change the tint color depending on product data — for example:
brand
color
discount percentage
or any other field stored in custom_label_X / cropink_label_X
Example rule based on gender:
if cropink_label_0 equals "women" then Fill Color #F7CCE5
Another rule for men’s products:
if cropink_label_0 equals "men" then Fill Color #222222
Or rule for discounted items:
if discount_percentage > 30 then Fill Color #FF3B3B
As many rules as you need can be added.
Step 4: Save & preview
Click Save Changes and preview your output.
Your product photos now have a tint overlay that automatically adapts to your data rules.
💡 Tip: You can play around with tint intensity by modifying opacity settings of the ting layer back in FIgma project.
✅ That’s it!
You’ve successfully added a tint overlay to product images and made it fully dynamic with the help of Conditional Properties in Cropink.