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!

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.