En este artículo:
En la Introducción al Área de Trabajo, proporcionamos una descripción general del botón y las opciones de Configuración.
Este artículo cubre cómo cambiar el tema visual del editor. También te mostraremos cómo usar nuestras reglas, guías, cuadrículas, ajuste y funciones de medición para ayudar a acelerar tu flujo de trabajo mientras posicionas objetos en la página.
Explicaremos cómo mostrar u ocultar todas estas opciones, así como nuestras herramientas de Puntos de Acceso, Controles de Zoom y Colaboración en Vivo.
El siguiente artículo, Configuración Avanzada, cubre controles más detallados que afectan lo que muestra el Editor y cómo tu cursor interactúa con los objetos en la página.
Temas
Puedes cambiar la apariencia del editor cambiando su tema. El valor predeterminado es el modo Claro, pero puedes cambiar fácilmente a los modos Oscuro, Clásico, Neutro o Medianoche. También puedes elegir la opción Coincidir con el Sistema si quieres que Moqups refleje la configuración de tu navegador.
Para cambiar el tema del editor:
- Haz clic en el botón Configuración hacia la parte inferior de la Barra Lateral Izquierda.
- Pasa el cursor sobre la opción Tema y selecciona entre las opciones Claro, Oscuro, Clásico, Neutro, Medianoche o Coincidir con el Sistema.
Reglas de página
Las Reglas de Página aparecen a lo largo de los márgenes izquierdo y superior del lienzo y están calibradas en píxeles.
Las Reglas están habilitadas por defecto y deben mostrarse si quieres añadir Guías Personalizadas a tu página.
Para mostrar u ocultar las reglas:
- Haz clic en el botón Configuración hacia la parte inferior de la Barra Lateral Izquierda.
- Selecciona o deselecciona la opción Mostrar reglas en el menú desplegable.
Guías personalizadas
Añadir Guías Personalizadas a la página puede ayudar a tu equipo con el posicionamiento relativo de objetos o grupos de objetos.
Las Guías son visibles, como líneas azules delgadas, solo en el modo de Edición, donde sirven como herramientas temporales de diseño y alineación. No se verán cuando Previsualices o Exportes tu página.
Cuando eliges mostrar, ocultar o borrar guías, lo haces para todos los colaboradores con derechos de edición.
Antes de añadir guías personalizadas, debes asegurarte de que la opción Mostrar reglas del menú Configuración esté seleccionada y de que las reglas sean visibles a lo largo de los márgenes del lienzo.
Las guías se añaden y eliminan de páginas individuales, pero la opción Mostrar guías personalizadas se aplica al proyecto en su conjunto.
Añadir Guías
Para añadir una guía horizontal o vertical:
Haz clic en cualquier punto a lo largo de la regla
o
Haz clic y arrastra desde la regla hacia la página
Mostrar u Ocultar Guías
En el menú desplegable Configuración, la opción Mostrar guías personalizadas está seleccionada por defecto. Cuando se deselecciona, se volverá a habilitar automáticamente si haces clic en cualquier punto a lo largo de las reglas.
Para mostrar u ocultar guías:
- Haz clic en el botón Configuración hacia la parte inferior de la Barra Lateral Izquierda.
- Selecciona o deselecciona la opción Mostrar guías personalizadas en el menú desplegable.
- Tu elección se aplicará al proyecto en su conjunto.
Ajustar o Eliminar Guías Individuales
Para ajustar guías individuales, pasa el cursor sobre la línea azul hasta ver la herramienta de ajuste, y luego haz clic y arrastra la guía para reubicarla.
Para eliminar guías individuales de una página, pasa el cursor sobre la línea azul hasta ver la herramienta de ajuste, y luego haz clic y arrastra la guía fuera del lienzo, más allá de la regla.
Borrar Todas las Guías
Para eliminar permanentemente todas las guías de una página seleccionada:
- Haz clic en el botón Configuración hacia la parte inferior de la Barra Lateral Izquierda.
- Selecciona la opción Borrar guías en el menú desplegable.
- Haz clic en OK para confirmar.
Si quieres copiar tus guías a una nueva página, simplemente duplica la página y usa el Panel de Esquema para eliminar el contenido original.
Cuadrículas de página
Las Cuadrículas pueden acelerar tu flujo de trabajo estableciendo estructuras claras y jerarquías visuales para los diseños de tu equipo. Esto elimina las conjeturas y mantiene a tu equipo consistente mientras dimensionan, posicionan y espacian elementos en una variedad de páginas, plataformas y maquetas de dispositivos.
Moqups tiene dos configuraciones de cuadrícula, la Cuadrícula de Papel y la Cuadrícula de Diseño, y se pueden usar por separado o en combinación.
Las Guías son visibles solo en el modo de Edición, donde sirven como herramientas temporales de diseño y alineación. No se verán cuando Previsualices o Exportes tu página.
Si quieres copiar tus cuadrículas a un nuevo proyecto, simplemente duplica el proyecto desde tu Dashboard y elimina las páginas originales.
Mostrar y Ocultar Cuadrículas
Las Cuadrículas están desactivadas por defecto. Antes de ajustar su configuración, deberás hacerlas visibles.
Para mostrar u ocultar cuadrículas:
- Haz clic en el botón Configuración hacia la parte inferior de la Barra Lateral Izquierda.
- Selecciona o deselecciona las opciones Mostrar cuadrícula de papel y/o Mostrar cuadrícula de diseño.
- Tu elección se aplicará al proyecto en su conjunto.
Cuadrícula de Papel
La Cuadrícula de Papel se parece al papel cuadriculado tradicional y consiste en cuadrados o rectángulos subdivididos y ajustables.
Para ajustar la Configuración de la Cuadrícula de Papel:
- Haz clic en el botón Configuración hacia la parte inferior de la Barra Lateral Izquierda.
- Asegúrate de tener ya seleccionado Mostrar cuadrícula de papel.
- Selecciona la opción Configuración de cuadrícula de papel.
- En la ventana emergente Configuración de Cuadrícula de Papel, ajusta el ancho y la altura de los bloques componentes de la cuadrícula.
- Selecciona la casilla Dibujar cuadrícula de papel sobre los objetos si quieres que la cuadrícula se superponga a tu diseño.
- Haz clic en Aplicar.
Cuadrícula de Diseño
La Cuadrícula de Diseño sigue los protocolos establecidos por primera vez en los medios impresos, que establecen márgenes, columnas y medianil para tus páginas. Juntos, pueden proporcionar el andamiaje subyacente para la estructura de tu página y determinar la cantidad de espacio 'blanco' o 'negativo' entre tus bloques de contenido.
La Configuración de la Cuadrícula de Diseño te permite introducir valores y ajustar estos elementos de la siguiente manera:
- Preajuste de Cuadrícula: Elige entre valores expresados como tamaños de píxeles Fijos, o como porcentajes Responsivos de la página.
- Columnas: Establece el número total de columnas.
- Ancho de Columna: Establece el ancho de todas las columnas.
- Medianil: Establece el espacio entre columnas.
- Márgenes Izquierdo/Derecho: Establece el espacio entre las columnas más externas y el borde de la página.
Para ajustar la Configuración de la Cuadrícula de Diseño:
- Haz clic en el botón Configuración hacia la parte inferior de la Barra Lateral Izquierda.
- Asegúrate de tener ya seleccionado Mostrar cuadrícula de diseño.
- Selecciona la opción Configuración de cuadrícula de diseño para abrir la ventana emergente Configuración de Cuadrícula de Diseño.
- Establece el Preajuste de Cuadrícula e introduce valores para personalizar tu cuadrícula.
- Selecciona la casilla Dibujar cuadrícula de diseño sobre los objetos si quieres que la cuadrícula se superponga a tu diseño.
Si deseas alinear rápidamente objetos entre sí, consulta nuestro artículo sobre cómo Organizar y Alinear Stencils.
Ajuste y medición
El Área de trabajo ofrece una serie de herramientas de ajuste y medición para ayudar a que tu flujo de trabajo sea más rápido y preciso:
Ajuste
Las tres opciones de ajuste (descritas a continuación) están habilitadas por defecto, pero puedes desactivarlas individualmente en el menú desplegable de Configuración. Los objetos se ajustarán a su destino cuando estén dentro de 3 píxeles.
Ajustar a cuadrículas y guías:
Los objetos se ajustarán automáticamente a tus guías personalizadas, o a las líneas de tus cuadrículas según las hayas configurado:
Ajustar a la página:
Los objetos se ajustarán automáticamente a los bordes verticales y horizontales de la página. También se ajustarán al centro de la página desde sus bordes y centro:
Ajustar a otros objetos:
Los objetos se ajustarán automáticamente para alinearse con el centro y los bordes de otros objetos en la página:
Los objetos dentro de un grupo se ajustarán a cualquier otro objeto anidado al mismo nivel.
Ajuste de Distancia
El Ajuste de Distancia te permite espaciar rápidamente múltiples objetos de manera equidistante. Si tienes tres o más objetos en la página y luego alineas dos de ellos, el Ajuste de Distancia se activará para ayudarte a alinear el resto.
Para habilitar o deshabilitar el ajuste de distancia:
- Haz clic en el botón Configuración hacia la parte inferior de la Barra Lateral Izquierda.
- Selecciona la opción Configuración avanzada para abrir la ventana emergente Configuración Avanzada.
- Haz clic en la casilla Habilitar ajuste de distancia.
Medición
Cuando mueves objetos por la página, nuestras herramientas de medición pueden ayudarte a posicionar esos elementos de página con precisión. Aquí te explicamos cómo encontrarlas y una breve descripción de cómo funcionan:
Para seleccionar cualquiera de ellas, haz clic en la opción Configuración Avanzada en el menú desplegable de Configuración para abrir la ventana emergente Configuración Avanzada. Una vez que hayas marcado las casillas apropiadas, haz clic en Listo.
Mostrar tooltip de coordenadas:
Un sutil tooltip muestra las coordenadas de un objeto seleccionado mientras mueves ese objeto por la página y el lienzo.
Mostrar anotaciones en las guías de ajuste:
Mientras mueves un objeto por la página, esta opción muestra la distancia del objeto, en píxeles, desde otros elementos cercanos.
Mostrar guías al mantener presionada la tecla Alt:
Mantén presionada la tecla Alt/Option para mostrar guías de línea rosas que indican la distancia de un objeto seleccionado desde los cuatro márgenes de la página.
Y, si necesitas medir manualmente la distancia, no olvides nuestro práctico stencil de Distancia Spec. Tómalo de la categoría Spec Tools del Panel de Stencils cuando lo necesites, o deja uno justo fuera del borde de la página, en el lienzo, para un acceso rápido y cómodo:
Mostrar y ocultar puntos de acceso
El menú desplegable del Área de trabajo te permite mostrar u ocultar todos los Puntos de Acceso que has añadido a un proyecto mientras construyes tu prototipo. También puedes hacerlo directamente desde el panel de Interacciones.
Tamaño
Para mostrar u ocultar Puntos de Acceso:
- Haz clic en el botón Configuración hacia la parte inferior de la Barra Lateral Izquierda.
- Selecciona o deselecciona la opción Mostrar puntos de acceso.
Mostrar y Ocultar Indicadores de Interacción
Mostrar indicadores de interacción añade una insignia de iluminación a los objetos con interacciones, en la página y en el Panel de Esquema, mientras estás en el modo de Edición. También puedes seleccionar o deseleccionar esta opción desde el propio panel de Interacciones.
Para mostrar u ocultar Indicadores de Interacción:
- Haz clic en el botón Configuración hacia la parte inferior de la Barra Lateral Izquierda.
- Selecciona o deselecciona la opción Mostrar indicadores de interacción.
Mostrar y Ocultar Herramientas de Colaboración en Vivo
Moqups tiene herramientas de Colaboración en Vivo para ayudar a tus equipos remotos y distribuidos a trabajar juntos en tiempo real.
- Presencia en Vivo te permite ver quién está colaborando activamente en un proyecto.
- Chat en Vivo ayuda a tu equipo a compartir ideas y aclarar problemas.
- Selección en Vivo te permite saltar directamente a donde están trabajando tus colegas.
- Cursores en Vivo muestra el cursor de un colega mientras edita.
Para mostrar u ocultar cursores, selecciones, presencia y chat de colaboradores:
- Haz clic en el botón del Área de trabajo hacia la parte inferior de la Barra Lateral Izquierda.
- Selecciona o deselecciona las opciones de colaborador en vivo.
Preguntas y respuestas
¿Puedo bloquear las guías personalizadas como puedo bloquear los objetos?
No, las guías no se pueden bloquear.
¿Ocultar las cuadrículas mejorará el rendimiento?
Los usuarios de Chrome con páginas de más de 10,000 píxeles pueden experimentar cierto retraso si tienen la Cuadrícula de Diseño mostrada. Si esto ocurre, simplemente deselecciona la opción Mostrar cuadrícula de diseño.