FireFox is blocking Twitter content

To view content on tw-rl, follow these steps...

  1. Click on the shield in the address bar.
  2. Toggle the switch at the top of the panel.
Sign In →
Sign In →
Read Thread
Last week, I came across a simple trick to emulate auto-tinting inside Figma based on any background color. Particularly useful when you are designing for dynamic themed UI (Material You for example). 🧡 Here's a mini thread on how to achieve this effect:
TLDR: This is a pure blending mode play β†’ 4 fills. 1. Put a frame around the elements you want auto-tint on. I have taken a icon & text layer for simplicity. 2. Draw a rectangle (any size) & mask it over the above content frame. Making it a component β†’ optional/as per need.
3. To the auto-tint layer/rectangle: a. Add a White fill with Difference blending mode. b. Add another White fill with Saturation blending mode. Difference inverts your layer colors depending on background. Saturation limits them to greyscale only. But contrast? not yet! πŸ™
3. To the auto-tint layer/rectangle (contd.): c. Add another White fill with Overlay blending. d. Add one last Black fill with Overlay blending. These two fills will now counter the previous two fills to provide enough contrast, no matter what the BG color. Contrast fixed! πŸŽ‰
Play around with the blending modes of the auto-tint layer to create different effects. Here's an example of how you can achieve cool complementary effects just by turning off the Black fill Overlay (Step 3b) & White fill Saturation (Step 3d). Cheers! All inputs welcome πŸ₯³ RT

My Notes:

Select to add to your #gallery:
Rahul βˆ΄Λ˜πŸ”ΈΛ˜βˆ΄

Pro Curator

$99 /yearPay what you can