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

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

今天，我们发布了我们的库。 Gradio的设计组件库，供其他人使用。这些组件基于Gradio的4.23.0版本，并将通过我们的Figma配置文件提供：Mozilla创新项目，https://www.figma.com/@futureatmozilla (opens new window)。我们希望这些组件能帮助团队加速他们对ML和生成AI的发现和实验。

您可以在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

要开始使用这个库，请按照以下简单步骤进行：

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

更多由 Thomas Lodato 撰写的文章... (opens new window)