Designing Spotify with Figma

In this video, we'll decompose and design the Spotify homepage, one step at a time, with an emphasis on design fundamentals such as colors, typography, spacing, and reusability. This video is part of a wider design series aimed at helping you become a better designer through the redesign of some of the world's most popular products and interfaces.

How did you like this video? Was it helpful? Any questions come to mind about this design process that I haven't covered in this video, or some decisions that I've obviated that you'd like more emphasis on? Let me know in the comments section below and I'll get back to you 💬

If you are new to my channel, welcome! Don't forget to hit subscribe if you'd like to keep up with my weekly dose of product design videos and tutorials to help you build digital products and bring your ideas to life.

Don't be a stranger and connect with me here 👋

Chapters:
0:00 - Welcome
0:25 - Project walkthrough
2:24 - File setup
3:17 - Music player
19:13 - Left navigation
27:53 - Main area
42:20 - Conclusion

[masha]

Javi, you make the best tutorials! Always learning so much from you. I hope you will keep posting new content <3

[cecilcampbell]

Another great tutorial Javier. Thank you for creating amazing design content and sharing your thought process behind every decision.

[alyssaking]

Hello Javier, great video! Can you please link the interaction design video? I cant seem to find it.

[cmkaniak]

Hey Javi, just wondering...were you able to create the follow-up video for this (i.e., interaction design)?

[nudos]

Amazing job with your videos Javi! As a suggestion of things I would like to see you doing are: how to design responsive data visualization charts, complex UI components ( like the data tables tutorial you created ) and how to adopt, modify and leverage open source Design Systems for our work.

[nithishnitiz]

hi your tutorial is awesome, but can u please explain me why to use a nested frame, instead of that you could have used a rectangle tool to make the layouts inside right??

[yoma]

Nice content👍🏽
How did you screenshot the website?

[eth_fish]

Great to see how you approach this. You use frames a lot more than I. I tend to always define spacing with an auto layout but it complicates the layer structure unnecessarily. Thanks for sharing! So the challenge is to add interactivity to the design?

[giorgitabatadze]

I have one question : how can I add an audio file ? with anima? Is it possible I do with iPhone 6 s ?

[cumbres]

I saw the thumbnail and I though it was a Tailwind CSS video…