Extensão Safari

Se você usa o navegador Safari para acessar nosso aplicativo, a extensão oficial do Moqups para Safari adicionará as seguintes funcionalidades e recursos:

• Converter páginas da web em layouts editáveis
• Capturar Screenshots para a Biblioteca
• Habilitar Conta-gotas para o Seletor de Cores
• Criar Projetos e Ir para o Moqups

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

Instalar a extensão do Moqups

1. Visite a Apple App Store e pesquise por Moqups
2. Após instalar a extensão, o botão azul do Moqups aparecerá à direita da barra de endereços do navegador.
3. Para habilitar o conta-gotas, você precisará atualizar todas as abas que tenham o aplicativo Moqups aberto.

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 na barra de ferramentas

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.

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!

Habilite o conta-gotas

Nossa extensão para Safari 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

Por que o conta-gotas só funciona se estou usando uma extensão de navegador?

Para fornecer todos esses recursos – incluindo o conta-gotas – optamos por depender das extensões do navegador por razões técnicas e de segurança. Para uma explicação completa dessa escolha e o raciocínio por trás dela, confira nossa postagem no blog.

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

Atualmente, nossa extensão está disponível para Safari, Firefox e Chrome – e os usuários do Brave podem instalar a versão do Chrome.