内容 隐藏
1 使用 Storybook 将 Figma 设计转换为 ReactJS 组件
2 Convert a Figma design to ReactJS components using Storybook
2.1 你将学到什么
2.2 要求
2.3 描述
2.4 本课程适合谁：

使用 Storybook 将 Figma 设计转换为 ReactJS 组件

Convert a Figma design to ReactJS components using Storybook

学习基于 Figma 设计系统构建可重用、健壮、动画且完全类型化的 ReactJS 组件库

你将学到什么

  • 将 Figma 设计系统转换为完全类型化的 ReactJS 组件库。
  • 使用 ReactJS、TailwindCSS 和 Storybook 创建不同复杂度的独立组件。
  • 使用断点和网格创建响应式 UI 元素。
  • 为每个 UI 元素实现深色模式。
  • 了解如何构建和使用组件库。

 

要求

  • 需要一些 ReactJS 编程经验。UI 组件的复杂程度各不相同。
  • 您有责任为 ReactJS 正确设置环境，但我们会提供说明来指导您。

描述

在本课程中，您将准确了解如何将复杂且大规模的设计系统转换为功能齐全的ReactJS 组件。在整个课程中，您将了解专业科技公司如何实施他们的设计系统以及您如何做同样的事情。遵循最佳实践，设计系统将从 Figma 转换为使用Storybook 的独立组件。在课程结束时，您将使用自建的组件库创建一个完全响应式的 ReactJS 应用程序。您将能够按照设计系统的确切准则将任何设计系统转换为可访问的功能组件。

本课程中的边做边学的方法让您扮演真正的软件工程师。从相对简单的任务开始，您将逐步完成更复杂和有用的组件。通过这样做，您将自动变得更加轻松地克服障碍，就像您在现场工作一样。

本课程内容： 3个多小时的视频讲座、10个作业和1个项目作业。

技术堆栈：ReactJS、TypeScript、Storybook、TailwindCSS。

我们的设计系统中提供以下组件，并将在视频课程中实施：

  • 版式
  • 按钮组
  • 分页
  • 徽章
  • 按钮
  • 选择
  • 文本输入
  • 导航栏（包含子导航）
  • 移动导航栏
  • 租赁卡

每个组件都有一个暗模式变体，并且可以有多种状态，例如悬停、聚焦和禁用。TailwindCSS将用于快速构建 UI 组件，而无需离开我们的 ReactJS 组件。设计系统中还提供了一组额外的奖励组件供您实施，例如复选框、切换、单选和工具提示。所有组件的创建都考虑到了可重用性、稳健性和可扩展性等质量特性。

TypeScript：完全类型化的组件

所有组件都将被完全类型化，以防止图书馆的使用者违反设计系统的准则。TypeScript最相关的功能将被教授，如基本类型、自定义类型、接口、泛型和记录。

构建和消费：进入生产阶段

组件库将针对生产进行优化。所有组件的总大小将最小化为 360kb，因此当您在示例项目中使用组件时，页面加载速度将非常快。

包括未来的更新

未来将提供更多内容。我可能会重做一些视频以提高质量。学习材料将来也可以改变。所有未来的更新都包含在内。

本课程适合谁：

  • 初级 ReactJS 开发人员渴望了解有关将设计系统转换为功能齐全的 ReactJS 应用程序的所有知识。
  • 对 ReactJS 有基本了解，想要实现自己的设计系统的设计师。
  • 专为面向挑战的学习者而设计。通过练习和重复，您可以最好地学习复杂的细节。
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。