Imagens, vídeos, documentos, temas, tipografia e ícones

Tudo o que está nestas abas da biblioteca pode entrar em uma solicitação com uma menção @. Selecione um item para copiar a menção dele e depois selecione Adicionar ao prompt, ou digite @ na caixa de texto e escolha o item na lista. Você também pode soltar arquivos na biblioteca para adicioná-los, ou selecionar + abaixo da caixa de solicitação e depois Adicionar à biblioteca.

Imagens

• Suas imagens: selecione Importar ou solte arquivos PNG, JPEG, WebP, GIF, AVIF ou SVG. Cada imagem recebe uma menção a partir do nome do arquivo, como @image/storefront.
• Do Unsplash: pesquise fotos, filtre por formato ou cor ou selecione Embaralhar. Copiar a menção de uma foto a salva nas suas imagens, para que a menção continue funcionando. Cada foto tem o crédito do fotógrafo. Onde quer que uma foto do Unsplash apareça (na biblioteca, na tela e nos apps exportados), aparece "Foto de nome no Unsplash", com links para o perfil do fotógrafo no Unsplash e para o Unsplash.
• Selecione uma imagem para vê-la ampliada. Ali você pode copiar a menção, adicioná-la à sua solicitação, baixá-la ou editar o nome da menção e o texto alternativo. Use Selecionar para excluir ou exportar várias de uma vez.

Quando você menciona uma imagem, o Vibr informa ao modelo o tamanho, o formato e o texto alternativo dela e coloca a imagem real no rascunho.

Ao adicionar uma imagem, o Vibr remove os metadados dela, como dados da câmera, localização e comentários, e mantém a imagem em si inalterada. Um SVG mantém apenas o desenho: scripts, links e qualquer outra coisa que possa ser executada ou carregada de outro site são removidos, e as cores definidas com estilos, do jeito que o Illustrator e o Inkscape as exportam, são mantidas. As fotos do Unsplash ficam exatamente como o Unsplash as fornece. Imagens de outros sites não carregam na tela: adicione-as à sua biblioteca e mencione-as.

Vídeos

• Seus vídeos: selecione Importar ou solte arquivos MP4, MOV ou WebM de até 100 MB. Cada vídeo recebe uma menção a partir do nome do arquivo, como @video/latte-pour, e um quadro de capa tirado de cerca de um segundo do início.
• Do Pixabay: pesquise vídeos. Copiar a menção de um vídeo o salva nos seus vídeos, para que a menção continue funcionando. Cada vídeo do Pixabay tem o crédito do criador: onde quer que um apareça (na biblioteca, na tela e nos apps exportados), aparece "Vídeo de nome no Pixabay", com links para o perfil do criador no Pixabay e para o Pixabay.
• Selecione um vídeo para reproduzi-lo. Ali você pode copiar a menção, adicioná-lo à sua solicitação, baixá-lo ou editar o nome da menção e a descrição. Use Selecionar para excluir ou exportar vários de uma vez.

Quando você menciona um vídeo, o Vibr informa ao modelo o tamanho, o formato, a duração e a descrição dele e coloca o vídeo real no rascunho. Os rascunhos reproduzem os vídeos sem som e em loop, com uma capa, e não os iniciam sozinhos para quem pede ao dispositivo movimento reduzido.

Ao adicionar um vídeo, o Vibr remove os metadados de arquivos MP4 ou MOV, como a localização e o dispositivo em que foi gravado, e mantém a imagem e o som inalterados. Alguns quadros passam pela mesma verificação no dispositivo que as imagens. Os vídeos do Pixabay ficam exatamente como o Pixabay os fornece.

Os apps exportados levam seus vídeos junto. Até 25 MB de vídeo enviado cabem na página única; acima disso, App (.html) baixa um zip com a página e uma pasta videos ao lado dela.

Documentos

Guarde aqui briefings, notas de pesquisa e desafios de design, e leve qualquer um para uma solicitação com a menção, como @doc/ordering-app-brief.

• Adicionar documentos: selecione Importar, solte arquivos na biblioteca ou selecione Salvar na biblioteca na visualização de um documento anexado. Funcionam PDF, Word, PowerPoint, Excel, CSV, Markdown e texto, como em Anexe documentos.
• O que é guardado: o texto que o Vibr leu e até duas imagens, nunca o arquivo, então nada dele pode ser executado depois. Valem as mesmas verificações de quando você anexa.
• Usar: uma solicitação que menciona @doc/nome envia o texto e as imagens desse documento, como um anexo. As próximas solicitações só o enviam de novo se o mencionarem.
• Visualizar, renomear e excluir com os botões de cada documento. Renomear muda a menção.

Bibliotecas exportadas e arquivos de protótipo levam os documentos que usam, e o texto e as imagens são verificados de novo na importação.

Temas

Um tema é um conjunto de cores, raio do canto, espaçamento e sombras, com modos claro e escuro que atendem ao contraste WCAG.

• Novo tema abre o editor. Escolha uma cor primária e uma neutra (além de sucesso, aviso, perigo e informação, se quiser), o nível de contraste (AA ou AAA), o raio do canto, a unidade de espaçamento e o estilo das sombras.
• Importar tokens traz JSON de design tokens W3C, por exemplo do Tokens Studio para Figma ou do Style Dictionary, ou propriedades personalizadas de CSS.
• Cada tema mostra se todos os pares de cores atendem ao nível de contraste, nos dois modos.
• O menu ⋯ de um tema permite editá-lo, duplicá-lo, copiar o CSS ou os tokens dele ou excluí-lo.

Mencione um tema como @theme/default. Os rascunhos que usam um tema ganham um botão Modo escuro no canvas.

Escala tipográfica

• Importar família de fontes adiciona uma fonte a partir de arquivos WOFF2, WOFF, TTF ou OTF e cria uma escala para ela.
• Nova escala cria uma escala para uma fonte que você já usa, como a Georgia.
• Uma escala nova tem seis estilos: Display, Heading 1 a 3, Body e Caption. Editar escala altera tamanhos, pesos, alturas de linha e espaçamento entre letras ou adiciona estilos.

Mencione um estilo como @type/georgia/h1.

Ícones

• Os ícones Lucide já vêm incluídos. Pesquise um e selecione-o para copiar a menção, como @icon/arrow-right. Depois de copiar, você também pode baixá-lo como SVG.
• Importar fonte de ícones adiciona seu próprio conjunto, com o CSS dele, um selection.json do IcoMoon ou um config.json do Fontello. Uma fonte de ligaduras como Material Symbols funciona sozinha. Os ícones importados usam @icon/set/name.