Probemos esta nueva característica de Adobe XD, que simula las anclas o vínculos de anclaje que se pueden realizar en HTML, y que son útiles en páginas como Landing Pages o en cualquiera donde se quiere mostrar la acción de desplazamiento a una parte específica. Esto nos ayudará a que tanto los clientes, desarrolladores o quienes trabajen con nosotros tengan una idea más clara de las interacciones en los prototipos.
Adobe XD te permite crear enlaces que te llevan a partes específicas de tu diseño. Esto puede ayudarte a navegar más rápido por tus prototipos, especialmente si son largos o complejos.
Pasos para crear anclas
Siga estos pasos para comenzar:
- Cambia al modo Prototipo y selecciona el elemento al que deseas agregar un vínculo de anclaje.
- Arrastra el cable azul que aparece hacia abajo a la sección de la mesa de trabajo hasta que llegues llegar al punto que deseas que ocurra el desplazamiento.
- Haz clic en el cable azul para ver el Panel de interacción que aparece en Inspector de propiedades con las siguientes opciones:
- Desencadenador: Pulsar
- Tipo de acción: Desplazarse a
- Destino: Selecciona la capa de destino
- Desplazamiento Y: Introduce un valor relativo a la parte superior del objeto con el cable. Los valores encima del objeto deben ser negativos y los que van por debajo son positivos.
- Suavizado: Selecciona distintos efectos para animar la salida.
- Duración: Introduce la duración deseada con un máximo de cinco segundos.
Finalmente para previsualizar el efecto de ancla presiona la flecha para ver el prototipo.