像素级完美从 Figma 转换到 Tailwind

Pixel Perfect Figma to Tailwind

您是一名开发人员，负责将视觉设计转换为 HTML 和 CSS。

您是一位自信的开发人员，已经熟悉 Tailwind CSS，但您不一定认为自己具有“良好的设计眼光”。

您希望提高设计实现的质量和保真度 — 尽可能接近“像素完美”转换。

如果你在这段描述中看到自己……这个研讨会绝对适合你！

设计
在本次研讨会中，你将从头开始重新设计 Epic Stack 主页。

您将使用 Figma 文件，其中主页设计为 5 种不同的屏幕尺寸

研讨会涵盖的主题
在整个实践研讨会中，您将学习如何

从头开始进行新的响应式设计转换
利用现代 Figma 功能，例如自动布局和开发模式
将 Figma “Design Tokens” 转换为 Tailwind 配置
利用 Grid 和 Flexbox 等 CSS 布局工具实现复杂的设计
在页面加载时创建仅限 CSS 的关键帧动画
以 Tailwind JIT 友好的方式管理动态样式
在这个过程中，您将对排版和间距的细节产生敏锐的关注。您将熟练使用 Figma 的开发模式，并对构建高保真实施的能力充满信心。

您甚至可以进行“屏幕截图叠加”测试，以将设计与我们的构建相匹配 – 这就是我们的目标 Pixel Perfect！

以下是您应该注册参加研讨会的原因
在本次研讨会结束时，您将

对您实施高精度设计的能力充满信心
拥有可用于实现任何设计的可重复流程
对设计师的思维方式有很好的理解，能够更好地与设计团队合作
熟练使用 CSS 网格构建高级布局
了解如何以 Tailwind JIT 友好的方式管理动态样式
这个研讨会是您将 UI 设计技能提升到新水平的机会。

您将与志同道合的开发人员一起度过这一天，以改进他们的技术。

您将获得一种主人翁意识，并对您正在处理的网站和应用程序的设计质量感到自豪。

Simon 研讨会的精彩内容
在一系列动手练习中，您将进行大量互动和参与。

这不是无聊的“网络研讨会”讲座，您可以连续几个小时听讲师无人机。

Simon 是一位经验丰富的教育家，也是受过正规培训的学校教师。他知道如何创造引人入胜且有趣的学习环境！

多年来，Simon 已将数百种设计转换为 Tailwind。他是 Tailwind Labs 核心团队的前成员，在那里他一直向数千名开发人员教授 Tailwind CSS。

您将与 Simon 一起度过一整天——有充足的时间提出问题并进行有意义的对话。

所需经验
此研讨会面向已经熟悉 Tailwind CSS 的开发人员。

如果您不是，可以快速提升技能的大量免费资源是官方 Tailwind 文档和 YouTube 频道。特别是 From Zero to Production 视频系列是对 Tailwind 的一个很好的介绍。

对 JavaScript 和 React 的基本熟悉也是有益的，因为我们将使用 React + Vite 应用程序来构建我们的 UI。

同样，这并不重要，因为研讨会仍然牢牢地专注于 HTML 和 CSS。