From Figma to Tailwind CSS

Robinson focuses the redesign on the next game, schedule, and scores, removing news, ads, and other details he considers less useful. He compares ESPN’s desktop and mobile sites, its app, and other sports designs to find ideas worth adapting, such as clear win and loss indicators and team colors.

He starts with an iPhone frame and iterates on schedule rows, team rankings, and how to highlight the next game. He recommends limiting font sizes, weights, and colors, and using spacing consistently. Figma auto layout helps him structure rows like Flexbox, while side-by-side comparisons help judge design choices.

Robinson suggests moving from Figma to code once the overall look feels right, before spending time prototyping every interaction. He starts a Next.js app with Tailwind, builds a reusable React row component, and explains how utility classes can keep styling consistent as the interface grows.

He uses ESPN’s publicly accessible API to populate the schedule with team names, logos, scores, and game dates. While exploring the JSON, he works through missing scores for upcoming games and adjusts the UI to handle them. He also shows how Next.js 13’s App Router can fetch data directly in a server component.

With schedule data on screen, Robinson can see how the layout handles actual scores, dates, and team names. He formats game times, adds schedule headings, and adjusts logo dimensions to preserve their aspect ratio. He closes by describing the workflow as a way to connect design decisions with working code.