Apple Music app - Figma
Ajay Pawriya
Like this project
Posted May 7, 2024
Recreating iMusic player screen's vibrant screen in Figma
Likes
0
Views
57
Tried to recreate Apple Music app's UI in Figma. It was definitely a challenge to understand all the effects and extensibility that went into it.
The screen background and the on-screen elements color are dynamic based on the Song/Playlists' thumbnail. It picks up Dominant colors from thumbnail and applies them to the animated Mesh Gradient background in the back.
To pick up Dominant colors in Figma, I used a website https://onlinejpgtools.com/find-dominant-jpg-colors . And then Used Mesh gradients plugin in Figma to make the background.
For dynamic text and icons color, it uses blend mode. For me, the "Plus Lighter" blend mode worked just fine for this. It looks super beautiful with Mesh background in the back.
The idea was to recreate this in such a manner that it is fully extensive and can be easily put into production. With some APIs and animated keyframes, the product will look absolutely beautiful.