Design EditorDocumentaciónUsar el editor
Prototipar y presentar
Conecta tableros entre sí, añade animación y recórrelos en Vista previa o preséntalos como diapositivas.
1Interacciones
Asigna a una capa un disparador (Toque, Pasar el cursor o Mantener pulsado) y una acción:
- Navegar a otra pantalla, con una transición Deslizar o Fundido.
- Volver atrás.
- Desplazarse a una sección.
- Abrir una URL.
2Movimiento
Anima una capa cuando aparece, cuando entra en pantalla al desplazarse, al pasar el cursor o al tocarla. Define qué cambia (como el ancho, el alto o el color de relleno), sus valores inicial y final, la duración, el retraso y la curva de aceleración. El HTML exportado reproduce los estados de cursor y toque.
3Vista previa
Pulsa Cmd+P. Elige Teléfono, Escritorio o Lienzo. El marco del dispositivo mantiene la barra de estado arriba y la barra de navegación abajo.
- Usa Marcar como pantalla y Definir como pantalla inicial para elegir qué tableros son páginas y cuál se abre primero.
- Las pantallas se comportan como un sitio web: barra de direcciones, historial con
Cmd+[yCmd+]o los botones del ratón, y enlaces entre secciones. - Los enlaces de los encabezados y pies de página se conectan automáticamente con las pantallas correspondientes.
- Tab salta entre campos y botones.
4Diapositivas y presentación
La pestaña Diapositivas muestra tus tableros como diapositivas o tarjetas. Define una transición (Ninguna, Fundido, Deslizar o Empujar) con una duración de 100 milisegundos a 5 segundos.
Presenta con Cmd+Enter. Enter, Espacio o Av Pág avanzan; Retroceso o Re Pág retroceden; Inicio y Fin saltan a la primera y la última diapositiva; Escape termina.