Thread by @aleksliving

Quick Tutorial + Figma file ✨

Super easy way to add a chromatic aberration effect to any layer in your Figma project. Legggo ↓

This first part will break down the fundamentals behind the effect. This will work on simple shapes & text layers. For this example, I will use this really round rectangle

Duplicate your layer 3 times, and fill each one with RGB

Select all layers, stack them on top of one another, and set the blend mode to "Screen"

Nudge the top and bottom layers around until you achieve an effect you're looking for. You're pretty much done, and can stop here (or not 🤨)

👨🏻‍🍳 Pro tip: If you want to create a smoother transition, you can select all layers and apply a layer blur (I'm using a value of 5 for this example)

The process of adding this effect to an image is very similar:

- select your image, add a fill (one of the RGBs) & set the fill's blend mode to "Multiply".
- duplicate the image & repeat this process for next RGB color
- stack layers, set blend to screen, displace, & add a blur

Hope this was helpful! If you need more help, you can grab the Figma file here → dub.sh/chromatic