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...