Unknown Arts

Unknown Arts

Share this post

Unknown Arts
Unknown Arts
Reverse Engineering YouTube's Video Grid UI in Figma
User's avatar
Discover more from Unknown Arts
A weekly field guide for creative builders exploring AI, design, and the creative frontier.
Over 7,000 subscribers
Already have an account? Sign in

Reverse Engineering YouTube's Video Grid UI in Figma

A step-by-step video walkthrough reverse engineering YouTube’s video grid UI, plus get exclusive access to the resulting Figma file.

Nov 05, 2023
6

Share this post

Unknown Arts
Unknown Arts
Reverse Engineering YouTube's Video Grid UI in Figma
Share

Hello! I’m Pat and Better by Design is my newsletter sharing pragmatic insights for creative innovation through the lens of design. If you’re new here, join our growing tribe of design innovators!


⭐️ This edition’s resources ⭐️

  1. 📹 Video work session (~45min with chapters, playback speeds, and transcript)

  2. ⚒️ Figma community file (duplicate for your own personal use)

Introducing Reverse UI

This week, I’m excited to add a new multimedia series to Better by Design focused on UI design execution and strategy. I’m calling it Reverse UI.

This will be a partner to the style of article I’ve refined over the course of the first 100 editions of the newsletter.

As the name suggests, Reverse UI will start with an existing piece of software UI and reverse engineer it from scratch. Some days (like today), we’ll break down parts of popular apps and others we’ll dive into common foundational elements of the web.

Each edition of Reverse UI will include three resources: a video (hosted on YouTube), a Figma file, and a newsletter post. Combined, I think these will provide a powerful base for sharing the knowledge I’ve acquired from a decade in the software design trenches.

While reading is a fantastic way to absorb strategic concepts, UI execution is still much easier to learn and repeat if you can simply observe it being done.

With that in mind, the videos will capture me working in real time, analyzing UI and recreating core elements. The goal is for these videos to feel like we’re coworkers and that you’re looking over my shoulder as we design together. The Figma file will share the output from my work session and give you a playground to attempt your own remix. The newsletter post will then bundle those up and provide a bit of extra context to tie everything together.

The exact formats are a work in progress so please share your feedback. Let’s design better, together! 🚀

If you’re open to helping me out:

  1. Subscribe to the YouTube channel (I need 1,000 subscribers to unlock YouTube’s full video chapters functionality, so every bit helps!)

  2. Share this post with someone who would get value from it

    Share

Until next time,

Pat 💚

What UI would you like to see me reverse engineer? Reply via email, leave a comment in Substack, or tag me on X to let me know!

We create the foundation for the component that forms this layout.

Video Summary

While the video element on YouTube’s homepage is obviously central to the service, it also reflects a UI pattern that’s foundational to basically every internet media platform which makes it a good candidate for study.

The combination of feature image, user avatar, headline, metadata, and action buttons is widely used and remixed across web applications.

YouTube’s implementation of this pattern is highly interactive, incorporating a mini video player on hover with its own detailed set of controls. In order to keep this session a reasonable length, I chose to focus on designing only the elements necessary to capture the component in its idle state.

Video sections

Quick and dirty annotations to help get a sense of the layout

1. Review in the browser, annotate the layout, and take notes

I start the session by reviewing the video component in the browser and discussing the elements that compose it. We take some notes and annotate the UI to give ourselves a better sense of the data and elements we’ll want to include when we start designing.

Timestamps:
  • 00:00 - Introduction

  • 01:57 - Reviewing in the browser

  • 04:01 - Annotating the layout


The video component consumes multiple smaller subcomponents

2. Set up Video component basics & pull out subcomponents

In this section, we lay down the basics of the components we want for our design. We start with placeholder content to shape the general layout of the video component, then work through refining the styles to align with what’s applied to the real thing. Once the core of the video component takes shape, we abstract out a series of subcomponents to give our UI more flexibility for configuration.

Timestamps:
  • 06:50 - Starting the component

  • 18:45 - Refining the content

  • 27:56 - Abstracting subcomponents


The video component exposes a variety of properties for clearer configuration when instances are used in context

3. Test the instance in context & expose component properties

In the final section, we put the video component to use in context within the YouTube homepage layout. We test that the component repeats appropriately when forming a full row of videos and update our Video component to expose its properties and make the configuration of its instances more clear.

Timestamps:
  • 37:20 - Exposing component properties

  • 42:40 - Testing the component instances in context

  • 47:22 - Conclusion


If you got a little value in this post, consider subscribing, sharing, or following me on Twitter. If you got a lot of value I’d appreciate it if you bought me a coffee 😎☕️.

Share


Similar posts

How I make an aesthetic Figma thumbnail component that scales

How I make an aesthetic Figma thumbnail component that scales

October 22, 2023
Read full story
How I prototype to communicate, not complicate, in Figma

How I prototype to communicate, not complicate, in Figma

Patrick Morgan
·
September 12, 2022
Read full story
Rishi's avatar
Neil Baird's avatar
Raff Di Meo's avatar
Patrick Morgan's avatar
Darren Soulsby's avatar
6 Likes
6

Share this post

Unknown Arts
Unknown Arts
Reverse Engineering YouTube's Video Grid UI in Figma
Share

Discussion about this post

User's avatar
100 Books to Grow as a Creative Builder
A community-vetted library to inspire design growth and innovation with suggested starting points. Includes FREE Notion database access.
Nov 19, 2023
28

Share this post

Unknown Arts
Unknown Arts
100 Books to Grow as a Creative Builder
10 Heuristics to Simplify Design Decision-Making
How I use industry wisdom to guide my work and avoid the paradox of choice
May 4
32

Share this post

Unknown Arts
Unknown Arts
10 Heuristics to Simplify Design Decision-Making
2
24 Things I Know After 10 Years in Tech, I Wish I’d Known in Year 1
Lessons learned and wisdom gained in the tech trenches.
Jan 28, 2024
41

Share this post

Unknown Arts
Unknown Arts
24 Things I Know After 10 Years in Tech, I Wish I’d Known in Year 1
6

Ready for more?

© 2025 Patrick Morgan
Privacy ∙ Terms ∙ Collection notice
Start writingGet the app
Substack is the home for great culture

Share

Create your profile

User's avatar

Only paid subscribers can comment on this post

Already a paid subscriber? Sign in

Check your email

For your security, we need to re-authenticate you.

Click the link we sent to , or click here to sign in.