Agrupar e Organizar Stencils

Ao agrupar stencils individuais, você pode acelerar e simplificar seu fluxo de trabalho. Elementos agrupados – ou Stencils Compostos – podem ser movidos, ajustados, estilizados e duplicados como uma única unidade.

À medida que você adiciona e agrupa novos stencils, sua página se tornará um mosaico intrincado de objetos: stencils, stencils compostos, imagens e ícones. Para refinar e editar seu design de forma eficaz, você precisará identificar e localizar tanto objetos individuais quanto objetos aninhados profundamente dentro de grupos maiores.

Você pode fazer isso de forma rápida e fácil. Todos os objetos são destacados quando você passa o cursor sobre eles na página; eles também são destacados quando você passa o cursor sobre o nome do objeto no Painel de Camadas. Isso facilita a seleção de objetos finos ou pequenos e reduz cliques perdidos.

O Painel de Camadas ajuda você a gerenciar sua página – e simplificar seu fluxo de trabalho – mantendo todos os seus objetos organizados em uma única lista pesquisável.

Neste artigo, você aprenderá como agrupar, bloquear, organizar e alinhar objetos na página. Também mostraremos como navegar e usar o Painel de Camadas para renomear, pesquisar, reorganizar, alternar visibilidade e excluir objetos.

Agrupar e desagrupar stencils

Quando os objetos são agrupados, eles podem ser movidos, formatados e estilizados como um único elemento. O agrupamento funciona para todos os objetos: stencils, templates, imagens e ícones.

Para agrupar ou desagrupar objetos, use o botão Agrupar localizado na Barra de Ferramentas Contextual.

Para agrupar stencils:

1. Selecione stencils:

   • Arraste o mouse sobre múltiplos stencils

     ou

   • Use Ctrl/Cmd + Clique para selecionar stencils um de cada vez

2. Agrupe stencils:

   • Navegue até a Barra de Ferramentas Contextual e clique no botão Agrupar

     ou

   • Clique com o botão direito em um dos objetos e escolha Agrupar Seleção

Para desagrupar stencils:

• Selecione o grupo de objetos que deseja desagrupar

• Navegue até a Barra de Ferramentas Contextual e clique no botão Desagrupar

  ou

• Clique com o botão direito em um dos objetos e escolha Desagrupar Seleção

Editar grupos de stencils

Uma vez que os objetos são agrupados, você pode movê-los, formatá-los e estilizá-los como um único elemento. Mas você ainda pode querer editar um elemento individual separadamente do seu grupo.

Para acessar um único objeto dentro de um grupo, dê um duplo clique nesse objeto. Agora você pode formatar, estilizar ou excluir esse elemento individual.

Restrições de redimensionamento

As restrições ancoram elementos dentro de um design para tornar o ajuste e redimensionamento de layouts rápido e fácil. As restrições se aplicam apenas a grupos e não se aplicam a uma seleção de objetos.

Para aplicar restrições, você primeiro precisa habilitar o recurso. Em seguida, você pode escolher restrições automáticas ou definir âncoras manualmente para cada objeto dentro do grupo.

Veja como funciona:

As restrições definem regras de redimensionamento para objetos dentro de um grupo. Essas regras determinam como os objetos responderão à medida que você adapta o grupo a novos contextos ou tamanhos de tela.

Sem restrições habilitadas, o comportamento padrão é simplesmente 'esticar' os objetos à medida que o grupo é redimensionado.

Com restrições aplicadas, você pode redimensionar o grupo com confiança de que os elementos se ajustarão de forma lógica e previsível – e não 'quebrarão' o layout que você já estabeleceu.

Redimensionamento por esticamento padrão

No Moqups, as Restrições estão desativadas por padrão. Isso significa que ao redimensionar um grupo, os objetos dentro desse grupo serão esticados:

• Objetos com uma proporção desbloqueada (como formas e placeholders) serão esticados na direção em que você redimensionar o grupo.
• Objetos com uma proporção bloqueada (como ícones e avatares) manterão sua proporção, mas ficarão maiores ou menores ao redimensionar o grupo.

Habilitar restrições de redimensionamento

Observe que você já deve ter criado um grupo de objetos para aplicar restrições de redimensionamento.

Para habilitar restrições:

1. Clique no grupo para revelar a seção Opções do Grupo do Painel de Formato.

2. Selecione a caixa de seleção Habilitar restrições de redimensionamento.

   ou

   • Na barra de ferramentas contextual, clique no botão Habilitar restrições de redimensionamento

3. Isso habilitará nosso recurso de restrições Automáticas. Você pode ler sobre as restrições Auto vs Manual abaixo.

4. Em seguida, clique em qualquer objeto dentro do grupo para abrir a seção Restrições do Painel de Formato.

Restrições automáticas

Quando você habilita as Restrições, âncoras são aplicadas automaticamente a cada objeto dentro do grupo. Essas âncoras automáticas refletem tanto o layout dos objetos quanto seus comportamentos mais esperados e intuitivos ao redimensionar.

Para ver as âncoras automáticas:

1. Clique em qualquer objeto dentro do grupo para abrir os controles de Restrições.
2. Os botões de âncora exibem as restrições horizontal e vertical que podem ser aplicadas ao objeto selecionado.
3. As âncoras que já foram aplicadas automaticamente são destacadas em azul.
4. Na página, linhas pontilhadas azuis indicam onde o objeto selecionado está ancorado.

Ao redimensionar o grupo, as restrições automáticas devem ser suficientes para manter um layout lógico para a maioria dos casos de uso.

Restrições manuais

Você pode substituir as restrições automáticas e selecionar âncoras manualmente para cada objeto dentro do grupo. As âncoras podem ser aplicadas tanto horizontal quanto verticalmente.

Se você clicar em qualquer objeto dentro do grupo e passar o cursor sobre os botões de âncora, uma dica de ferramenta explicará onde eles ancoram esse objeto quando selecionados. Você também verá os botões de âncora Proporcional que discutimos na próxima seção.

Para aplicar restrições manuais a um objeto:

1. Clique em qualquer objeto dentro do grupo para abrir os controles de Restrições.
2. Os botões de âncora mostram as restrições horizontal e vertical que podem ser aplicadas ao objeto selecionado.
3. Clique em qualquer botão de âncora para aplicá-lo ao objeto.
4. As âncoras que você selecionar serão visíveis na página como linhas pontilhadas azuis.
5. Se quiser retornar às âncoras automáticas para esse objeto, basta selecionar novamente a caixa de seleção Ajustar automaticamente.

Âncoras proporcionais

Sem restrições proporcionais, os objetos permanecem em sua posição fixa a partir de suas âncoras (topo, fundo, lados ou centro) ao redimensionar o grupo.

Selecionar restrições proporcionais mantém as âncoras de um objeto – sejam definidas automaticamente ou manualmente – mas ajusta a distância do objeto de cada ponto de âncora proporcionalmente ao redimensionamento.

Para definir restrições proporcionais para um objeto, clique no símbolo de porcentagem no final dos botões de âncora.

O seguinte vídeo demonstra o comportamento de esticamento padrão, em comparação com as restrições automáticas e as restrições proporcionais:

Restrições para grupos aninhados

Se você habilitar restrições de redimensionamento para um grupo pai, quaisquer grupos aninhados são tratados como objetos individuais e podem ter âncoras automáticas ou manuais aplicadas a eles.

Se quiser definir âncoras para objetos dentro desses grupos 'filhos', você precisará habilitar as restrições para eles separadamente. Depois disso, você pode definir âncoras para objetos dentro do grupo aninhado, da mesma forma que faria para o grupo maior, pai.

Para habilitar restrições para um grupo aninhado:

1. Selecione o grupo aninhado.
2. Na seção Opções do Grupo, escolha Habilitar restrições de redimensionamento.
3. Clique em qualquer objeto dentro do grupo aninhado para abrir os controles de Restrições.

Desabilitar restrições de redimensionamento

Para desabilitar restrições:

1. Clique no grupo para revelar a seção Opções do Grupo do Painel de Formato.

2. Desmarque a caixa de seleção Habilitar restrições de redimensionamento

   ou

   • Na barra de ferramentas contextual, clique no botão Desativar restrições de redimensionamento

Bloquear e desbloquear stencils

Uma vez que um objeto é bloqueado, ele fica fixo no lugar – e não pode mais ser movido ou estilizado. Isso permite que você continue editando o restante dos objetos na página sem perturbar as partes concluídas do seu design.

Para trabalhar com um objeto bloqueado, você deve primeiro clicar nele intencionalmente. Para evitar a seleção acidental de objetos bloqueados, eles não respondem à seleção por arrastar o mouse.

Para bloquear um stencil:

• Selecione o stencil e use o Menu de Contexto com o botão direito para escolher a opção Bloquear Seleção, ou use o Atalho de Teclado: Ctrl/Cmd + L (este atalho funciona tanto para Bloquear quanto para Desbloquear).

  ou

• No topo do Painel de Formato, clique no botão Bloquear à direita do Nome do Objeto; uma vez que um objeto é bloqueado, todas as opções de formatação para esse objeto ficarão indisponíveis até que seja desbloqueado.

  ou

• No Painel de Camadas, clique no botão Bloquear à direita do nome do stencil; o botão ficará mais escuro quando bloqueado.

Quando bloqueado, o stencil exibirá uma moldura vermelha ao passar o cursor e, uma vez que o stencil é selecionado, um botão de bloqueio aparecerá no canto superior esquerdo da moldura vermelha. Esse botão pode ser usado para desbloquear o stencil.

Para desbloquear um stencil:

• Selecione o stencil e clique no botão Bloquear vermelho no canto superior esquerdo da borda vermelha.

  ou

• Selecione o stencil e use o Menu de Contexto com o botão direito para escolher a opção Desbloquear Seleção, ou use o Atalho de Teclado: Ctrl/Cmd + L (este atalho funciona tanto para Bloquear quanto para Desbloquear).

  ou

• No Painel de Camadas, clique no botão Bloquear à direita do nome do stencil; o botão ficará acinzentado quando desbloqueado.

Para bloquear ou desbloquear uma seleção de stencils:

• Selecione os stencils e use o Menu de Contexto com o botão direito para escolher a opção Desbloquear Seleção, ou use o Atalho de Teclado: Ctrl/Cmd + L (este atalho funciona tanto para Bloquear quanto para Desbloquear)

Para desbloquear todos os objetos quando há uma mistura de objetos bloqueados e desbloqueados na página:

1. Use Ctrl/Cmd + A para selecionar todos os objetos desbloqueados na página
2. Use Ctrl/Cmd + L para bloquear todos os objetos
3. Use Ctrl/Cmd + L mais uma vez para desbloquear todos os objetos

Organizar e alinhar stencils

O Menu Suspenso Organizar na Barra de Ferramentas Superior permite sobrepor, alinhar e distribuir objetos para criar um design limpo e equilibrado.

Organizar objetos

O recurso Organizar permite empilhar objetos e, em seguida, movê-los para frente e para trás entre as camadas.

Para organizar um objeto:

1. Selecione o objeto que deseja organizar
2. Acesse o recurso Organizar:

• Navegue até a Barra de Ferramentas Superior e clique no botão Organizar para abrir o menu suspenso

  ou

• Clique com o botão direito no objeto para abrir o Menu de Contexto e passe o cursor sobre a opção Organizar para abrir o menu suspenso

• Escolha uma ação de camadas: Trazer para Frente, Avançar, Enviar para Trás, Enviar para o Fundo

Alinhar objetos

O recurso Alinhamento organiza os objetos ao longo de um eixo vertical ou horizontal comum e os distribui igualmente dentro de seu espaço compartilhado.

A Barra de Ferramentas Contextual é a maneira mais rápida de alinhar múltiplos objetos. Quando você seleciona mais de um objeto, a barra de ferramentas aparece automaticamente logo acima dessa seleção. Junto com o alinhamento, a barra de ferramentas também permite agrupar e desagrupar rapidamente os objetos selecionados.

Você também pode definir um objeto de referência – o que significa que qualquer grupo selecionado de objetos se alinhará em relação a esse objeto.

Para definir um objeto de referência, selecione vários objetos e, em seguida, clique em um deles; uma borda azul espessa aparecerá imediatamente ao redor desse objeto. Todos os objetos agora se alinharão em relação a esse objeto de referência designado. Para desselecionar o objeto de referência, basta clicar fora da sua seleção.

Há três outras maneiras de acessar as opções de Alinhamento:

• Navegue até a Barra de Ferramentas Superior e clique no botão Organizar para abrir o menu suspenso

ou

• Clique com o botão direito em um objeto para abrir o Menu de Contexto e passe o cursor sobre a opção Alinhar para abrir o menu suspenso

ou

• Navegue até a Barra Lateral Direita e abra o Painel de Formato. No topo, você encontrará os Botões de Alinhamento e Distribuição Rápidos

Quando um único objeto (ou objetos 'Agrupados') está selecionado, os controles de alinhamento alinharão o objeto em relação aos limites da página. Observe que esta função não está disponível ao usar a Barra de Ferramentas Contextual.

Usando o Painel de Camadas

O Painel de Camadas mantém todos os seus objetos organizados em uma única lista pesquisável.

Navegue pelos objetos e suas hierarquias na Árvore de Camadas, ou use a entrada de pesquisa para localizar rapidamente um objeto específico. Os ícones de Camadas na frente dos nomes dos objetos facilitam distinguir entre tipos de stencil.

Use a Árvore de Camadas para renomear, pesquisar, reorganizar, bloquear, alternar visibilidade e excluir objetos.

Para abrir o Painel de Camadas:

1. Navegue até a Barra Lateral Esquerda
2. Clique na Aba Camadas. A aba ficará azul e abrirá o Painel de Camadas

Para selecionar um objeto no Painel de Camadas:

• Clique no seu nome. Se você selecionar um Grupo, clique no ícone de Seta para a Esquerda para visualizar rapidamente o conteúdo e a hierarquia do Grupo.

Para renomear um objeto ou grupo de objetos no Painel de Camadas:

1. O Painel de Camadas lista todos os objetos na página: Stencils, Templates, Imagens e Ícones
2. Passe o cursor sobre um item na Árvore de Camadas e, na página, uma borda azul destacará simultaneamente o objeto correspondente
3. Após localizar o objeto, dê um duplo clique no seu nome para alterá-lo

Você também pode aproveitar a Sincronização de Nomes no Painel de Camadas ao trabalhar com stencils de diagrama ou texto:

Quando você digita texto em qualquer stencil de fluxograma, ou nos stencils Parágrafo, Título e Rótulo, esses stencils adotam automaticamente esse texto como nome. Isso facilita identificar objetos específicos no Painel de Camadas, especialmente em fluxos e diagramas de processo complexos, ou dentro de designs detalhados.

Se não quiser que um objeto seja rotulado com seu texto, basta substituir o nome gerado automaticamente no Painel de Camadas ou no Painel de Formato e ele permanecerá.

Para pesquisar um objeto no Painel de Camadas:

1. Selecione a Entrada de Pesquisa no topo do Painel de Camadas
2. Digite o nome do item que deseja encontrar

Para reordenar um objeto ou grupo de objetos no Painel de Camadas:

1. Selecione o objeto que deseja mover
2. Arraste e solte esse objeto para cima ou para baixo na Árvore de Camadas
3. Observe que mover um objeto para cima ou para baixo dentro de uma hierarquia de grupo, ou para cima e para baixo na Árvore de Camadas, também afetará sua organização em camadas na página

Para ocultar um objeto, basta alternar a visibilidade do objeto clicando no ícone Olho de Visibilidade à direita do nome do objeto na Árvore de Camadas.

Para excluir um objeto ou grupo de objetos do Painel de Camadas:

1. Selecione o objeto que deseja excluir
2. Use a tecla Delete para remover esse objeto