Welcome to Meng Design — where I share clear and digestible tutorials that help product and web designers build stronger design skills and achieve results more efficiently with modern, practical tools.
Design doesn’t have to be intimidating.
This week we dive into DNA-style rotating line graphics.
LEARN DESIGN
Think you need 3D software to create a DNA-style effect like this? What if .... You can faked it in Figma? 🧬
✨ Here’s how I did it (step-by-step)
Rotating blend lines cover
🎁 Grab your starter file and follow along!
Video Tutorial is linked below.
Step 1 - Create a wave
Draw a long line (~2000px).
Add points across the line.
Push odd points up, even points down.
Then bend the points into smooth waves. 🌊
Use command + click to bend the points
Step 2 – Offset the wave
Duplicate the wave line.
Shift it sideways (10 nudges).
You now have two parallel waves. This offset is the secret sauce for the 3D look.
Use shift → key to move the line
Step 3 – Color time!
🎨 Choose your poison here, either would works.
Group 1 → apply gradients.
Group 2 → flat colors (yellow + blue).
⚠️ Tip: Vector Blender can’t blend between two separate gradients.
Apply colors to the grouped lines
Step 4 – Vector blending magic
Open the Vector Blender plugin.
Select start + end lines → generate 10 copies.
And.. Flat lines suddenly look alive!
Use Vector blender to create 10 copies in between
Step 5 – Structured the graphic
Duplicate the blended group.
Flip vertically.
Stretch it out (≈256px tall × 3300px wide).
Now it’s starting to look like DNA 🧬
Put the rotating line inside the frame
Step 6 – Final touch
Mask out the awkward transition areas for a cleaner look.
Mask out the transition area so it’s more 3D looking
Step 7 – Tada!
And here’s the result 👇 I’m team color combos 💛💙 but Which version do you prefer?
And if you try this yourself, tag me! I’d love to see your take.
Color combo and gradient rotating lines.
Watch on Youtube
Like and share the video.
Leave a comment if you got any questions!
EXTENDED LEARNING
Things to know about Vector Blender
I love vector blender, probably one of my frequent used plugin in figma, and I truly love it, it feels magical. But it does has some limitation to learn before you get the desired result, otherwise you get frustrated.
Here to list a few:
It doesn’t blend the bezier handle
Vector point number must match
Must be same shape, circle to circle, square to square, but you can always flatten it and make it a vector, so the only thing you need to be aware of is point#2
No gradient blending, but single color will do. (like this tutorial here)
I talk about these rules in my other videos, so if you are intrigue how the plugin works, make sure to check them out. These graphics can easily be the highlight of your hero section.
Vector blending pattern - this one is comprehensive on the rules
Vector blending lines - this one is another interesting use case
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.