StarZero All shows Try the podcast clipper →

Nov 22, 2024 · 40m · startup-ideas

Figma UI Design Tutorial: Design your app in 40 Minutes!

Ryd (Rid) · 30m spoken Greg Isenberg · 4m spoken
0:00 / 0:00
▶ Watch on YouTube →

gold bands on the timeline = statements, start to end. Hover to read, click to jump. CC turns on captions

Host Greg Isenberg invites design educator Ryd for a hands-on live Figma masterclass to build a modern, code-aligned course marketplace interface from scratch. Across the live session, Ryd demonstrates practical techniques for Auto Layout, tactile lighting, iterative prototyping, and building developer-ready UI components.

How this conversation actually went

Every chapter scored 0–10 on four independent dynamics. Hover any point for the reasoning behind the score. Greg holds 12.8% of the talking time here. How this is scored →

Greg as informed peer 1.8 Guest teaching 5.4 Guest disagreement 0.6 Greg pushing back 0.7
05100:0015:0030:000:53–4:54 · Greg as informed peer 0/10 Structuring Components and Auto Layout Fundamentals Ryd performs an uninterrupted live walkthrough demonstrating his hack of creating components upfront and mapping auto layout to CSS flexbox.4:55–7:24 · Greg as informed peer 3/10 Design Inspiration and Notion Reference Databases Greg asks whether Ryd designs purely from imagination or uses references, prompting Ryd to explain his continuous Notion reference database workflow.7:25–14:00 · Greg as informed peer 0/10 Iterative Card Exploration and the Destroyer Plugin Ryd guides viewers through rapid card prototyping, demonstrating the Destroyer plugin and using dual screens to check 1x fidelity.14:00–17:26 · Greg as informed peer 4/10 Bridging Visual Design with Frontend Engineering Principles Greg steps in to ask whether visual design is prioritized over frontend engineering constraints. Ryd educates on how auto layout directly translates to Tailwind CSS and Flexbox.17:27–21:34 · Greg as informed peer 1/10 Applying Lighting, Luminosity, and Noise Textures Ryd gives a masterclass on layer blur, luminosity blend modes, and noise shaders to create modern UI textures with minimal host interruption.21:35–29:09 · Greg as informed peer 0/10 Sponsor Break: Organic Growth with BoringMarketing.com After an ad break, Ryd walks through creating interactive hover variants and layered shadows with the Smooth Shadow plugin.29:11–32:55 · Greg as informed peer 2/10 Essential Plugins and Fast Asset Replacement Workflows Greg assumes designers need dozens of plugins, but Ryd reframes the premise by showing he only uses a handful for specific workflows alongside native Figma hotkeys.32:56–35:21 · Greg as informed peer 0/10 Creating Dimensionality with Dual Inner Shadows Ryd demonstrates adding dual opposing inner shadows to give UI components realistic tactile curvature and edge lighting.35:22–38:39 · Greg as informed peer 6/10 Figma vs AI Code Generation: The Future of Design Tools Greg presses Ryd on Figma's relevance in an AI/v0 world and introduces the pencil vs word processor analogy, which Ryd builds upon regarding code-based design tools.0:53–4:54 · Guest teaching 5/10 Structuring Components and Auto Layout Fundamentals Ryd performs an uninterrupted live walkthrough demonstrating his hack of creating components upfront and mapping auto layout to CSS flexbox.4:55–7:24 · Guest teaching 4/10 Design Inspiration and Notion Reference Databases Greg asks whether Ryd designs purely from imagination or uses references, prompting Ryd to explain his continuous Notion reference database workflow.7:25–14:00 · Guest teaching 6/10 Iterative Card Exploration and the Destroyer Plugin Ryd guides viewers through rapid card prototyping, demonstrating the Destroyer plugin and using dual screens to check 1x fidelity.14:00–17:26 · Guest teaching 7/10 Bridging Visual Design with Frontend Engineering Principles Greg steps in to ask whether visual design is prioritized over frontend engineering constraints. Ryd educates on how auto layout directly translates to Tailwind CSS and Flexbox.17:27–21:34 · Guest teaching 6/10 Applying Lighting, Luminosity, and Noise Textures Ryd gives a masterclass on layer blur, luminosity blend modes, and noise shaders to create modern UI textures with minimal host interruption.21:35–29:09 · Guest teaching 6/10 Sponsor Break: Organic Growth with BoringMarketing.com After an ad break, Ryd walks through creating interactive hover variants and layered shadows with the Smooth Shadow plugin.29:11–32:55 · Guest teaching 6/10 Essential Plugins and Fast Asset Replacement Workflows Greg assumes designers need dozens of plugins, but Ryd reframes the premise by showing he only uses a handful for specific workflows alongside native Figma hotkeys.32:56–35:21 · Guest teaching 5/10 Creating Dimensionality with Dual Inner Shadows Ryd demonstrates adding dual opposing inner shadows to give UI components realistic tactile curvature and edge lighting.35:22–38:39 · Guest teaching 4/10 Figma vs AI Code Generation: The Future of Design Tools Greg presses Ryd on Figma's relevance in an AI/v0 world and introduces the pencil vs word processor analogy, which Ryd builds upon regarding code-based design tools.0:53–4:54 · Guest disagreement 0/10 Structuring Components and Auto Layout Fundamentals Ryd performs an uninterrupted live walkthrough demonstrating his hack of creating components upfront and mapping auto layout to CSS flexbox.4:55–7:24 · Guest disagreement 0/10 Design Inspiration and Notion Reference Databases Greg asks whether Ryd designs purely from imagination or uses references, prompting Ryd to explain his continuous Notion reference database workflow.7:25–14:00 · Guest disagreement 0/10 Iterative Card Exploration and the Destroyer Plugin Ryd guides viewers through rapid card prototyping, demonstrating the Destroyer plugin and using dual screens to check 1x fidelity.14:00–17:26 · Guest disagreement 1/10 Bridging Visual Design with Frontend Engineering Principles Greg steps in to ask whether visual design is prioritized over frontend engineering constraints. Ryd educates on how auto layout directly translates to Tailwind CSS and Flexbox.17:27–21:34 · Guest disagreement 0/10 Applying Lighting, Luminosity, and Noise Textures Ryd gives a masterclass on layer blur, luminosity blend modes, and noise shaders to create modern UI textures with minimal host interruption.21:35–29:09 · Guest disagreement 0/10 Sponsor Break: Organic Growth with BoringMarketing.com After an ad break, Ryd walks through creating interactive hover variants and layered shadows with the Smooth Shadow plugin.29:11–32:55 · Guest disagreement 2/10 Essential Plugins and Fast Asset Replacement Workflows Greg assumes designers need dozens of plugins, but Ryd reframes the premise by showing he only uses a handful for specific workflows alongside native Figma hotkeys.32:56–35:21 · Guest disagreement 0/10 Creating Dimensionality with Dual Inner Shadows Ryd demonstrates adding dual opposing inner shadows to give UI components realistic tactile curvature and edge lighting.35:22–38:39 · Guest disagreement 2/10 Figma vs AI Code Generation: The Future of Design Tools Greg presses Ryd on Figma's relevance in an AI/v0 world and introduces the pencil vs word processor analogy, which Ryd builds upon regarding code-based design tools.0:53–4:54 · Greg pushing back 0/10 Structuring Components and Auto Layout Fundamentals Ryd performs an uninterrupted live walkthrough demonstrating his hack of creating components upfront and mapping auto layout to CSS flexbox.4:55–7:24 · Greg pushing back 1/10 Design Inspiration and Notion Reference Databases Greg asks whether Ryd designs purely from imagination or uses references, prompting Ryd to explain his continuous Notion reference database workflow.7:25–14:00 · Greg pushing back 0/10 Iterative Card Exploration and the Destroyer Plugin Ryd guides viewers through rapid card prototyping, demonstrating the Destroyer plugin and using dual screens to check 1x fidelity.14:00–17:26 · Greg pushing back 2/10 Bridging Visual Design with Frontend Engineering Principles Greg steps in to ask whether visual design is prioritized over frontend engineering constraints. Ryd educates on how auto layout directly translates to Tailwind CSS and Flexbox.17:27–21:34 · Greg pushing back 0/10 Applying Lighting, Luminosity, and Noise Textures Ryd gives a masterclass on layer blur, luminosity blend modes, and noise shaders to create modern UI textures with minimal host interruption.21:35–29:09 · Greg pushing back 0/10 Sponsor Break: Organic Growth with BoringMarketing.com After an ad break, Ryd walks through creating interactive hover variants and layered shadows with the Smooth Shadow plugin.29:11–32:55 · Greg pushing back 1/10 Essential Plugins and Fast Asset Replacement Workflows Greg assumes designers need dozens of plugins, but Ryd reframes the premise by showing he only uses a handful for specific workflows alongside native Figma hotkeys.32:56–35:21 · Greg pushing back 0/10 Creating Dimensionality with Dual Inner Shadows Ryd demonstrates adding dual opposing inner shadows to give UI components realistic tactile curvature and edge lighting.35:22–38:39 · Greg pushing back 2/10 Figma vs AI Code Generation: The Future of Design Tools Greg presses Ryd on Figma's relevance in an AI/v0 world and introduces the pencil vs word processor analogy, which Ryd builds upon regarding code-based design tools.

speaking balance: gold is Greg, purple is the guest (3 minute bins)

0:00 · Greg 17% · guest 83%0:00 · Greg 17% · guest 83%3:00 · Greg 8.4% · guest 91.6%3:00 · Greg 8.4% · guest 91.6%6:00 · Greg 30.1% · guest 69.9%6:00 · Greg 30.1% · guest 69.9%9:00 · Greg 0% · guest 100%9:00 · Greg 0% · guest 100%12:00 · Greg 17.2% · guest 82.8%12:00 · Greg 17.2% · guest 82.8%15:00 · Greg 0% · guest 100%15:00 · Greg 0% · guest 100%18:00 · Greg 0.1% · guest 99.9%18:00 · Greg 0.1% · guest 99.9%21:00 · Greg 29.5% · guest 70.5%21:00 · Greg 29.5% · guest 70.5%24:00 · Greg 0% · guest 100%24:00 · Greg 0% · guest 100%27:00 · Greg 18.1% · guest 81.9%27:00 · Greg 18.1% · guest 81.9%30:00 · Greg 0.7% · guest 99.3%30:00 · Greg 0.7% · guest 99.3%33:00 · Greg 6.4% · guest 93.6%33:00 · Greg 6.4% · guest 93.6%36:00 · Greg 26.7% · guest 73.3%36:00 · Greg 26.7% · guest 73.3%39:00 · Greg 62.2% · guest 37.8%39:00 · Greg 62.2% · guest 37.8%
Sharpest disagreement ▶ 35:36 Ryd refuses to defend Figma against AI tools

When Greg asks Ryd to justify using Figma over v0, Ryd playfully subverts expectations by refusing to defend Figma unconditionally and stating he builds directly in Framer.

 Hardest push from Greg ▶ 14:00 Greg challenges Ryd on design vs code viability

Greg interrupts the tutorial to challenge whether Ryd is prioritizing pure visual aesthetics over actual frontend implementability in tools like Framer or CSS.

 Biggest teaching moment ▶ 14:31 Ryd breaks down how auto layout enforces clean CSS

Ryd explains to Greg that building properly with auto layout prevents absolute positioning antipatterns and directly mirrors Tailwind spacing.

 Greg holds their own ▶ 37:08 Greg introduces the paper vs word processor framework

Greg articulates a clear conceptual framework defining Figma as an expressive pencil/sketchpad while AI generators act as structured word processors.
the scores for every segment, with the reasoning behind each
ChapterTopicGreg as informed peerGuest teachingGuest disagreementGreg pushing backWhy
Structuring Components and Auto Layout Fundamentals 0500 Ryd performs an uninterrupted live walkthrough demonstrating his hack of creating components upfront and mapping auto layout to CSS flexbox.
Design Inspiration and Notion Reference Databases 3401 Greg asks whether Ryd designs purely from imagination or uses references, prompting Ryd to explain his continuous Notion reference database workflow.
Iterative Card Exploration and the Destroyer Plugin 0600 Ryd guides viewers through rapid card prototyping, demonstrating the Destroyer plugin and using dual screens to check 1x fidelity.
Bridging Visual Design with Frontend Engineering Principles 4712 Greg steps in to ask whether visual design is prioritized over frontend engineering constraints. Ryd educates on how auto layout directly translates to Tailwind CSS and Flexbox.
Applying Lighting, Luminosity, and Noise Textures 1600 Ryd gives a masterclass on layer blur, luminosity blend modes, and noise shaders to create modern UI textures with minimal host interruption.
Sponsor Break: Organic Growth with BoringMarketing.com 0600 After an ad break, Ryd walks through creating interactive hover variants and layered shadows with the Smooth Shadow plugin.
Essential Plugins and Fast Asset Replacement Workflows 2621 Greg assumes designers need dozens of plugins, but Ryd reframes the premise by showing he only uses a handful for specific workflows alongside native Figma hotkeys.
Creating Dimensionality with Dual Inner Shadows 0500 Ryd demonstrates adding dual opposing inner shadows to give UI components realistic tactile curvature and edge lighting.
Figma vs AI Code Generation: The Future of Design Tools 6422 Greg presses Ryd on Figma's relevance in an AI/v0 world and introduces the pencil vs word processor analogy, which Ryd builds upon regarding code-based design tools.

Statements from this episode (6)

Insight
Riddering: Figma components are early-stage speed hacks, not enterprise systems
“And a lot of people associate the word component with like design systems and Polaris and enterprise and yada, yada, but actually like components as really hacky speed mechanisms in Figma are amazing. I use them all the time. Because my goal is like, I never w…”
Ryd (Rid) Nov 22, 2024 ▶ 2:47
Insight
Riddering: Good design is primarily about out-iterating everyone else
“If you want to be a good designer, it's like actually just about trying more things than everyone else. And so the faster that you can try things, the better that you're going to be, because you just kind of got to get through all of the slop.”
Ryd (Rid) Nov 22, 2024 ▶ 12:48
Opinion
Riddering: The modern web is built entirely on Tailwind CSS
“Everything's built on Tailwind. Like the modern web uses Tailwind. You can't really get away with it.”
Ryd (Rid) Nov 22, 2024 ▶ 16:48
Insight
Riddering: Designers should avoid bloated libraries of Figma plugins
“Figma out of the box has actually gotten pretty good. I don't think that you should stress out about having to build this repertoire of like 20 different plugins.”
Ryd (Rid) Nov 22, 2024 ▶ 32:44
Opinion
Riddering: Vercel's v0 outputs feel tame and templated compared to Figma
“Like everything that V zero is going to give you is going to feel tame, slightly templated. Figma is the way to like push visual ideas and really figure out what you want to make.”
Ryd (Rid) Nov 22, 2024 ▶ 36:05
Prediction Not checkable as stated
Riddering: High-fidelity design and code workflows will inevitably merge
“This idea of having high fidelity design and high fidelity code be separate, that does not feel like it's going to exist in the long run to me.”
Ryd (Rid) Nov 22, 2024 ▶ 38:26
Made with StarZero

Turn any episode into a week of clips.

This entire site, over 300 episodes transcribed, diarized, checked and made playable, runs on the StarZero media pipeline. Drop in your own episode and the podcast clipper finds the moments worth sharing, cuts them, captions them, and reframes them for every feed.

Try the podcast clipper Learn more