Design Implementation
Loading "Design Implementation"
Run locally for transcripts
This first exercise is about converting the Figma design to a Tailwind CSS project.
High Fidelity Implementations
Delivering a high-quality design-to-code conversion is all about attention to details.
Want to get really good at Figma-to-Tailwind conversions?
Check out the Pixel Perfect Tailwind workshop!!
Your challenge
Inspect the Figma file as closely as possible. Make sure you notice the differences between the mobile and desktop versions of the design.
Don't worry about using the right colors just yet βΒ we'll implement those later. Use a grayscale color palette for now, using Tailwind's default colors. Have a look in the
Solution tab for inspiration β¨Below are a couple of screenshots from inspecting the Figma design with DevMode.
Accessing Figma's DevMode
The Figma support team has generously allowed us to make the Epic Web Figma
Team an education
account β which enables access to pro tools
like DevMode!
Education access requires enrolling with an email address + Figma account, and
is typically reserved for folks who purchased a Pro workshop such as Pixel
Perfect Tailwind.
Don't worry βΒ you can still inspect the design without DevMode β the file is publicly available to everyone!