Hello Friends,
Last week, I gave a speech on the topic of App design 101 in an iOS development class at Apple regional training center. It was an honor to be invited over as a guest speaker. This is my first speaking event and it's a huge milestone for me as a person who suffer from social anxiety. So I'd like to celebrate with you and share the joy in this newsletter.
I will be recording the lecture in English and put it on Youtube in the near future. And because of this event, my video schedule was a little bit late. Therefore, next week, I cannot be certain if a video will be released. I will do my best to record and release, however, I sought to prepare every video material that is fully experimented. Hence, if you don't see me showing up in your inbox next week, don't worry, I will catch up with you in the next one.
Now, let's talk about everyone's favorite: Gradient.
LEARN DESIGN
Liquid gradients are flexible. It can be bold but also subtle, depending on the techniques you apply to them. They can be used for backgrounds or layered textures.
Let’s go over a simple technique using blur, liquify, and gradient mapping—all inside Figma.
🎁 Grab your starter file and follow along!
Video Tutorial is linked below.
Step 1 - Prepare the base
Start with grayscale strokes.
Make a 1024×1024 frame
Use the pencil(or brush) tool to sketch wide strokes ( I use 100)
Stick to grayscale—white, grey, black
Don’t worry about precision. You’ll blur it all next.
Use strokes of neutral colors.
Step 2 – Blur it all
Apply a strong blur.
Select all strokes and Max out the layer blur
Cmd + Shift + C to copy as image
You’ll end up with a soft, misty abstract shape—this is your base.
Blur all strokes.
Step 3 – Distort with Liquify
Time to distort it.
Use the Liquify plugin
Brush size: 200–500 (no smaller than 200)
Rate 50, Density 100 (play with your liking, this is what I like)
Use long strokes to move things around, go crazy here
This gives the shape a liquid, painted texture.
Use Liquify plugin to distort the imagery.
Step 4 – Add noise
Add noise, then copy again.
Add subtle grain to the blurred image
Copy as imagery again
‼️ This helps the grains to be mapped to the gradient later. And it will look drastically different, trust me on this one.
Add grain texture onto the imagery.
Step 5 – Apply gradient map
Then use a gradient map plugin to remap the grayscale values to colors you like. I use Gradient Mapper.
I like to limit the color stops to 3-4, but you can play around.
Use gradient mapper plugin to apply color.
Step 6 – Tada!
That’s your liquid gradient.
Sketch with pencil
Blur and liquify
Add noise and remap with color
Simple flow, endless outputs.
Final result in action.
This is a simpler version of making a gradient texture, if you like it to be used in the background, like the one underneath, I teach other techniques to soften it out further in the tutorial, go check that out!
Liquid gradient as background.
Watch on Youtube
Like and share the video.
Leave a comment if you got any questions!
Thanks for reading!
If the design tips saved you time or gave you an idea, share this email to a friend who’d love it too. They can join here for free!
New here? Subscribe to get next week’s design shortcut
P.S. Got a design problem you’d like me to cover? Just hit reply — I read every message.