EpicWeb – Pixel Perfect Figma to Tailwind

• You’re a developer tasked with converting visual designs to HTML and CSS.
• You’re a confident developer already familiar with Tailwind CSS, but you don’t necessarily perceive yourself as having a “good eye for design”.
• You want to improve the quality and fidelity of your design implementations — getting as close as possible to “pixel perfect” conversions.
• If you see yourself in this description… this workshop is definitely for you!

The design

In this workshop, you’ll implement a redesign of the Epic Stack Homepage, starting from scratch.

You’ll work from a Figma file where the homepage is designed at 5 different screen sizes: 

Topics the workshop covers

Throughout this hands-on workshop, you will learn how to:

• Approach a new responsive design conversion, from the ground up
• Leverage modern Figma features, such as autolayout and Dev Mode
• Translate Figma “Design Tokens” to the Tailwind config
• Leverage CSS layout tools like Grid and Flexbox to achieve complex designs
• Create CSS-only Keyframe animations on page load
• Manage dynamic styles in a Tailwind JIT-friendly way

In the process, you’ll develop acute attention to details around typography and spacing. You’ll become fluent with Figma’s Dev Mode, and confident in your ability to build high-fidelity implementations.

You will even do “screenshot overlay” tests to match the design against our build  — that’s how pixel perfect we’re aiming for!

Pixel Perfection

Here’s why you should register for the workshop

By the end of this workshop, you will:

• Have the confidence in your ability to implement designs with high precision
• Have a repeatable process you can use to implement any design
• Have a good understanding of how designers think, and be able to better collaborate with design teams
• Get comfortable using CSS Grid to build advanced layouts
• Understand how to manage dynamic styles in a Tailwind JIT-friendly way

This workshop is your chance to take your UI design skills to the next level.

You’ll spend the day with like-minded developers looking to improve their craft.

You’ll gain a sense of ownership and pride over the design quality of the websites and applications you’re working on.

DOWNLOAD LINK: EpicWeb – Pixel Perfect Figma to Tailwind

FILEAXA.COM – is our main file storage service. We host all files there. You can join the FILEAXA.COM premium service to access our all files without any limation and fast download speed.