Hello Friends,
I am back from the trip. I went to Alaska last week, with princess cruise. On boy, that cruise is gigantic. Can you believe it has 18 decks (it's 18 floors on land.)? I can still maintain a healthy 15,000 steps everyday on that ship.
Okay, enough of chi-chatting. This week we keep spinning, like the Sufi dancer from Turkey. (Look it up, if you have no idea what I am talking, they are incredible.)
The swirling graphic essentially just a way to flex. 😉 But yeah we designers just love this kind of vanity stuff. It makes us happy and proud. So put it on your website and FLEX!
LEARN DESIGN
Swirling graphics look complex—but they’re pretty simple to build in Figma. Here’s how to create a soft spiral effect using a partial circle, gradients, and a transformation plugin.
🎁 Grab your starter file here and follow along!
Video Tutorial is linked below.
Step 1 - Prepare an arc
Start with a 360px circle.
Remove the fill and add a 6px stroke
Delete two anchor points to keep ¼ of the shape
You now have a clean arc.
A clean arc.
Step 2 – Apply gradient
Apply a white-to-transparent gradient on the stroke. This gives the swirl a nice tapering effect.
Apply a diagonal white-to-transparent gradient
Step 3 – Open the plugin
Now open the TransformMe plugin.
Set scale to 96%
Add around 40 copies
Adjust the anchor point to bottom right
Tweak the rotation angle until it feels fluid.
This will give the spiral its motion.
Configure the settings in TransformMe plugin.
Step 4 – Tada!
That’s it. One arc with Gradient stroke, and the use of smart transformation. A simple swirling pattern, built entirely in Figma.
Let me know if you try it out.
Final result of one swirling graphics
Step 5 –
Paste your masterpiece into your layout and flex your design muscles. 💪
2 more swirling graphics are covered in the tutorial, don’t forget to tune in!
Swirling graphics in action.
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.