Extensão Firefox

Nossa extensão do Firefox permite converter páginas da web ativas, partes de uma página ou elementos selecionados em mockups totalmente editáveis. Ela também permite trazer designs de IA como layouts editáveis para que você possa refiná-los e revisá-los. Pela extensão, você também pode gerar briefings de design a partir de páginas da web, capturar screenshots, criar novos projetos do Moqups ou abrir nosso aplicativo.

Neste artigo, você aprenderá como instalar a extensão no Firefox e como usar os recursos da extensão.

Instalar a extensão do Moqups

1. Visite a página de Complementos do Firefox.
2. Após instalar a extensão, o botão azul do Moqups aparecerá à direita da barra de endereços do navegador.

Transforme páginas da web ativas em layouts editáveis

Você pode querer trabalhar com mockups de páginas da web ativas por vários motivos – atualizar e manter páginas existentes, criar novas páginas que combinem com o design do que já está publicado, ou personalizar elementos repetidos em grandes hubs internos e sites de back-office.

As extensões do Moqups permitem trazer páginas da web inteiras, ou seleções delas, para o Moqups. Os designs chegam como layouts totalmente editáveis – com cada elemento separado para facilitar a seleção e a personalização.

E as opções permitem usar o design de alta fidelidade da página ou converter esse layout em um wireframe de baixa fidelidade. Você também pode importar a janela atual ou ajustar o layout para telas de desktop, laptop ou celular.

Para converter uma página da web ativa em um mockup editável:

1. Clique no ícone da extensão do Moqups à direita da barra de endereços do navegador

2. Selecione Hi-Fi Design

3. Escolha entre…

   • Selecionar área (Select area) para converter parte de uma página ou elementos individuais
   • Janela atual (Current window) para converter a página inteira
   • As opções Desktop, Laptop ou Visualização de celular (Phone View) para ajustar o layout a essas telas

4. No pop-up Seleção pronta (Selection ready)…

   • Clique no botão Copiar para a área de transferência (Copy to clipboard) para colar o layout em um projeto aberto do Moqups
   • Clique no botão Abrir no Moqups (Open in Moqups) para criar um novo projeto a partir do layout

Converta páginas da web de alta fidelidade em wireframes de baixa fidelidade

Além de importar páginas da web em fidelidade total, você também pode transformá-las em wireframes de baixa fidelidade em tons de cinza. Remover as cores e o estilo pode ajudar a focar no layout, na estrutura e no conteúdo da página. Isso é útil quando você quer comparar a estrutura subjacente de diferentes páginas, experimentar soluções de design alternativas ou começar de uma tela visualmente em branco durante um rebranding.

Para transformar uma página da web de alta fidelidade em um wireframe de baixa fidelidade:

1. Clique no ícone da extensão do Moqups à direita da barra de endereços do navegador.

2. Selecione Wireframe

3. Escolha entre…

   • Selecionar área (Select area) para converter parte de uma página ou elementos individuais
   • Janela atual (Current window) para converter a página inteira
   • Desktop, Laptop ou Visualização de celular (Phone View) para ajustar o layout a essas telas

4. No pop-up Seleção pronta (Selection ready)…

   • Clique no botão Copiar para a área de transferência (Copy to clipboard) para colar o layout em um projeto aberto do Moqups.
   • Clique no botão Abrir no Moqups (Open in Moqups) para criar um novo projeto a partir do layout.

Traga designs de IA para o Moqups

Você também pode usar a extensão do Moqups para transformar artefatos gerados por IA em designs totalmente editáveis. Isso significa que você pode usar a IA como geradora de templates – fornecendo a maior parte do layout e do texto de exemplo – antes de personalizar e refinar os detalhes no Moqups. Sua equipe também pode alternar entre o Moqups e a sua própria ferramenta de IA, exportando seções para regeneração e depois refinando o resultado passo a passo.

Para trazer um design de IA para o seu projeto do Moqups:

1. Clique no ícone da extensão do Moqups à direita da barra de endereços do navegador.

2. Escolha Hi-Fi Design ou Wireframe.

3. Selecione Converter artefato de IA ou iframe (Convert AI artifact or iframe)

4. Clique no iframe ou selecione um elemento com a barra de espaço

5. No pop-up Seleção pronta (Selection ready)…

   • Clique no botão Copiar para a área de transferência (Copy to clipboard) para colar o layout em um projeto aberto do Moqups.
   • Clique no botão Abrir no Moqups (Open in Moqups) para criar um novo projeto a partir do layout.

Gere um briefing de design para a IA

Esta é uma ótima ferramenta se você trabalha com IA e quer fornecer a ela as diretrizes da sua marca. Ela extrai o estilo de qualquer janela do navegador para gerar um briefing de design. Depois, você pode colar o briefing no seu prompt de IA para que ela saiba quais diretrizes de marca – cores, tipografia, estilo de botões e campos – usar como referência ao gerar qualquer novo design.

Tire screenshots

Com a extensão, você pode capturar a área visível de um site, uma seleção específica ou uma página inteira – e adicionar essas capturas instantaneamente à sua biblioteca de Imagens da Equipe. Isso economiza tempo quando você está montando um mood board, buscando inspiração, fazendo pesquisa de concorrentes ou criando mockups rápidos.

Para tirar screenshots:

1. Clique no ícone da extensão do Moqups à direita da barra de endereços do navegador.

2. Selecione uma das opções de Tirar screenshot (Take Screenshot):

   • Área visível (Visible Area) capturará apenas o que está atualmente visível na janela do navegador
   • Capturar região (Capture Region) permitirá que você clique e arraste para escolher uma parte específica da janela
   • Página inteira (Full Page) capturará toda a página web

3. Seu screenshot será aberto em uma nova aba do navegador; aqui, você pode nomeá-lo, salvá-lo diretamente na sua biblioteca de Imagens da Equipe no Moqups – ou cancelar se quiser tentar novamente!

4. Depois de clicar no botão Salvar no Moqups (Save to Moqups) e a imagem ter sido enviada, clique no botão Pronto! Ir para o Moqups (Done! Go to Moqups) para ir ao seu projeto.

Habilitar o conta-gotas

Nossa extensão do Firefox também habilita o conta-gotas do nosso aplicativo – para que você possa selecionar qualquer cor da página e aplicá-la instantaneamente aos seus elementos de design.

Instalar a extensão – e atualizar todas as abas abertas do Moqups – ativará automaticamente o conta-gotas. Você encontrará o ícone do conta-gotas no seletor de cores do Painel de Formato.

Para usar o conta-gotas para escolher cores:

1. Clique no ícone do conta-gotas para abrir uma janela de inspeção no canto superior direito da tela.
2. À medida que você move o cursor em forma de cruz pela página, a janela exibirá uma visão ampliada dos pixels abaixo, bem como seus valores RGB e Hex.
3. Clique para selecionar a cor abaixo do cursor.

Crie projetos e vá para o Moqups

Você pode criar instantaneamente um novo projeto ou ir direto para o Painel da sua conta, clicando no botão do Moqups no canto superior direito do navegador.

Isso é particularmente útil quando você está alternando entre várias abas no navegador – ou tirando screenshots para criar mood boards, mockups e storyboards.

Perguntas e respostas

Esta extensão está disponível para outros navegadores?

Atualmente, nossa extensão está disponível para Chrome e Firefox – e os usuários do Brave podem instalar a versão do Chrome. Estamos trabalhando em uma extensão para Safari, mas pode demorar um pouco mais para ser implementada.