Moodify

Exploring the boundaries of Figma variables

Figma introduced variables last year, unlocking exciting possibilities for dynamic design. Inspired by this, I created Moodify — a mood-based music app prototype.

Using Figma variables, I designed themes that seamlessly adapt to different moods, transforming colours, imagery, and text with ease.

Deciding on variables

To make Moodify’s design more dynamic and efficient, I identified key elements that could benefit from variable-driven customisation. These included:

• Boolean Variables: These were used to manage mood states, where, for example, the variable for "Energetic" would be set to true while variables for other moods like "Sad" or "Happy" would be false. This logic allowed seamless transitions and ensured that only the relevant mood’s theme and content were displayed.

• Dynamic Content: Variables also powered text elements like playlist names, descriptions, and headings, creating a fluid experience where content aligned seamlessly with the chosen mood.

• Colours: Text, background, button colours, and light/dark mode themes were managed using variables, ensuring a consistent and adaptive visual identity.

Wireframing for exploration

I started with a couple of simple wireframes to outline the app’s structure and key features. These wireframes included:

• Mood Selection Carousel: An entry point where users could select their current mood.
• Recent Playlists Section: Highlighting recently accessed mood-based playlists for easy continuity.
• Recommendations Page: A dynamic layout to display playlists, songs, and insights tailored to the chosen mood.

High-Fidelity Designs

With the basic wireframes and variable system in place, I moved to high-fidelity designs. Leveraging Figma variables allowed me to begin with just one Recommendations Page design. Since variables dynamically controlled colors, text, and other elements, I didn’t need to design separate pages for each mood. This approach saved time and reduced redundancy.

Homepage

The homepage serves as the entry point for users, blending functionality with an engaging design. The Mood Selection Carousel allows users to explore different moods intuitively, with visually distinct options for each. Below this, the Recent Playlists section ensures users can quickly pick up where they left off, prioritizing continuity and convenience. Additionally, I introduced a placeholder for the Mood Map, a planned feature that will offer insights into users' listening trends and mood patterns, adding an analytical layer to the app.

Mood-based recommendations page

Designed to immerse users in mood-specific content, this page includes a dropdown menu at the top for easy mood switching, ensuring flexibility. The dropdown was prototyped using Figma variables, enabling the content on the page—such as suggested playlists, fun tips, popular artists, and trending songs—to dynamically change based on the selected mood. This eliminated the need to design separate pages for each mood while showcasing all three moods seamlessly in the prototype. By linking variables to the dropdown, I created a cohesive and efficient design system that adapted fluidly to user interactions.

Reflections and learnings

Working on Moodify taught me the value of dynamic design systems and the power of tools like Figma variables in creating adaptable user experiences. Some advantages of this approach include:

• Efficiency: Designing one page and adapting it via variables minimized repetitive work.
• Consistency: Variables ensured a cohesive look and feel across all mood
• Scalability: Adding new moods or themes in the future would be seamless, requiring updates to variables rather than creating entirely new designs.