Agrupar y Organizar Stencils

Al agrupar stencils individuales, puedes acelerar y simplificar tu flujo de trabajo. Los elementos agrupados – o Stencils Compuestos – pueden moverse, ajustarse, estilizarse y duplicarse como una sola unidad.

A medida que añades y agrupas nuevos stencils, tu página se convertirá en un intrincado mosaico de objetos: stencils, stencils compuestos, imágenes e iconos. Para refinar y editar tu diseño de manera efectiva, necesitarás identificar y localizar tanto objetos individuales como objetos anidados en lo profundo de grupos más grandes.

Puedes hacerlo de forma rápida y sencilla. Todos los objetos se resaltan cuando pasas el cursor sobre ellos en la página; también se resaltan cuando pasas el cursor sobre el nombre del objeto en el Panel de Esquema. Esto facilita la selección de objetos finos o pequeños y reduce los clics fallidos.

El Panel de Esquema te ayuda a gestionar tu página – y a agilizar tu flujo de trabajo – manteniendo todos tus objetos organizados dentro de una única lista de búsqueda.

En este artículo, aprenderás a agrupar, bloquear, organizar y alinear objetos en la página. También te mostraremos cómo navegar y usar el Panel de Esquema para renombrar, buscar, reorganizar, alternar la visibilidad y eliminar objetos.

Agrupar y desagrupar stencils

Cuando los objetos están agrupados, pueden moverse, ajustarse, estilizarse y duplicarse como una sola unidad. El agrupamiento funciona para todos los objetos: stencils, plantillas, imágenes e iconos.

Para agrupar o desagrupar objetos, usa el botón Grupo ubicado en la Barra de Herramientas Contextual.

Para agrupar stencils:

  1. Selecciona stencils:

    • Arrastra el ratón sobre múltiples stencils

      o

    • Usa Ctrl/Cmd + Clic para seleccionar stencils uno por uno

  2. Agrupa stencils:

    • Navega a la Barra de Herramientas Contextual y haz clic en el botón Grupo

      o

    • Haz clic derecho en uno de los objetos y elige Agrupar Selección

Para desagrupar stencils:

  • Selecciona el grupo de objetos que quieres desagrupar

  • Navega a la Barra de Herramientas Contextual y haz clic en el botón Desagrupar

    o

  • Haz clic derecho en uno de los objetos y elige Desagrupar Selección

También puedes crear y anidar grupos dentro de grupos.

Para deshacer el anidamiento de grupos, la combinación de teclas Ctrl/Cmd + Shift + Alt/Option + G descompone y aplana un grupo para crear un grupo de una sola capa.

Editar grupos de stencils

Una vez que los objetos están agrupados, puedes moverlos, formatearlos y estilizarlos como un único elemento. Pero aún puede que quieras editar un elemento individual por separado de su grupo.

Para acceder a un único objeto dentro de un grupo, haz doble clic en ese objeto. Ahora puedes formatear, estilizar o eliminar ese elemento individual.

Restricciones de redimensionamiento

Las restricciones anclan los elementos dentro de un diseño para que ajustar y redimensionar los diseños sea rápido y sencillo. Las restricciones se aplican solo a grupos, y no se aplican a una selección de objetos.

Para aplicar restricciones, primero debes habilitar la función. Luego, puedes elegir restricciones automáticas o establecer anclajes manualmente para cada objeto dentro del grupo.

Así es como funciona:

Las restricciones establecen reglas de redimensionamiento para los objetos dentro de un grupo. Estas reglas determinan cómo responderán los objetos a medida que adaptas el grupo a nuevos contextos o tamaños de pantalla.

Sin restricciones habilitadas, el comportamiento predeterminado es simplemente 'estirar' los objetos a medida que se redimensiona el grupo.

Con las restricciones aplicadas, puedes redimensionar el grupo con la confianza de que los elementos se ajustarán de forma lógica y predecible – y no 'romperán' el diseño que ya has establecido.

Redimensionamiento predeterminado por estiramiento

En Moqups, las Restricciones están desactivadas de forma predeterminada. Esto significa que a medida que redimensionas un grupo, los objetos dentro de ese grupo se estirarán:

  • Los objetos con una relación de aspecto desbloqueada (como formas y marcadores de posición) se estirarán en la dirección en que redimensiones el grupo.
  • Los objetos con una relación de aspecto bloqueada (como iconos y avatares) mantendrán su proporción, pero se harán más grandes o más pequeños a medida que redimensiones el grupo.

Habilitar restricciones de redimensionamiento

Ten en cuenta que ya debes haber creado un grupo de objetos para poder aplicar restricciones de redimensionamiento.

Para habilitar restricciones:

  1. Haz clic en el grupo para revelar la sección Opciones de Grupo del Panel de Formato.

  2. Selecciona la casilla Habilitar restricciones de redimensionamiento.

    o

    • En la barra de herramientas contextual, haz clic en el botón Habilitar restricciones de redimensionamiento
  3. Esto habilitará nuestra función de restricciones Automáticas. Puedes leer sobre las restricciones Automáticas vs Manuales a continuación.

  4. Luego, haz clic en cualquier objeto dentro del grupo para abrir la sección Restricciones del Panel de Formato.

Restricciones automáticas

Cuando habilitas las Restricciones, los anclajes se aplican automáticamente a cada objeto dentro del grupo. Estos anclajes automáticos reflejan tanto el diseño de los objetos como sus comportamientos más esperados e intuitivos al redimensionar.

Para ver los anclajes automáticos:

  1. Haz clic en cualquier objeto dentro del grupo para abrir los controles de Restricciones.
  2. Los botones de anclaje muestran las restricciones horizontales y verticales que se pueden aplicar al objeto seleccionado.
  3. Los anclajes que ya se han aplicado automáticamente se resaltan en azul.
  4. En la página, las líneas azules punteadas indican dónde está anclado el objeto seleccionado.

Cuando redimensionas el grupo, las restricciones automáticas deberían ser suficientes para mantener un diseño lógico para la mayoría de los casos de uso.

Restricciones manuales

Puedes anular las restricciones automáticas y seleccionar anclajes manualmente para cada objeto dentro del grupo. Los anclajes se pueden aplicar tanto horizontal como verticalmente.

Si haces clic en cualquier objeto dentro del grupo y pasas el cursor sobre los botones de anclaje, una información sobre herramientas explicará dónde anclan ese objeto cuando se seleccionan. También verás los botones de anclaje Proporcional que discutimos en la siguiente sección.

Si anclas un objeto tanto a la Izquierda como a la Derecha (o a la parte Superior e Inferior), el objeto puede estirarse en consecuencia a medida que redimensionas.

Para aplicar restricciones manuales a un objeto:

  1. Haz clic en cualquier objeto dentro del grupo para abrir los controles de Restricciones.
  2. Los botones de anclaje muestran las restricciones horizontales y verticales que se pueden aplicar al objeto seleccionado.
  3. Haz clic en cualquier botón de anclaje para aplicarlo al objeto.
  4. Los anclajes que selecciones serán visibles en la página como líneas azules punteadas.
  5. Si quieres volver a los anclajes automáticos para ese objeto, simplemente vuelve a seleccionar la casilla Ajustar automáticamente.

Anclajes proporcionales

Sin restricciones proporcionales, los objetos permanecen en su posición fija desde sus anclajes (superior, inferior, lados o centro) a medida que redimensionas el grupo.

La selección de restricciones proporcionales mantiene los anclajes de un objeto – ya sea establecidos automática o manualmente – pero ajusta la distancia del objeto desde cada punto de anclaje proporcionalmente al redimensionamiento.

Para establecer restricciones proporcionales para un objeto, haz clic en el símbolo de porcentaje al final de los botones de anclaje.

Moqups format panel showing the proportional anchors buttons

El siguiente vídeo demuestra el comportamiento de estiramiento predeterminado, comparado con las restricciones automáticas y las restricciones proporcionales:

Restricciones para grupos anidados

Si habilitas las restricciones de redimensionamiento para un grupo padre, los grupos anidados se tratan como objetos individuales y se les pueden aplicar anclajes automáticos o manuales.

Si quieres establecer anclajes para los objetos dentro de esos grupos 'hijo', necesitarás habilitar las restricciones para ellos por separado. Después de eso, puedes establecer anclajes para los objetos dentro del grupo anidado, tal como lo harías con el grupo padre más grande.

Para habilitar restricciones para un grupo anidado:

  1. Selecciona el grupo anidado.
  2. En la sección Opciones de Grupo, elige Habilitar restricciones de redimensionamiento.
  3. Haz clic en cualquier objeto dentro del grupo anidado para abrir los controles de Restricciones.
Resize constraints feature for nested groups

Deshabilitar restricciones de redimensionamiento

Para deshabilitar las restricciones:

  1. Haz clic en el grupo para revelar la sección Opciones de Grupo del Panel de Formato.

  2. Desmarca la casilla Habilitar restricciones de redimensionamiento

    o

    • En la barra de herramientas contextual, haz clic en el botón Deshabilitar restricciones de redimensionamiento
Disable resize constraints

Bloquear y desbloquear stencils

Una vez que un objeto está bloqueado, queda fijo en su lugar – y ya no puede moverse ni estilizarse. Esto te permite continuar editando el resto de los objetos de la página sin perturbar las partes completadas de tu diseño.

Para trabajar con un objeto bloqueado, primero debes hacer clic en él intencionalmente. Para evitar la selección accidental de objetos bloqueados, no responden a la selección por arrastre del ratón.

Para bloquear un stencil:

  • Selecciona el stencil y luego usa el Menú Contextual del botón derecho para elegir la opción Bloquear Selección, o usa el Atajo de Teclado: Ctrl/Cmd + L (esta combinación de teclas funciona tanto para Bloquear como para Desbloquear).

    o

  • En la parte superior del Panel de Formato, haz clic en el botón Bloquear a la derecha del Nombre del Objeto; una vez que un objeto está bloqueado, todas las opciones de formato para ese objeto no estarán disponibles hasta que se desbloquee.

    o

  • En el Panel de Esquema, haz clic en el botón Bloquear a la derecha del nombre del stencil; el botón se oscurecerá cuando esté bloqueado.

Cuando esté bloqueado, el stencil mostrará un marco rojo al pasar el cursor y, una vez seleccionado, aparecerá un botón de bloqueo en la esquina superior izquierda del marco rojo. Ese botón se puede usar para desbloquear el stencil.

Para desbloquear un stencil:

  • Selecciona el stencil y haz clic en el botón de Bloqueo rojo en la esquina superior izquierda del borde rojo.

    o

  • Selecciona el stencil y luego usa el Menú Contextual del botón derecho para elegir la opción Desbloquear Selección, o usa el Atajo de Teclado: Ctrl/Cmd + L (esta combinación de teclas funciona tanto para Bloquear como para Desbloquear).

    o

  • En el Panel de Esquema, haz clic en el botón Bloquear a la derecha del nombre del stencil; el botón aparecerá en gris cuando esté desbloqueado.

Para bloquear o desbloquear una selección de stencils:

  • Selecciona los stencils y luego usa el Menú Contextual del botón derecho para elegir la opción Desbloquear Selección, o usa el Atajo de Teclado: Ctrl/Cmd + L (esta combinación de teclas funciona tanto para Bloquear como para Desbloquear)

Para desbloquear todos los objetos cuando hay una mezcla de objetos bloqueados y desbloqueados en la página:

  1. Usa Ctrl/Cmd + A para seleccionar todos los objetos desbloqueados en la página
  2. Usa Ctrl/Cmd + L para bloquear todos los objetos
  3. Usa Ctrl/Cmd + L una vez más para desbloquear todos los objetos

Organizar y alinear stencils

El Menú Desplegable de Organizar en la Barra de Herramientas Superior te permite superponer, alinear y distribuir objetos para crear un diseño limpio y equilibrado.

Organizar objetos

La función Organizar te permite apilar objetos y luego moverlos hacia adelante y hacia atrás a través de las capas.

Para organizar un objeto:

  1. Selecciona el objeto que quieres organizar
  2. Accede a la función Organizar:
  • Navega a la Barra de Herramientas Superior y haz clic en el botón Organizar para abrir el menú desplegable

    o

  • Haz clic derecho en el objeto para abrir el Menú contextual y pasa el cursor sobre la opción Organizar para abrir el menú desplegable

  • Elige una acción de capas: Traer al Frente, Traer Adelante, Enviar Atrás, Enviar al Fondo

Alinear objetos

La función de Alineación organiza los objetos a lo largo de un eje vertical u horizontal común, y los distribuye equitativamente dentro del espacio compartido.

La Barra de Herramientas Contextual es la forma más rápida de alinear múltiples objetos. Cuando seleccionas más de un objeto, la barra de herramientas aparece automáticamente justo encima de esa selección. Junto con la alineación, la barra de herramientas también permite agrupar y desagrupar rápidamente los objetos seleccionados.

También puedes establecer un objeto de referencia – lo que significa que cualquier grupo seleccionado de objetos se alineará en relación a ese objeto.

Para establecer un objeto de referencia, selecciona varios objetos y luego haz clic en uno de ellos; aparecerá inmediatamente un borde azul grueso alrededor de ese objeto. Todos los objetos se alinearán ahora en relación a ese objeto de referencia designado. Para deseleccionar el objeto de referencia, simplemente haz clic fuera de tu selección.

Hay otras tres formas de acceder a las opciones de Alineación:

  • Navega a la Barra de Herramientas Superior y haz clic en el botón Organizar para abrir el menú desplegable

o

  • Haz clic derecho en un objeto para abrir el Menú contextual y pasa el cursor sobre la opción Alinear para abrir el menú desplegable

o

  • Navega a la Barra Lateral Derecha y abre el Panel de Formato. En la parte superior, encontrarás los Botones de Alineación y Distribución Rápida

Cuando se selecciona un único objeto (u objetos 'Agrupados'), los controles de alineación alinearán el objeto en relación a los límites de la página. Ten en cuenta que esta función no está disponible cuando se usa la Barra de Herramientas Contextual.

Usar el Panel de Esquema

El Panel de Esquema mantiene todos tus objetos organizados dentro de una única lista de búsqueda.

Explora los objetos y sus jerarquías en el Árbol de Esquema, o usa el campo de búsqueda para localizar rápidamente un objeto específico. Los iconos de Esquema frente a los nombres de los objetos facilitan la distinción entre tipos de stencils.

Usa el Árbol de Esquema para renombrar, buscar, reorganizar, bloquear, alternar la visibilidad y eliminar objetos.

Para abrir el Panel de Esquema:

  1. Navega a la Barra Lateral Izquierda
  2. Haz clic en la Pestaña de Esquema. La pestaña se volverá azul y abrirá el Panel de Esquema

Para seleccionar un objeto en el Panel de Esquema:

  • Haz clic en su nombre. Si seleccionas un Grupo, haz clic en el ícono de Flecha Izquierda para ver rápidamente el contenido y la jerarquía del Grupo.

Puedes bloquear y desbloquear objetos directamente desde el Panel de Esquema haciendo clic en el botón de bloqueo a la derecha del nombre del objeto. Obtén más información sobre el bloqueo de objetos aquí.

Para renombrar un objeto o grupo de objetos en el Panel de Esquema:

  1. El Panel de Esquema lista todos los objetos en la página: Stencils, Plantillas, Imágenes e Iconos
  2. Pasa el cursor sobre un elemento en el Árbol de Esquema y, en la página, un borde azul resaltará simultáneamente el objeto correspondiente
  3. Después de haber localizado el objeto, haz doble clic en su nombre para cambiarlo

También puedes aprovechar la Sincronización de Nombres en el Panel de Esquema cuando trabajas con stencils de diagrama o texto:

Cuando escribes texto en cualquier stencil de diagrama de flujo, o en los stencils de Párrafo, Encabezado y Etiqueta, esos stencils adoptan automáticamente ese texto como su nombre. Esto facilita la identificación de objetos específicos en el Panel de Esquema, especialmente en diagramas de flujo y proceso complejos, o dentro de diseños detallados.

Si no quieres que un objeto esté etiquetado con su texto, simplemente sobrescribe el nombre generado automáticamente en el Panel de Esquema o en el Panel de Formato y se mantendrá.

Para buscar un objeto en el Panel de Esquema:

  1. Selecciona el Campo de Búsqueda en la parte superior del Panel de Esquema
  2. Escribe el nombre del elemento que deseas encontrar

Para reordenar un objeto o grupo de objetos en el Panel de Esquema:

  1. Selecciona el objeto que quieres mover
  2. Arrastra y suelta ese objeto hacia arriba o hacia abajo en el Árbol de Esquema
  3. Ten en cuenta que mover un objeto más arriba o más abajo dentro de una jerarquía de grupos, o hacia arriba y hacia abajo en el Árbol de Esquema, también afectará su disposición de capas en la página

Para ocultar un objeto, simplemente alterna la visibilidad del objeto haciendo clic en el ícono de Ojo de Visibilidad a la derecha del nombre del objeto en el Árbol de Esquema.

Cambiar la visibilidad de un objeto es esencial cuando se añaden Interacciones. A menudo querrás que la interacción comience con el objeto en un estado invisible. Para obtener más información sobre Interacciones y prototipado, ve aquí.

Para eliminar un objeto o grupo de objetos desde el Panel de Esquema:

  1. Selecciona el objeto que quieres eliminar
  2. Usa la tecla Supr para eliminar ese objeto