作为一个行业，生成式人工智能发展迅速，因此需要探索新想法和技术的团队也要快速行动。为了做到这一点，我们一直在使用Gradio，这是来自Hugging Face的低代码原型工具包，用于启动实验和体验。Gradio使我们能够通过原型验证概念，而无需投入大量时间、精力或基础设施。
尽管Gradio使原型开发阶段变得更加容易，但设计阶段基本保持不变。即使使用了Gradio，设计师仍然需要在Figma中创建组件，概述预期的用户流程和行为，然后以与他们一直以来相同的方式将设计交给开发人员。在最近的探索项目中，我们意识到需要一组基于Gradio的Figma组件，让设计师能够快速创建线框图。
今天，我们发布了我们的库。 Gradio设计组件库的存储库供其他人使用。这些组件基于Gradio的4.23.0版本，并将通过我们的Figma配置文件：Mozilla创新项目提供，https://www.figma.com/@futureatmozilla (opens new window)。我们希望这些组件能帮助团队加速他们在机器学习和生成式人工智能方面的发现和实验。
您可以在https://www.gradio.app/ (opens new window)了解更多关于Gradio的信息，以及在https://future.mozilla.org (opens new window)了解更多关于Mozilla创新的内容。
感谢Amy Chiu和Anais Ron创建这些组件，以及Gradio团队的工作。祝设计愉快！
Gradio UI for Figma中有什么？
由于Gradio是一个不断变化的原型工具包，当前组件是基于Gradio的4.23.0版本的。我们选择组件是基于它们广泛的潜在用途。以下是组件列表。 该套件内包含以下组件：
- 字体排版（如标题、正文字体）
- 图标设计（如矢量图标、箭头、角落扩展器）
小型组件：
- 按钮
- 复选框
- 单选按钮
- 滑块
- 选项卡
- 手风琴
- 删除按钮
- 错误消息
- 媒体类型标签
- 媒体播放器控制器
大型组件：
- 标签 + 文本框
- 带标签的手风琴 + 输入
- 视频播放器
- 标签 + 计数器
- 标签 + 滑块
- 带标签的手风琴
- 带标签的复选框
- 带标签的单选按钮
- 带内容的手风琴
- 带标签的手风琴 + 输入
- 顶部导航
如何访问和使用 Figma的Gradio UI
要开始使用该库，请按照以下简单步骤进行操作：
- 访问库：直接访问组件库，可通过访问我们的公共Figma个人资料（https://www.figma.com/@futureatmozilla）或在您的Web或桌面Figma应用程序的Figma社区部分搜索“Figma的Gradio UI”。
- 探索文档：熟悉你 了解这些组件和指南，充分利用您的设计过程。
- 联系我们：关注我们的Figma个人资料或通过电子邮件联系我们：innovations@mozilla.com