Importar do Figma

O Send to Vibr é um plugin do Figma. Ele lê o arquivo que você tem aberto no Figma (variáveis, estilos, componentes, frames e links do protótipo) e salva tudo em um único arquivo. O Vibr importa esse arquivo e cria a partir dele com o seu design system e o seu modelo.

Instale o plugin

No Figma, abra o menu Plugins, pesquise Send to Vibr e execute-o. O plugin funciona em todos os planos do Figma, incluindo o Starter.

Escolha o que enviar

O plugin envia o nível do arquivo que você escolher, do arquivo inteiro até um único elemento:

• Arquivo inteiro: os fluxos do protótipo de cada página ou, se não houver, as telas dela, página por página. Páginas de capa, de miniatura e divisórias são ignoradas.
• Uma página sem nada selecionado: os fluxos dela ou, se não houver, todas as telas que ela tem.
• Uma seção: os frames dela, cada um como uma tela.
• Um frame: essa tela.
• Um elemento: um componente, uma instância ou qualquer camada dentro de um frame. O Vibr o cria separadamente, como um componente reutilizável.

Selecione o que você quer ou escolha This page or selection ou Whole file no topo do plugin. O plugin lista o que vai enviar. Você pode combinar: uma tela e dois elementos vão juntos.

Abaixo disso, escolha o que vai junto:

• Screens and elements, with layout and prototype links e Include frames they link to, para que um fluxo chegue inteiro. As fotos que estão neles também vão, recortadas como o seu design as mostra.
• Variables, text styles and shadows, do arquivo inteiro.
• Components, com as variantes. Os que as suas telas usam vêm primeiro.

Um arquivo comporta até 12 telas e elementos, 12 fotos, 80 componentes e 1.500 variáveis.

Salve o arquivo

Selecione Save file for Vibr. O plugin salva um arquivo terminado em .vibr-figma.json. Copy coloca o mesmo conteúdo na área de transferência.

Importe no Vibr

Na caixa de solicitação, selecione + e depois Importar do Figma e escolha o arquivo. Você também pode soltar o arquivo na caixa de solicitação ou colar o que Copy colocou na área de transferência.

O diálogo lista o que o Vibr vai criar. Desmarque o que você não quiser:

• Tema de cores a partir das variáveis, adicionado à sua biblioteca.
• Escalas tipográficas, uma por família de fonte, adicionadas à sua biblioteca.
• Fotos dos frames, adicionadas à sua biblioteca como imagens enviadas, para que as telas mostrem as imagens reais.
• Telas e elementos a criar, na ordem em que o seu fluxo passa por eles.

Selecione Criar. O Vibr cria cada tela como uma solicitação própria, com o seu design system e o seu modelo, salva a tela com o nome do frame dela e passa para a próxima. Uma barra acima da caixa de solicitação mostra em qual tela ele está. Parar encerra a execução e mantém as telas já criadas.

Quando a execução termina, o Vibr abre a primeira tela. Selecione Reproduzir para navegar pelo fluxo. Consulte Fluxos.

Importar o mesmo arquivo de novo reaproveita o tema e as escalas tipográficas que a primeira importação criou.

O que vira o quê

No Figma	No Vibr
Variáveis de cor	Um tema de cores. Escalas como Brand/500 e nomes curtos como color/clay viram as cores dele; o Vibr cria os papéis claros e escuros a partir delas e verifica o contraste.
Variáveis de raio e espaçamento, estilos de sombra	Os cantos, a unidade de espaçamento e as sombras do tema.
Estilos de texto	Uma escala tipográfica para cada família de fonte, com tamanhos, pesos, alturas de linha e espaçamento entre letras. O Vibr pede as fontes ao Google Fonts quando ele as tem.
Preenchimentos de imagem	Fotos na sua biblioteca, com o nome das camadas delas (uma camada chamada Photo: latte pour vira @image/latte-pour), que as telas usam.
Frames	Telas. O modelo recebe a imagem do frame e uma estrutura das camadas dele: auto layout, texto, componentes e os tokens que cada camada usa.
Links do protótipo	Links entre as telas. Voltar vai para a tela anterior. Uma sobreposição é criada dentro da tela que a abre, como um diálogo ou uma folha, com os próprios links.
Componentes	O modelo recebe informações sobre os seus componentes e as variantes deles, e cria com as partes correspondentes do seu design system.
Um elemento	Um componente criado separadamente, centralizado na página.

Privacidade e segurança

• O plugin não tem acesso à rede. Nada sai do Figma além do arquivo que você salva.
• O Vibr verifica o arquivo antes de lê-lo. O texto entra como texto simples, sem caracteres ocultos, e cada valor é verificado e tem o tamanho limitado. Cada imagem precisa ser uma imagem real, de um tamanho que o Vibr abre, e o Vibr a redesenha, o que remove os metadados dela. As fotos entram na sua biblioteca passando pelas mesmas verificações de um envio. O texto passa pela mesma verificação de conteúdo de uma solicitação digitada.
• Nada no arquivo é executado. O texto dele vai para o seu modelo com cada solicitação como material de design, do mesmo jeito que um documento anexado. Consulte Chaves, privacidade e armazenamento.

Dicas

• Dê aos frames os nomes que você quer para as telas. Um frame chamado Checkout vira @screen/checkout.
• Para um arquivo grande, envie uma página ou uma seleção em vez do arquivo inteiro.
• Depois de uma execução, ajuste qualquer tela com uma solicitação normal, como "transforme o carrinho em uma folha inferior".