Spotify Remix
When deciding what to do for my first jump into Figma, I spent some time going back and forth on what would be a simple, but educational project. I wanted something that would let me stretch my designer legs while also giving me the opportunity to learn the workflow and experiment with the prototyping tab.
What I landed on was cleaning up the Spotify UI and adding a section to change the theme.
Check out the Figma file here.
The beginning.
When starting this project, I did a lot of research. I already had a solid idea for what I wanted, so I didn't need to take a lot of notes. I spent time researching styles and ideas other people had when redesigning their own Spotify.
Initial tinkering.
I started out by grabbing a reference image (left) from Spotify itself and reiterating that into a basic wireframe (middle). One with a simpler layout and feels less crowded. I then iterated that into a first draft (right). I still had yet to create the other styles, but this was a good start.
Creating components.
One of the most useful tools that I learned was the ability to create reusable components. These also allowed me to experiment with the prototyping functions later on.
First drafts.
While I am content with how the first drafts came out, the main issues with these is that the buttons jump around when swapping between the pages. I didn't know about variants when I first created them.
My initial plan was to have the themes button be at the top right, but I quickly realized that it was in an uncomfortable position to move your thumb to, so I moved it into the kebab menu during my prototype phase.
At the time, Apple had unveiled the new liquid glass, so I wanted to see if I could incorporate that into some versions of the designs. I had made some from scratch using a texture effect, low opacity rounded rectangles, and gradient strokes on them. My method has become outdated as Figma has incorporated a glass effect locally!
Lastly, one problem I had was that I manually made each design layout by hand. On the surface, it doesn't sound like it should be much of an issue. However, when swapping between the different themes, the icons would be slightly in the correct positions and was quite noticeable. I fixed this on later renditions by creating and using components.
Prototyping and its hiccups.
The prototyping phase was probably what took me the longest to learn the basics of. I kept running into problems where no animations would happen, or it wouldn't link properly. I thoroughly enjoyed solving these issues. It was satisfying to finally get it to work properly. I plan on testing the waters with the programming side of things at some point to see what other animations can be made outside of the defaults.
Final thoughts.
I learned a lot through this project. There are a few things that I would have liked to improve on it. I learned about variants after I'd finished the project and that would have streamlined my process of swapping between the pages better. I wish I had spent more time on the designs. I got frustrated a few times when doing the swap from Photoshop to Figma. Some workflows were different, but I think I prefer how Figma does it a little bit more.
