From Figma to Tailwind CSS (Design Process + Code)

Learn what makes a great user interface, tips for working with Figma, and how to translate designs into Figma to real code with Tailwind CSS.

0:00 – Introduction
0:16 – Design Process Introduction
0:16 – Design Critique (Web)
5:05 – Design Critique (Mobile Web)
6:26 – Design Critique (Mobile App)
10:52 – Design Critique (Related Sites)
12:06 – Design Iteration 1
25:44 – Design Iteration 2
45:08 – When to move to code?
47:05 – Site Setup / Overview
54:12 – Turning the design into Tailwind CSS
1:05:09 – Conditional logic with React components
1:08:55 – Fetching real data from ESPN API
1:38:01 – Successfully connecting API data to components
1:43:35 – Handling dates and times
1:53:02 – Adding a heading with Tailwind CSS
1:56:07 – Fix images aspect ratio
1:57:06 – Conclusion

Code: https://github.com/leerob/ncaam
Demo: https://ncaam.vercel.app
Figma: https://www.figma.com/file/L4O7Rufrr0...