Plantillas y patrones
Con Plantillas y Patrones, puedes definir diseños y estilos globales para muchas pantallas de tus prototipos.
Plantillas
Las plantillas son útiles para crear cuadrículas de pantalla y establecer diseños de elementos por defecto.
Diseña un esquema de pantalla
Puedes mantener un formato y espaciado coherentes en todo tu prototipo con una cuadrícula de pantalla. Añadir una es fácil:
- Ve a la paleta Plantillas y selecciona «Plantilla 1», que abrirá un lienzo en blanco. Si no ves la paleta Plantillas, asegúrate de que está marcada para que sea visible en el menú Ventana.
- Pasa el ratón por las reglas que hay alrededor del lienzo y haz clic cuando estés listo para colocar una guía de diseño. Puedes hacer clic y arrastrar sobre una guía que ya hayas colocado para mover su posición.
- Vuelve a una pantalla de tu prototipo y observa cómo se reflejan las guías que has dispuesto. Verás estas guías en cualquier pantalla que crees con esta plantilla.
A continuación, empieza a construir el contenido del diseño, utilizando elementos y widgets para crear diseños comunes que esperas utilizar muchas veces, como cabeceras y barras laterales de navegación. Incluso puedes añadir eventos como Enlaces y efectos Mouse Over a elementos dentro de la plantilla, y funcionarán en todas las pantallas que utilicen esa plantilla. Vuelve a una pantalla de tu prototipo y verás el contenido que acabas de añadir en el lienzo. El contenido de la plantilla se coloreará para que sepas que procede de una plantilla. Puedes desactivar el tinte en el menú Ver.
Crear y asignar una nueva plantilla
Puedes añadir una nueva plantilla en blanco a tu prototipo haciendo clic en el botón «+» de la paleta Plantillas.
Después de crear una nueva plantilla, puedes asignarla a una pantalla de tu prototipo:
- Selecciona una pantalla en la que quieras utilizar esa plantilla.
- Haz clic en el nombre de la pantalla en la paleta Capas o haz doble clic en el lienzo para seleccionar la pantalla.
- Ve a la paleta Propiedades y cambia la plantilla en el desplegable «Plantilla».
Definir estilos de elementos por defecto
También puedes especificar las propiedades básicas de los widgets, como el tamaño, el color y las fuentes en una plantilla:
- Haz clic con el botón derecho en una plantilla de la paleta Plantillas y selecciona «Editar estilo de plantilla».
- Selecciona elementos de la lista desplegable y personaliza su aspecto.
Ahora, cualquier elemento nuevo que coloques en la plantilla y cualquier pantalla que utilice esa plantilla mostrará los estilos que hayas detallado.
Maestros
Los patrones son elementos o grupos de elementos que puedes reutilizar en tu prototipo. Son útiles para crear diseños base que piensas utilizar muchas veces, como botones CTA, textos y desplegables. Cualquier cambio que hagas en un patrón se reflejará en cada instancia de ese patrón que utilices en tu prototipo. A diferencia de las plantillas, puedes utilizar muchos patrones diferentes en una misma pantalla.
Crear un maestro
Añadir un nuevo maestro a tu prototipo es fácil:
- Ve a la paleta Patrones y haz clic en el botón «+» para crear un nuevo patrón. Si no ves la paleta Patrones, asegúrate de que está marcada para que sea visible en el menú Ventana.
- Fíjate en que no verás un lienzo en blanco sobre el que diseñar, como ocurre con las plantillas. Dado que las maquetas son independientes de cualquier pantalla, no tendrán un fondo normal como las pantallas y las plantillas. En su lugar, sólo tienes que arrastrar y soltar elementos sobre el Lienzo transparente. Al igual que las plantillas, puedes añadir eventos a los elementos dentro de una plantilla maestra.
Editar un maestro
Para editar o cambiar un patrón, haz clic en él en la paleta Patrones, o haz doble clic en la instancia del patrón en una pantalla, lo que lo abrirá para su edición.
Recuerda que cualquier cambio que realices en un maestro se aplicará a todas sus instancias en todo el prototipo. Si quieres editar un maestro sólo para una pantalla concreta, haz clic con el botón derecho del ratón en la instancia del maestro en el Lienzo y selecciona «Separar del maestro». Los elementos del maestro de esa pantalla se agruparán en un contenedor de Panel Dinámico, que podrás abrir y editar como prefieras.