Como indústria, a IA generativa está evoluindo rapidamente e, portanto, exige que as equipes que exploram novas ideias e tecnologias também avancem rapidamente. Para fazer isso, temos usado o Gradio, um kit de ferramentas de prototipagem de baixo código da Hugging Face, para gerar experimentos e experiências. A Gradio nos permitiu validar conceitos por meio de prototipagem sem grandes investimentos de tempo, esforço ou infraestrutura.
Embora a Gradio tenha facilitado a fase de desenvolvimento da prototipagem, a fase de design foi basicamente a mesma. Mesmo com o Gradio, os designers tiveram que criar componentes no Figma, delinear os fluxos e comportamentos esperados do usuário e entregar os designs aos desenvolvedores da mesma forma que sempre fizeram. Ao trabalhar em uma exploração recente, percebemos que algo era necessário: um conjunto de componentes Figma baseados em Gradio que permitisse aos designers criar wireframes rapidamente.
Hoje, estamos lançando nossa biblioteca de componentes de design para Gradio para uso de outras pessoas. Os componentes são baseados na versão 4.23.0 do Gradio e estarão disponíveis através do nosso perfil Figma: Mozilla Innovation Projects, https://www.figma.com/@futureatmozilla. Esperamos que esses componentes ajudem as equipes a acelerar a descoberta e a experimentação com ML e IA generativa.
Você pode descobrir mais sobre a Gradio em https://www.gradio.app/ e mais sobre inovação na Mozilla em https://future.mozilla.org
Obrigado a Amy Chiu e Anais Ron que criaram os componentes e à equipe Gradio pelo seu trabalho. Feliz design!
O que há dentro UI Gradio para Figma?
Como o Gradio é um kit de prototipagem em constante mudança, os componentes atuais são baseados na versão 4.23.0 do Gradio. Selecionamos componentes com base em sua ampla gama de usos potenciais. Aqui está uma lista dos componentes dentro do kit:
- Tipografia (por exemplo, cabeçalhos, fontes do corpo)
- Iconografia (por exemplo, divisas, setas, expansores de canto)
Pequenos componentes:
- Botões
- Caixa de seleção
- Rádio
- Controles deslizantes
- Guias
- Acordeão
- Botão Excluir
- Mensagem de erro
- Etiquetas de tipo de mídia
- Controlador de reprodutor de mídia
Grandes componentes:
- Etiqueta + caixa de texto
- Acordeão com Etiqueta + Entrada
- Reprodutor de vídeo
- Etiqueta + Contador
- Etiqueta + controle deslizante
- Acordeão + Etiqueta
- Caixa de seleção com rótulo
- Rádio com etiqueta
- Acordeão com Conteúdo
- Acordeão com Etiqueta + Entrada
- Navegação superior
Como acessar e usar UI Gradio para Figma
Para começar a usar a biblioteca, siga estas etapas simples:
- Acesse a Biblioteca: Acesse a biblioteca de componentes diretamente visitando nosso perfil público Figma (https://www.figma.com/@futureatmozilla) ou pesquisando “Gradio UI for Figma” na seção Figma Community de seu aplicativo Figma para web ou desktop.
- Explore a documentação: familiarize-se com os componentes e diretrizes para aproveitar ao máximo seu processo de design.
- Conecte-se conosco: Conecte-se conosco seguindo nosso perfil Figma ou enviando um e-mail para inovações@mozilla.com
Mais artigos de Thomas Lodato…
Criador, desenvolvedor, estrategista, cervejeiro caseiro, corredor, entusiasta de meias, evangelista de barba, escritor, baterista, aventureiro, defensor da vírgula em Oxford e canivete humano do exército suíço.
Mais artigos de Dan Brown…
