作为一项行业，生成式 AI 正在快速发展，因此也需要团队探索新的想法和技术来快速前进。为此，我们一直在使用 Gradio（来自 Hugging Face 的低代码原型工具包）来启动实验和体验。Gradio 使我们能够通过原型验证概念，而无需投入大量的时间、精力或基础设施。

尽管 Gradio 使原型开发阶段变得更容易，但设计阶段基本上保持不变。即使使用 Gradio，设计师也必须在 Figma 中创建组件，概述预期的用户流程和行为，并以他们一直以来的方式将设计交付给开发人员。在最近的一次探索中，我们意识到需要一些东西：一套基于 Gradio 的 Figma 组件，使设计师能够快速创建线框图。

今天，我们发布了我们的 Gradio 设计组件库，供其他人使用。这些组件基于 Gradio 的 4.23.0 版本，可以通过我们的 Figma 个人资料获取：Mozilla Innovation Projects，https://www.figma.com/@futureatmozilla。我们希望这些组件能够帮助团队加快其对 ML 和生成式 AI 的发现和实验。

您可以在 https://gradio.org.cn/ 了解更多关于 Gradio 的信息，以及在 https://future.mozilla.org 了解更多关于 Mozilla 的创新信息。

感谢 Amy Chiu 和 Anais Ron 创建了这些组件，以及 Gradio 团队为他们的工作付出的努力。祝您设计愉快！

Gradio UI for Figma 中有什么？

由于 Gradio 是一个不断变化的原型工具包，因此当前的组件基于 Gradio 的 4.23.0 版本。我们根据其广泛的潜在用途选择组件。以下是工具包中包含的组件列表。

• 排版（例如标题、正文字体）
• 图标（例如 Chevron、箭头、角扩展器）

小组件

• 按钮
• 复选框
• 单选按钮
• 滑块
• 选项卡
• 手风琴
• 删除按钮
• 错误消息
• 媒体类型标签
• 媒体播放器控制器

大组件

• 标签 + 文本框
• 带有标签 + 输入的手风琴
• 视频播放器
• 标签 + 计数器
• 标签 + 滑块
• 带有标签的手风琴
• 带有标签的复选框
• 带有标签的单选按钮
• 带有内容的手风琴
• 带有标签 + 输入的手风琴
• 顶部导航

如何访问和使用 Gradio UI for Figma

要开始使用该库，请按照以下简单步骤操作。

1. 访问库：通过访问我们的公共 Figma 个人资料（https://www.figma.com/@futureatmozilla）或在您的网页或桌面 Figma 应用程序的 Figma 社区部分搜索“Gradio UI for Figma”来直接访问组件库。
2. 浏览文档：熟悉组件和指南，以充分利用您的设计流程。
3. 联系我们：通过关注我们的 Figma 个人资料或发送电子邮件至 innovations@mozilla.com 与我们联系。