O que há de novo

Banani MCP

• Conecte Banani a qualquer agente de codificação AI com suporte MCP

• Claude Code, Cursor, Codex -- e mais

• Selecione designs e envie diretamente para a sua base de código

Gemini 3.1 Pro

• O modelo Gemini mais recente agora está disponível no Banani

• Geração de design mais limpa com uma gama muito mais ampla de estilos

• Usado como modelo base para geração

Unificado mobile/desktop

• Não mais projetos separados para diferentes tamanhos de tela

• Gere designs de desktop e mobile lado a lado

• Novo ícone de tamanho de tela visível diretamente no painel de telas

Atalho para desktop/mobile

• Novo atalho para rapidamente gerar um tamanho de tela diferente

• Crie uma versão correspondente de desktop ou mobile em segundos

• Instruções preenchidas previamente para melhores resultados de conversão

• Mais tamanhos (tablets, etc.) e tamanho livre em breve

Melhorias na qualidade de vida

• Copie designs entre projetos com CMD+C e CMD+V

• Tokens de cor e arredondamento agora filtrados com base na sua seleção

• Novo modelo mais rápido para geração de imagens dentro dos designs

• Defina o nome e avatar para sua equipe

• Ainda mais limpeza na tela inicial

Correções Críticas

• Corregido o bug quando designs eram gerados sem estilos

• Corrigido conflito de atalhos de teclado "-", "+", e "espaço" ao editar textos

Modo "Selecionar" na tela

• Alternar entre os modos "Selecionar" e "Mover/Pan"

• Selecione a área com várias telas de uma vez

• Excluir, mover ou organizar várias telas em uma ação

• Pressione "Espaço" para se mover

Referências múltiplas de imagem/Figma

• Anexe várias imagens ou Figmas como referências

• Carregue capturas de tela, mockups ou imagens de inspiração

• Especifique o que usar de cada imagem

Tutoriais, inspiração, nova navegação

• Navegação redesenhada com um novo layout de barra lateral

• Tela inicial renovada e mais focada

• Nova página dedicada a tutoriais

• Espaço separado para projetos de exemplo

• Novo logo :)

Novos atalhos de projeto

• Novas ações rápidas logo abaixo da caixa de prompt

• Acesso com um clique para começar de uma imagem ou Figma

• Opções pré-preenchidas para criar um wireframe, landing ou app

Melhorias de qualidade de vida

• Usuários do plano gratuito agora recebem 3 exportações do Figma para experimentarem!

• Temas usados no projeto agora são agrupados separadamente

• Novo menu de configurações unificado para novos projetos

Correções Críticas

• Corrigido o problema dos temas não aplicarem corretamente em alguns casos

• Corrigido o salto de visualização ao trocar de versões

• Corrigido o AI criando mil temas dentro de um projeto com variações mínimas

Novo atalho de variante

• Explore variações de um design existente sem escrever uma solicitação

• Clique em "+ Variante" no topo e escolha entre alguns presets

• "Simplificar design", "Tentar layout diferente" e mais

Número de variantes

• Escolha o número de variantes na primeira tela para novos projetos

• Banani gera este número de alternativas para escolher

• Mantenha o que você gosta, delete o resto

Geração de imagens

• Banani agora gera imagens em vez de usar fotos de banco

• Tudo, desde imagens fotorrealistas até ilustrações abstratas

• Por padrão, combina cores e o tom do tema do design

• Novos espaços reservados para avatares de usuário cobrem todas as raças, idades e gêneros

Geração e edição paralelas

• Gere e edite várias telas ao mesmo tempo

• Não precisa esperar uma tela terminar antes de trabalhar em outra

• Especialmente útil para projetos com muitas telas

Edição mais rápida

• Edições "pequenas" mudam apenas as partes relevantes de um design

• Edições "grandes" regeneram todo o design

• Iteração mais rápida sem esperar a regeneração total

Correções Críticas

• Corrigido um problema quando designs com barras laterais eram renderizados incorretamente

• Corrigidos casos em que solicitações de geração ficavam travadas por mais de 10 minutos

• Corrigida a falta de indicação visual ao selecionar elementos para edição

Edição manual de texto

• Edite textos sem IA

• Digite/cole qualquer coisa dentro do elemento de texto selecionado

• Mude para o modo Selecionar e clique duas vezes em qualquer elemento de texto para fazer isso

• Novo atalho para entrar no modo Selecionar -- segure ⌘ ou Control

Pré-configuração de wireframe

• Nova pré-configuração dedicada ao tema Wireframe

• Gere wireframes lofi, preto e branco com aparência artesanal

• Configure ao criar um novo projeto ou em telas existentes

Correções Críticas

• Exportação PNG/JPG no Firefox finalmente corrigida

• Eliminada a maioria dos problemas com exportação Figma

• Corrigido o problema de tokens de cores de tema transparentes

Desfrute de uma tela mais ágil, geração de tela mais inteligente com o novo modo Melhor Modelo, temas por tela flexíveis, convites gratuitos para a equipe e uma série de correções importantes.

Modo "Melhor Modelo"

• Banani agora troca modelos de forma inteligente com base no seu prompt

• Gemini 3 Pro para novas telas e edições criativas de alto contexto

• GPT-5.1 para alterações rápidas ou menos criativas

Temas de Tela

• Reverta alterações de tema se não gostar de uma edição gerada por IA

• Defina temas diferentes para telas individuais dentro do mesmo projeto

• Compare múltiplos estilos visuais sem duplicar todo o projeto

Tela Super Ágil

• Interações na tela mais rápidas e suaves, mesmo em projetos grandes

• Redução significativa do atraso em computadores com especificações mais baixas

• Arrastar e soltar mais responsivo pela tela

Equipes Gratuitas

• Crie uma equipe e convide quantos membros gratuitos quiser, sem necessidade de plano pago

• Escolha entre atualizar o espaço de trabalho ou apenas um único usuário

Correções Críticas

• A exportação do Figma agora preserva corretamente os pesos das fontes

• Crashes que afetavam alguns links de visualização foram resolvidos

Mova telas por qualquer lugar na tela, crie designs impressionantes com o atualizado Gemini 3, e aproveite muitas outras melhorias.

Tela livre

• Arraste e solte telas em qualquer lugar na tela

• Organize-as em várias linhas ou em qualquer layout que desejar

• Em breve: seleção múltipla de telas, linhas-guia, alinhamento, etc.

Ajustes do Gemini 3

• Na semana passada, adicionamos o Gemini 3, e agora está ainda mais forte

• Ajustado para gerar designs mais limpos e modernos

• Os exemplos acima mostram o que ele pode fazer!

• Banani é o melhor lugar para usar o Gemini 3 em design de UI

Limpeza da UI

• Alternar "Bloquear edições de IA" para Temas, evitando alterações indesejadas

• Redução da desordem visual em todo o produto: página inicial limpa, componentes de entrada de comando, tela e mais

• Seletor de Anexo unificado para imagens e referências do Figma

Nós lançamos muuuuitas coisas que você pediu. Desde as primeiras funcionalidades colaborativas, atualizações de como as referências funcionam, até tornar o Banani mais rápido que o Relâmpago McQueen.

Exportação de Código

• Copie o código da página, começando com a exportação de HTML/CSS puro.

• Peça para ferramentas de codificação de vibe ou desenvolvedores converterem o design para o framework de sua escolha.

Imagem de Referência

• Imagem de referência está disponível dentro da tela!

• Adicione imagens e capturas de tela ao trabalhar em telas individuais.

• Use o atalho de teclado para colar imagem da área de transferência.

Equipes

• Crie uma equipe e convide membros para se juntarem à sua organização.

• Tenha um espaço de trabalho compartilhado com os projetos da sua equipe.

• Obtenha cobrança centralizada e gestão de membros da equipe.

• Mais coisas de equipe estão chegando!

Carregamentos Instantâneos

• Reestruturamos nosso backend e banco de dados do zero.

• Os tempos de carregamento do app parecem quase instantâneos;

• Por exemplo, abrir um projeto leva <1s.

• A página inicial carrega suavemente, sem alterações de layout.

Tela Renovada

• Modo claro para facilitar a acessibilidade.

• Inúmeros ajustes em todos os elementos para tornar o Banani mais agradável de usar no dia a dia.

Qualidade de Vida

• Duplicar projeto!

• Etapa de melhoria de prompt renovada.

• Um monte de novas fontes para seus temas.

• Adicione seu prompt para “Gerar próxima tela”.

• E inúmeras pequenas melhorias.

Tokens de Arredondamento

O raio de canto agora faz parte dos Temas. Você verá 4 níveis de arredondamento por padrão, do pequeno ao extra grande. Você pode ajustá-los manualmente, e a IA do Banani os aplicará de forma consistente em seus designs.

Tokens de Família de Fontes

A família de fontes agora é gerenciada no nível do Tema em vez de por design. Isso significa que você pode trocar fontes em todo o seu projeto em um único passo.

Agora você também pode pedir à IA para mudar a família de fontes! O que significa que você pode finalmente pedir para ela "Brincar com as fontes" ou "Tornar a fonte mais divertida".

Mais Melhorias de Velocidade

Continuamos nosso esforço para tornar a geração de design o mais rápida possível e lançamos outro lote de atualizações de velocidade.

Embora esta rodada seja menor que a anterior, reduz o tempo de geração em 3–4s.

Seleção de Qualidade/Velocidade

A partir de agora, você pode escolher entre a melhor qualidade de geração e a velocidade de geração.

Alterne entre as opções “Melhor Qualidade” e “Maior Velocidade” para geração a qualquer momento e em todos os projetos que você criou antes.

Opção de Melhor Qualidade

Perfeita para designs detalhados e de alta fidelidade. Nossa IA agora lida melhor com espaçamento e lacunas, com muitas pequenas melhorias que fazem os layouts parecerem mais refinados.

Opção de Maior Velocidade

Ideal para edições rápidas ou protótipos de baixa a média fidelidade. Você verá os resultados quase instantaneamente sem se concentrar nos detalhes até estar pronto para o design final.

Atualizações Gerais de Velocidade

As gerações agora são até 2× mais rápidas para páginas com imagens, com mais aumentos de velocidade chegando em breve.

Atualizações do Canvas

Rolagem, panorâmica e zoom agora estão mais semelhantes a outras ferramentas focadas em canvas como Miro e Figma.

Apresentando Temas

Os temas são coleções de estilos que você pode reutilizar em diferentes designs. Estão disponíveis para edição manual e para que a IA do Banani edite através de prompts.

Ao criar um novo projeto, você pode optar por gerar um novo Tema ou selecionar entre os temas que criou anteriormente.

Personalizar Temas

Vá para a aba de Estilos e veja todos os detalhes sobre o Tema e os tokens de design que ele contém. Cada cor usada no design será exibida ali.

Você pode pedir à IA para alterar essas cores ou clicar em qualquer cor para ajustá-la você mesmo.

Importar Estilos Existentes

Você também pode importar suas paletas de cores ou estilos de marca existentes. Simplesmente insira as cores HEX no prompt de IA ou anexe uma imagem de referência e peça para Banani copiar suas cores.

Banani saiu da fase alfa! Está pronto para ajudá-lo a mover-se mais rápido da ideia para a interface. Temos 4 novidades que VOCÊ pediu, e muitas outras melhorias para a qualidade de vida.

NOVO UI-AI

• Instruções que antes geravam lixo agora produzem resultados de qualidade

• Layouts complexos de múltiplas colunas, páginas de aterrissagem, QUALQUER COISA

• Designs aparecem em tempo real, elemento por elemento

Edição Parcial

• Edição AI de uma parte selecionada do design

• Ideal para fazer ajustes rápidos e precisos

• Remova elementos, mude textos, etc.

Copiar-Colar para Figma

• Selecione a tela no Banani

• Clique em "Copiar para Figma"

• COLE diretamente no Figma

Nota: Funciona apenas com projetos criados este mês, então tente gerar novos projetos!

Referências de Imagens

• Anexe capturas de tela, wireframes, esboços, interfaces reais

• Banani irá copiar o layout e o conteúdo

• Ótimo para redesenhos, edições em UI de produtos existentes

O Que Mais Há de Novo?

Lançamos múltiplas ATUALIZAÇÕES GRANDES no último mês que você pode ter perdido. Aqui estão alguns destaques:

• Tempo de resposta da AI mais rápido

• Painel de tela+estilos refeito

• Navegação mais fácil em projetos grandes

• Canvas mais ágil

• Duplicação de telas

• E mais...