This design engineering tutorial recreates Wojciech Zieliński's glass arrow button layer by layer in Figma — strokes, blur, shadow, and surface feel — before the SwiftUI build in Chapter 2. It is for designers and engineers who work in both Figma and code.
I was practicing simple interactions in SwiftUI — small playground builds, recreating whatever caught my eye. Then I stumbled on this post from Wojciech Zieliński: The dawn of new aesthetics.
It impressed me enough that I wanted to build the glass arrow in SwiftUI. But I always start in Figma first — break the layers down, get the strokes, blur, and shadow right, then carry that into code. That's usually how I go about these.
The Figma breakdown is below. Chapter 2 covers the SwiftUI build.
Chapter 1: the design
The base
So when I started breaking down this, I took an exact size of the post so that I can get closer to the actual one but in my post I took the only arrow one so we will be focusing more on that one.
The gradient
- Start with a 1024 × 1024 artboard. Square, clean, lots of room to breathe.
- Now drop in a fill. We're going for that smoky, slightly metallic backdrop — the kind that makes a glass button actually look like glass when it sits on top. A flat color won't do it; we need a gradient with a bit of dimension.
- Set the fill to Linear, then open the gradient editor. Four stops, all dark-to-mid grey, running diagonally across the canvas: 0%
#43505929%#5D6A7259%#78858D100%#747B81 - The trick here is the diagonal. A top-to-bottom gradient feels flat — too "wallpaper." Angling it from bottom-left to top-right gives the surface a sense of light direction, like there's a soft source coming from the top corner.
The Core
Now since we have made the base, now we need to make the core part. The circular button, So buckle up.
The shape
Now we drop in the actual button shape. 512 × 512, sitting centered on the backdrop.
Layout — 512 × 512, clip content on. Half the size of the artboard, which gives the button real presence without crowding the edges.
Appearance — corner radius set to 297.56. That's not a random number — it's tuned to give the shape that softened-square feel. Not a perfect circle, not a rounded rectangle. Somewhere in between, where the corners feel almost organic. The kind of curve that makes the shape feel touchable.
Inside stroke 1
- Add an inside stroke — weight 0.31. Thin enough to read as an edge catch, not a border.
- Set it to Linear. This first one runs along the top edge — a soft white highlight that fades out before it wraps around the sides: 0%
#FBFCFE100%#888888 - Keep the start stop at full opacity and the end stop at 0% opacity. You want a whisper of light, not a hard rim.
Inside stroke 2
- Duplicate the first stroke setup — same inside weight of 0.31, same linear type.
- Use the same gradient stops as before, but rotate the angle so it runs top to bottom instead of across the top edge. This adds a vertical lift on the face of the button.
- Two soft highlights at different angles start to sell the convex surface — like light is hitting the top-left corner of a real object.
Inside stroke 3
- Add a third inside stroke — still 0.31. Now we're building depth on the opposite side from the highlights.
- Switch the gradient to a dark steel fade running from the bottom-left corner inward: 0%
#000000100%#252D33 - Start at 0% opacity on black and end at full opacity on #252D33. Angle it diagonally from bottom-left toward the center — this grounds the button on the surface.
Inside stroke 4
- One more inside stroke — same 0.31 weight, same dark gradient as the previous step.
- This one sits on the bottom edge, reinforcing the weight of the button. Same stops: 0%
#000000100%#252D33 - Four strokes total — two light, two dark — and the flat grey blob suddenly has dimension. The ring is done.
Drop shadow
- Open Effects and add a Drop shadow. This is what lifts the button off the steel backdrop — without it, everything still reads flat.
- Set Position to X 0 and Y 57.46. Pure vertical offset — the shadow falls straight down, like the button is floating just above the surface.
- Push Blur to 205.21 and leave Spread at 0. That huge blur radius is what makes it feel like ambient light, not a hard Photoshop drop shadow.
- Color: #000000 at 25% opacity. Subtle. You should feel the depth before you notice the shadow itself.
- Turn on “Show behind transparent areas” so the shadow renders correctly around the rounded shape. Done — the button finally has weight.
Inner circle fill
- Position the core at X 53.35 and Y 138.52. Set the layout to W 408.37 × H 420.68 — centered on the artboard with enough margin that the shadow and strokes have room to breathe.
- Switch the fill to Linear. Two stops, darker steel at the top easing into a lighter grey at the bottom: 0%
#7A858B100%#A3ACB3 - Keep both stops at full opacity. The gradient angle does the convex read — you want a soft shift in value, not a fade to transparent.
- Still reads quiet — the shift is subtle. Stay with me — this is the canvas every other layer is going to live on.
Inner circle fill and blur
- Open Effects and add Layer blur. This is what turns the flat gradient face into frosted glass — the backdrop softens through the shape instead of reading as a solid fill.
- Set the mode to Uniform and push Blur to 46. Uniform keeps the diffusion even across the whole surface; progressive would pull the falloff to one edge and fight the convex read we already built.
- The outer stroke stays sharp while the interior diffuses. That contrast — crisp rim, soft body — is the whole glass trick. The inner face is done — now finish the core with an outside stroke on the same Outer frame.
Outer outer stroke
Back on the Outer frame — 512 × 512, the same wrapper the inner face lives in. Add an outside stroke and a drop shadow to close out the core.
- Select the Outer frame — 512 × 512, the wrapper that holds the inner face, blur, and inside strokes.
- Add an outside stroke — weight 8. Position it Outside, not Inside. Color: 100%
#5F6A6F - Set corner radius to 287.295. Slightly tighter than the inner 297.56 — the outer edge reads as its own curve, not a copy of the inner one.
- Open Effects and add a Drop shadow on the Outer frame: Position X 0, Y 60. Blur 220, Spread 0. Color #000000 at 25% opacity.
- This shadow sits on the container, not the inner shape — it lifts the entire core off the backdrop. The core is done.
The arrow
Last piece — the icon itself. An upward arrow sitting centered on the glass face, with its own stroke and shadow so it reads crisp against the blur.
The arrow
- Drop in the arrow vector — W 127.23 × H 150.83, positioned at X 192.82 and Y 180.59. Centered on the face, pointing up.
- Add a center stroke — weight 20, round cap. Set it to Linear with two stops, grey at the base fading to near-white at the tip: 0%
#B1B8BC100%#FEFEFD - Keep both stops at full opacity. The gradient runs along the stroke path — light catches the top of the arrow, the shaft stays quieter.
Drop shadow
- With Vector 1 selected, open Effects and add a Drop shadow. This separates the icon from the frosted face — without it, the arrow melts into the blur.
- Set Position to X 0 and Y 8. A small vertical offset — the shadow sits just beneath the stroke, not floating far below.
- Push Blur to 25 and leave Spread at 0. Tighter than the button shadow — the icon is smaller, so the falloff should be too.
- Color: #000000 at 25% opacity. Same recipe as the other shadows — subtle, felt before it's seen.
- Chapter 1 is done — the button matches the tweet.
the final revision
about the author
I'm Vikas Raj Yadav — designer/engineer hybrid based in Bengaluru. Design engineering clicked in college after a Google article on UX engineering. I kept circling SwiftUI from 2018, mostly in Figma and simple layouts, until a car accident made me ask whether I'd done the work I actually cared about. I took a consulting break, went deep on SwiftUI, and got sharper by recreating whatever caught my eye — app interactions, posts on X, small playground builds.
This article is that habit applied to Wojciech's glass arrow: Figma first, then the feel in code. Chapter 2 covers the engineering side. Follow on X for the next one.