Exportar

Um dos pontos fortes do Moqups é que todas as partes interessadas podem colaborar online, em tempo real, de onde quer que estejam e a partir de qualquer dispositivo. Mas ainda há muitos cenários em que faz sentido usar métodos tradicionais e exportar parte – ou mesmo a totalidade – dos seus projetos do Moqups.

A exportação permite que você compartilhe seu trabalho com pessoas que podem estar trabalhando em um ambiente offline, não têm acesso total a um determinado projeto ou não têm uma conta no Moqups.

E em projetos complexos, exportar apenas uma parte desse projeto pode às vezes ajudar a focar a discussão ou simplificar a navegação.

Quem pode usar este recurso?

Você pode exportar projetos do Moqups como…

Uma série de imagens nos formatos PNG ou PDF

ou

Uma versão HTML offline do próprio Visualizador

O Moqups também permite exportar objetos individuais ou grupos de objetos.

O artigo a seguir mostra como acessar a função Exportar. Ele também explica cada formato de exportação, bem como as opções de exportação disponíveis para cada tipo.

Acessando a exportação

Você pode acessar a função Exportar a partir de…

• Barra de Ferramentas Superior
• Menu Principal do Moqups
• Painel de Páginas (usando o Menu de Contexto pelo clique direito)

Cada um desses métodos de acesso abre o Diálogo de Exportação do Projeto, exibe as páginas/pastas que você selecionou, permite que você escolha o Formato e as Opções de exportação, e solicita que você escolha um Destino para seus arquivos exportados.

Exportar para PNG, PDF e HTML Viewer

No topo do Diálogo de Exportação do Projeto, você pode escolher exportar em formato PNG, PDF ou como HTML Viewer. Cada um desses tipos de exportação tem vantagens específicas e opções de exportação.

Exportar como PNG

• Exporta uma série de arquivos de imagem PNG individuais.
• É uma boa solução se você quiser incorporar essas imagens em páginas da web ou editá-las em outros softwares gráficos.
• Exporta como meu_nome_de_projeto.zip.

Exportar como PNG oferece cinco Opções de exportação no Diálogo de Exportação do Projeto:

• Todas as Páginas ou Páginas Selecionadas:

  Se você quiser exportar páginas e/ou pastas selecionadas, precisará selecioná-las antes de acessar a função Exportar.

• Incluir páginas ocultas:

  Selecionar esta opção inclui páginas que estão definidas como invisíveis na Árvore de Páginas do Painel de Páginas.

• Recortar aos limites do conteúdo:

  Habilitar esta opção redimensiona e reposiciona automaticamente suas imagens exportadas para que se ajustem ao conteúdo visível exato de suas páginas. Esse recurso economiza tempo e permite incorporar imagens exportadas em páginas da web ou wikis – ou abri-las em outros aplicativos – sem precisar recortar cada uma manualmente.

• Fundo transparente:

  Marcar esta opção cria páginas de exportação com fundos transparentes, permitindo que as imagens resultantes sejam inseridas perfeitamente em outros designs e artes.

• Escala:

  Escolha 1x para imagens em resolução padrão com tamanho de arquivo menor; 2x para imagens de alta resolução nítidas o suficiente para impressão e visualização na maioria dos monitores; 3x para compatibilidade com as telas de dispositivos mais recentes.

Exportar como PDF

• É ideal para compartilhar ou imprimir projetos com várias páginas.
• Preserva links e hotspots no próprio PDF, tornando o arquivo PDF um protótipo interativo que pode ser enviado por e-mail.
• Inclui um Índice hierárquico que fornece uma visão clara da estrutura de suas páginas e facilita a navegação.
• Permite proteger seu arquivo com senha.
• Exporta como 'meu_nome_de_projeto.pdf'.

Exportar como PDF oferece três Opções de exportação no Diálogo de Exportação do Projeto:

• Todas as Páginas ou Páginas Selecionadas:

  Se você quiser exportar páginas e/ou pastas selecionadas, precisará selecioná-las antes de acessar a função Exportar.

• Incluir páginas ocultas:

  Selecionar esta opção inclui páginas que estão definidas como invisíveis na Árvore de Páginas do Painel de Páginas.

• Protegido por senha:

  Selecionar esta opção permite adicionar uma camada extra de segurança definindo uma senha para o seu PDF exportado. O Moqups não registra nem armazena a senha que você escolher.

Exportar como HTML Viewer

• Baixa um protótipo totalmente interativo que pode ser visualizado offline.
• Inclui todas as Interações e Comentários do seu projeto, e exibe a Barra de Ferramentas Superior do projeto, bem como os Painéis de Páginas e Comentários.
• Os arquivos HTML Viewer exportados podem ser hospedados em ambientes restritivos, como servidores de intranet atrás de firewall – ou distribuídos por meio de soluções corporativas de gerenciamento de documentos como o Microsoft SharePoint.
• Exporta como meu_nome_de_projeto.zip.
• O arquivo zip contém todos os arquivos dependentes. Para visualizar, extraia o arquivo e clique no arquivo HTML Viewer para abri-lo no seu navegador.

Selecionar páginas para exportação

A exportação para PNG e PDF permite exportar todo o projeto ou selecionar páginas específicas. Se você quiser exportar páginas e/ou pastas selecionadas, precisará selecioná-las antes de acessar a função Exportar:

• Para selecionar uma página ou pasta individual, clique nesse item na Árvore de Páginas.

ou

• Para selecionar uma série consecutiva de páginas ou pastas para exportação, clique no primeiro item da lista. Em seguida, mantenha a tecla Shift pressionada enquanto clica no último item que você quer incluir nessa série sequencial.

ou

• Para selecionar várias páginas ou pastas não consecutivas, mantenha a tecla Ctrl/Cmd pressionada e faça a seleção um item por vez.

Selecionar destino de exportação

No Diálogo de Exportação, escolha um destino para o seu projeto exportado:

• Download:

  Exporta para a pasta Downloads no seu computador.

• Google Drive:

  Exporta diretamente para a pasta Meu Drive no seu Google Drive. (Na primeira vez que você usar este recurso, o Moqups solicitará autorização para se conectar ao Google Drive.) Saiba mais sobre nossa integração com o Google Drive.

• Dropbox:

  Exporta seu projeto diretamente para a pasta Aplicativos → Moqups da sua conta do Dropbox. (Na primeira vez que você usar este recurso, o Moqups solicitará autorização para se conectar ao Dropbox.) Saiba mais sobre nossa integração com o Dropbox.

• Box:

  Exporta seu projeto diretamente para a pasta Todos os Arquivos da sua conta do Box. (Na primeira vez que você usar este recurso, o Moqups solicitará acesso e conexão ao Box.) Saiba mais sobre nossa integração com o Box.

Link de exportação

Se quiser compartilhar um link direto para a página ou projeto exportado – em vez de enviar o arquivo exportado como anexo – basta clicar com o botão direito no link de download e copiar a URL. O link seguro S3 expirará após 4 horas.

Exportar um Objeto ou Seleção de Objetos

Você pode exportar objetos únicos ou múltiplos no formato PNG. Este recurso é extremamente útil se você quiser exportar apenas parte da sua página – por exemplo, baixar os diferentes estados de um botão de uma só vez.

E, se você estiver construindo um site ou aplicativo, isso significa que os assets que você cria no Moqups podem ser incluídos no seu produto final – estendendo sua utilidade muito além dos protótipos temporários.

Para exportar um objeto ou grupo de objetos:

1. Selecione o(s) objeto(s) que deseja exportar.

2. Clique com o botão direito na sua seleção e escolha Exportar seleção no Menu de Contexto.

3. Selecione a escala da sua exportação:

• PNG@1x (imagens em resolução padrão com tamanho de arquivo menor)
• PNG@2x (imagens de alta resolução prontas para impressão)
• PNG@3x (compatível com as telas de dispositivos mais recentes)

4. Observe que Exportar Seleção mescla as camadas de um grupo de objetos e exporta o grupo como um único arquivo, e não como vários arquivos.

Handoff de propriedades de objetos e código CSS/JSX

O Painel de Handoff para Desenvolvedor permite obter as Propriedades e o código CSS ou JSX de um ou mais objetos na página.

Isso é útil quando você está trabalhando em uma prova de conceito com designers gráficos e desenvolvedores. Essas especificações podem ajudar a dar início ao desenvolvimento e fornecer uma ideia de como os elementos da página ficarão após a implementação.

A seção Propriedades exibe as especificações (coordenadas, tamanho, altura de linha, fontes e cores) de um único objeto quando você o seleciona, ou do grupo inteiro quando você seleciona vários objetos.

A seção Código exibe o CSS ou JSX para objetos únicos ou múltiplos quando você os seleciona – e inclui uma classe de grupo se os objetos foram agrupados formalmente.

Use o botão Configurações no canto superior direito do painel para escolher:

• Formato de cor (RGB ou Hex)
• Unidade de comprimento (pixels ou rem)
• Formato de código (CSS ou JSX)

Para copiar o código CSS ou JSX:

1. Selecione um ou mais objetos na página.
2. Clique no botão Handoff no Menu Superior para alternar a abertura/fechamento do painel.
3. Use o menu Configurações para escolher entre o código CSS e JSX.
4. Clique no botão Copiar para a área de transferência para obter o código.

Você também pode copiar o CSS de um ou mais objetos selecionando-os e usando a opção Copiar CSS no Menu de Contexto pelo clique direito, e depois colar onde precisar do código.

Perguntas e respostas

A exportação inclui objetos fora da página – na tela?

Para os formatos PNG e PDF, a exportação corta todo o conteúdo fora da margem da página. Por outro lado, a exportação como HTML Viewer funciona como o Visualizador do aplicativo; ele exibirá objetos fora das margens da página, a menos que você tenha selecionado Ocultar conteúdo fora das páginas nas opções de Espaço de Trabalho → Configurações de Página.

Quais interações funcionam em um PDF exportado?

Todas as Interações de Página funcionam normalmente, com exceção de Voltar, que depende do histórico do seu navegador para direcionamento. As Interações de Objeto não funcionam em PDFs.

Se você quiser fornecer às partes interessadas um protótipo totalmente funcional, convide-as como convidadas do projeto ou compartilhe um link do projeto. Saiba como fazer ambos em Compartilhamento. Para exportar todas as interações, use a opção Exportar como HTML Viewer.

Há uma forma de incluir comentários de página durante a exportação?

A exportação como HTML Viewer inclui os Comentários e o Painel de Comentários. Não há como exportar comentários em formato PDF ou PNG, mas se quiser incluir um comentário essencial nesses formatos, você sempre pode adicionar um stencil de Nota ou Balão à página antes de exportar.