作为一个行业，生成式人工智能发展迅速，因此需要探索新思想和技术的团队也要快速行动。为了做到这一点，我们一直在使用来自Hugging Face的低代码原型工具Gradio来快速启动实验和体验。Gradio使我们能够通过原型验证概念，而无需投入大量时间、精力或基础设施。

尽管Gradio使原型开发阶段变得更加容易，但设计阶段基本保持不变。即使使用了Gradio，设计师仍然需要在Figma中创建组件，勾勒预期的用户流程和行为，并以与以往相同的方式将设计交给开发人员。在最近的探索过程中，我们意识到需要一组基于Gradio的Figma组件，使设计师能够快速创建线框图。

今天，我们发布了我们的Gradio UI for Figma组件库，这将帮助设计师更快速地原型设计。 Gradio UI for Figma的组件库，供他人使用。这些组件基于Gradio的4.23.0版本，并将通过我们的Figma配置文件：Mozilla创新项目，https://www.figma.com/@futureatmozilla (opens new window)。我们希望这些组件能帮助团队加速对机器学习和生成式AI的探索和实验。

您可以在https://www.gradio.app/ (opens new window)了解更多关于Gradio的信息，以及在Mozilla创新方面的更多信息，请访问https://future.mozilla.org (opens new window)

感谢Amy Chiu和Anais Ron创建这些组件，以及Gradio团队的工作。祝设计愉快！ 在套件中包含以下组件：

• 排版样式（例如标题，正文字体）
• 图标设计（例如矢量图标，箭头，角扩展器）

小组件：

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

大组件：

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

如何访问和使用 Figma的Gradio UI

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

1. 访问库：直接访问组件库，方法是访问我们的公共Figma配置文件（https://www.figma.com/@futureatmozilla），或者在您的网络版或桌面版Figma应用程序的Figma社区部分中搜索“Figma的Gradio UI”。
2. 浏览文档：熟悉文档 了解Figma，Mozilla 以及与我们联系。这篇文章将为您提供设计过程中的组件和指导方针。通过关注我们的 Figma 资料或发送邮件至 innovations@mozilla.com 与我们取得联系。点击查看更多 Thomas Lodato 的文章。