Mac icon replication in Figma

This week, I replicated a Mac app icon that I found on Dribbble. Here’s the original file:

It’s a gorgeous, soft-3D icon in the modern style of Mac.

Here’s my version:

I began with making the grid, which turned out to be more complex than a radial gradient:

My vector design class from university came useful! I used (and improved) my pen tool skills while tracing the vector shapes of the musical note and sparkles.

The hardest part was getting the lighting right within the shapes. My favorite trick was messing with “inset shadows”, which allow for distinctive soft lighting.

I’ve never messed with inset shadows before and I learned this skill while replicating the icon. It’s curious how using shadows, you can replicate all sorts of light situations on top of items.

The last step was using a noise generator in Figma to make the grainy effect of the original icon.

As for the flaws, I’m aware the color of the gradients isn’t exact. I decided to make my peace with it.

I loved replicating this. In total, it took three days, but I’m sure I could’ve done it in one if I focused right.

I'll keep doing these replications in the future. I'm working on an app icon for Timeline and I want it to be in this style. It's likely I'll borrow many ideas from it.