PixelFlow: From Design Thinking to Prototype in Figma

[02]From frame to code 🎨

From a design thinking brief to a working page. The mockup came first; then the code, one component at a time, the way the repo still has it: Stage 1 to Stage 4, then the final page.

1. Scene01

   Think before you draw

   Design thinking

   Empathize, define, ideate, prototype: the four steps printed across the PixelFlow poster, and the order the workshop worked in before anyone opened Figma.

2. Scene02

   The mockup

   Figma

   FUSION, a music app in the dark: a neon gradient sidebar, rows of album art and artists, and a bright green Now Playing card to pull the eye to the right.

   

3. Scene03

   Stage 1 · Now Playing

   HTML & CSS

   The card first, on its own: album art, song title, progress bar and playback controls on a green gradient.

   

4. Scene04

   Stage 2 · Discovery

   HTML & CSS

   A search bar and three horizontally scrolling rows: Trending, Popular Artists and Recently Played.

   

5. Scene05

   Stage 3 · Side by side

   HTML & CSS

   Stages 1 and 2 merged into one flexbox layout, the feed on the left and the player on the right.

   

6. Scene06

   Stage 4 · The sidebar

   HTML & CSS

   The navigation, with its gradient border and glow, a library sub-menu, footer links and social icons.

   

7. Scene07

   The final page

   HTML & CSS

   All four stages in one three-column layout, with Sign Up and Log In buttons, independently scrolling columns and custom scrollbars.

   

[03]What I built

FUSION

A music streaming interface, translated from the Figma mockup into plain HTML and CSS: a glowing sidebar, a discovery feed for trending songs, popular artists and recently played, and a green Now Playing card.

govindjindal.github.io/PixelFlow_National-Week2025Live

Running live, right here. Click around.

Live site ↗GitHub ↗

[04]What I learned

• 🧠

  Design thinking, applied

  Using empathize, define, ideate and prototype to shape UI mockups that feel intuitive, before touching a pixel.

• 🖼️

  Prototyping in Figma

  Turning the idea into frames, components and a layout that someone else could build from.

• 🤖

  AI from design to code

  Using AI tools to bridge design and development, converting Figma prototypes directly into code.

• 🧱

  Build it in pieces

  One component per stage, then combine. Each stage worked on its own before it joined the rest.

• ⚡

  Iterate faster

  Creative UI/UX design plus AI-powered implementation is a much quicker loop for building and changing projects.

[05]Credits

[06]Behind the scenes

[07]The certificate

That's a wrap ✓

Participated in "PixelFlow – From Design Thinking to Prototype in Figma" at National Coding Week, 16 and 17 September 2025, from Evolve AI and the Department of CSE-AI, Chitkara University. Signed by Dr. Vandana Sood, Dr. Kamal Deep Garg and Dr. Sushil Kumar Narang. 📜

“A Figma frame is a promise, and the code is where you find out what it costs. Building FUSION one stage at a time taught me to read a design the way a developer will.”