Abrir Design Studio y conocer la pantalla

Design Studio es el editor donde se maqueta una plantilla de contenido: un documento con páginas, como la portada de una propuesta o una cotización en PDF. Este artículo explica cómo abrirlo, qué hay en cada zona de la pantalla, cómo revisar el resultado y cómo guardar. Lo demás (páginas, elementos, textos, bloques y átomos) está en los otros artículos de Design Studio.

Antes de empezar

Estas son las palabras que vas a ver en todos los artículos de Design Studio:

• Página: cada hoja del documento. Una propuesta puede tener una portada, una carta, la cotización y una página de cierre.
• Lienzo: la zona central del editor, donde se ven las páginas.
• Elemento: cualquier cosa que colocas en una página, como un texto, un rectángulo, una tabla o una imagen.
• Capa: cada elemento aparece como una fila en la lista Capas, a la izquierda. Desde ahí también se selecciona.
• Inspector: el panel de la derecha cuando tienes algo seleccionado. Muestra sus ajustes: posición, tamaño, color…
• Átomo: un bloque ya preparado para propuestas, como la tarjeta del agente o el botón de firma. En versiones anteriores del editor se llamaban plugins.
• Plugin: un bloque propio de tu cuenta, creado fuera del editor. Aparece al final de la pestaña Elementos.

Arrastrar significa pulsar con el botón izquierdo del ratón, moverlo sin soltar y soltar en el sitio que quieres. Los atajos de teclado se escriben con ⌘, la tecla Comando del Mac; en Windows, usa Ctrl.

El editor no guarda solo: pulsa Guardar de vez en cuando y siempre antes de cerrar (lo explica Guardar y cerrar).

Abrir el editor

1. En el menú lateral, ve a Herramientas → Bibliotecas → Plantillas de Contenido.
2. En la tabla, abre la plantilla que quieres diseñar: pulsa los tres puntos (⋮) de su fila y elige Editar.
3. Se abre la ficha de la plantilla. A la izquierda se ve el documento tal como está guardado, página a página; cómo se recorre está en Gestionar plantillas de contenido.
4. Junto al campo Páginas, pulsa Editar. El editor se abre a pantalla completa.

Abrir el editor con una plantilla nueva

El formulario Crear Plantilla de contenido trae el mismo botón Editar junto a Páginas, así que puedes diseñar la plantilla antes de crearla. Una plantilla nueva empieza sin páginas: el lienzo sale gris y Capas dice «Sin elementos».

Abrir el editor no crea la plantilla. Se crea de una de estas dos formas:

1. Desde el editor: la primera vez que pulsas Guardar, se abre el cuadro Guardar Template. Trae el Nombre del template y el Tipo de template que pusiste en el formulario. Revisa los dos y pulsa Guardar. La plantilla queda creada y el formulario pasa a llamarse Editar Plantilla de contenido.
2. Desde el formulario: si cierras el editor con la X sin guardar, las páginas no se pierden. Se quedan en el formulario (el campo Páginas dice, por ejemplo, «1 página») y se guardan cuando pulsas Crear.

El desplegable Tipo de template de ese cuadro ofrece tres opciones con otros nombres que el formulario: Layout, Contenido y Snippet, que corresponden a Diseño, Contenido y Fragmento. Certificado no aparece en la lista.

Conocer la pantalla

El editor tiene cinco zonas:

• Arriba: en el centro van el nombre de la plantilla y, en azul, su tipo (por ejemplo Contenido). A la izquierda están el botón Ocultar panel izquierdo (junto a «Design Studio») y los botones Deshacer y Rehacer. A la derecha, el zoom, Vista previa, Guardar y la X para cerrar el editor.
• A la izquierda: la lista de Páginas y, debajo, las Capas de la página que estás viendo. Junto al título Capas está el botón Expandir todo. Si una de las dos listas se te queda corta, arrastra la línea que las separa; y para ensanchar el panel, arrastra su borde derecho.
• En el centro: el lienzo. Las páginas van una debajo de otra, y las líneas rojas discontinuas marcan los márgenes de cada página.
• A la derecha: las pestañas Plantillas y Elementos. Cuando seleccionas algo en el lienzo, este panel pasa a ser el Inspector, con las propiedades de lo seleccionado. Su borde izquierdo también se arrastra para cambiar el ancho.
• Abajo: una barra flotante con cinco botones (recuadro rojo en la captura): Seleccionar (V), Mano (H), Agregar página, Rectángulo (R) y Texto (T). Seleccionar viene activa, en azul. Las flechas pequeñas junto a Agregar página y Rectángulo abren más opciones.

Para acercar o alejar el lienzo, usa los botones − (Alejar) y + (Acercar) que rodean el porcentaje de arriba a la derecha, o pulsa el propio porcentaje. Se abre una lista con Ajustar a la página (⇧1), 50%, 100% (⌘0) y 200%. Con doble clic en el porcentaje vuelves a 100 %. También puedes girar la rueda del ratón con ⌘ (Ctrl en Windows) pulsada, con el puntero sobre el lienzo.

Para ver las pestañas Plantillas y Elementos sin nada seleccionado, haz clic en la zona gris que rodea el lienzo. Si haces clic en una zona vacía dentro de una página, lo que seleccionas es la página.

Revisar el resultado con Vista previa

1. Arriba a la derecha, pulsa Vista previa, o pulsa ⌘P (Ctrl+P en Windows).
2. Desplázate por el documento. Se ve a pantalla completa, con todas las páginas una debajo de otra.
3. Cierra con la X de arriba a la derecha o con Esc.

En la vista previa las variables se muestran tal como están escritas ({{ proposal.title }}), porque no hay un registro real que las rellene. Las tablas de cotización sí traen importes de ejemplo.

Guardar y cerrar

1. Arriba a la derecha, pulsa Guardar. Si la plantilla todavía no está creada, primero se abre el cuadro Guardar Template (ver Abrir el editor con una plantilla nueva). Mientras guarda, el botón dice «Guardando…» y luego «Procesando…». Al terminar, el editor vuelve a la primera página.
2. Cierra el editor con la X de arriba a la derecha.
3. En la ficha de la plantilla, mira el campo Páginas: muestra cuántas páginas quedaron guardadas, por ejemplo «5 páginas».

Atajos de teclado

Los atajos que muestra el propio editor, con ⌘ en Mac (en Windows suele usarse Ctrl):

Atajo	Qué hace
⌘Z	Deshacer
⌘⇧Z	Rehacer
V, H, R, T	Herramientas Seleccionar, Mano, Rectángulo y Texto
⌘A	Seleccionar todos los elementos de la página
Flechas, ⇧ + flechas	Mover el elemento seleccionado 1 punto o 10 puntos
Enter	Con varios textos seleccionados, escribir en todos a la vez (sustituye su contenido)
⌘X, ⌘C, ⌘V	Cortar, copiar y pegar
⌘D	Duplicar la selección
⇧H, ⇧V	Espejar en horizontal o en vertical
⇧A, ⌥⇧A	Meter la selección en un autolayout o sacarla
⌥⌘G	Meter la selección en un marco
⌘G, ⇧⌘G	Agrupar o desagrupar
⇧⌘M	Aplicar una máscara
⇧⌘L	Bloquear o desbloquear
⌥A, ⌥H, ⌥D	Alinear a la izquierda, centrar en horizontal, alinear a la derecha
⌥W, ⌥V, ⌥S	Alinear arriba, centrar en vertical, alinear abajo
⌥⇧H, ⌥⇧V	Repartir el espacio en horizontal o en vertical (tres elementos o más)
⌘] y ⌘[	Subir o bajar una capa (con ⌥, hasta arriba o hasta abajo del todo)
⌘B, ⌘I, ⌘U	Negrita, cursiva y subrayado, con el texto en edición
⇧1	Ajustar el zoom a la página
⌘0	Zoom al 100 %
Barra espaciadora + arrastrar	Mover el lienzo sin cambiar de herramienta
⌘P	Abrir la vista previa
⌘ + rueda del ratón	Acercar o alejar el lienzo
Supr (Delete)	Borrar el elemento seleccionado; con una página seleccionada, pide confirmación
Esc	Cerrar la vista previa o salir de la edición de un texto