Tutorial en vídeo: proteger con contraseña prototipos de Figma embebidos
Este vídeo explica cómo añadir protección con contraseña a tus prototipos de Figma embebidos con el plugin Crypto.
La función "Live Embed" de Crypto coloca el prototipo de Figma público embebido detrás de una URL segura y una contraseña que puedes compartir con otras personas, que podrán ver tus diseños en la app web de Crypto (sin necesidad de una cuenta de Figma).
La URL de Figma subyacente seguirá siendo pública. Por cómo funcionan los enlaces para compartir en Figma, Crypto solo puede envolver un embed de una URL pública de Figma dentro de una URL protegida con contraseña, lo que significa que cualquiera que tenga la URL de Figma subyacente puede seguir viéndolo. Si lo necesitas, puedes eliminar la URL protegida con contraseña desde el plugin Crypto o cambiar los permisos del archivo de Figma a only people invited to this file (o ambas cosas) para revocar el acceso.
Cambiar al modo prototipo
Para empezar a usar esta función, asegúrate de haber seleccionado Figma Prototype (Live Embed) en la barra de herramientas del plugin Crypto.
Se necesitan frames de Figma de nivel padre. Para subir un prototipo de Figma, tu página de Figma debe contener al menos un "frame padre", es decir, cualquier "frame" que esté situado directamente debajo de la página.
Copiar la URL de Figma que vas a usar
Definir las opciones del prototipo
Puedes elegir varias opciones de configuración al crear enlaces protegidos con contraseña para tus prototipos de Figma:
Opciones de escala
Este selector desplegable te permite elegir cómo se escala el prototipo en el navegador, con las siguientes opciones:
- 100 %: se muestra a tamaño completo
- Fit: se reduce para encajar
- Fill: se reduce o amplía para rellenar
- Scale down to fit width (por defecto)
Hotspots
Si activas el interruptor Hotspots, el prototipo mostrará las zonas interactivas de tus diseños cuando el usuario haga clic por la pantalla; si lo dejas desactivado, no se mostrará ninguna pista de zonas interactivas.
Barra lateral
Si activas el interruptor Sidebar, el panel de navegación lateral de tu prototipo de Figma se mostrará en el navegador; si lo dejas desactivado, el usuario no lo verá.
Crear la URL del prototipo protegida con contraseña
La URL de Figma subyacente seguirá siendo pública. Por cómo funcionan los enlaces para compartir en Figma, Crypto solo puede envolver un embed de una URL pública de Figma dentro de una URL protegida con contraseña, lo que significa que cualquiera que tenga la URL de Figma subyacente puede seguir viéndolo. Si lo necesitas, puedes eliminar la URL protegida con contraseña desde el plugin Crypto o cambiar los permisos del archivo de Figma a only people invited to this file (o ambas cosas) para revocar el acceso.
Para crear el enlace de tu prototipo protegido con contraseña, haz clic en Share Prototype URL y después en el botón Create Prototype URL.
Cuando termine la subida, podrás copiar la URL segura y la contraseña para ver en el navegador tu prototipo de Figma embebido, con la app web de Crypto.
Cada subida pertenece a la página de Figma desde la que se inició. Al cambiar de página se cargan los ajustes y el historial de versiones de esa página; vuelve a la página original para encontrar una subida que se completó allí. Espera a que termine una subida o una actualización de ajustes en curso antes de empezar otra en la misma página.
Puedes consultar la URL y la contraseña en el plugin más adelante. Si necesitas volver a copiar la URL y la contraseña más adelante, haz clic en el botón Share Prototype URL de la barra de herramientas del plugin Crypto; la URL y la contraseña del prototipo aparecen en la sección Secure URL Details, donde puedes copiarlas.
La URL de Figma subyacente seguirá siendo pública. Por cómo funcionan los enlaces para compartir en Figma, Crypto solo puede envolver un embed de una URL pública de Figma dentro de una URL protegida con contraseña, lo que significa que cualquiera que tenga la URL de Figma subyacente puede seguir viéndolo. Si lo necesitas, puedes eliminar la URL protegida con contraseña desde el plugin Crypto o cambiar los permisos del archivo de Figma a only people invited to this file (o ambas cosas) para revocar el acceso.
Actualizar los ajustes de la URL del prototipo
A veces querrás actualizar la URL de Crypto del prototipo que ya has creado y enviado a alguien. Puedes hacerlo con el plugin Crypto: haz clic en el botón Share Prototype URL de la barra de herramientas del plugin Crypto, cambia la URL del archivo de Figma o las opciones del prototipo según necesites y haz clic en el botón Update Existing Prototype URL.
Cambiar la contraseña de tu URL de Crypto
Por defecto, el plugin Crypto genera una contraseña aleatoria segura, pero si quieres cambiarla por una contraseña personalizada, activa el interruptor Change Password en la sección Set Password for Crypto URLs on this page del panel de ajustes de subida, introduce la nueva contraseña en el campo (debe tener al menos 6 caracteres) y haz clic en el botón Set New Password, que actualiza la contraseña de tu URL de Crypto para esta página de Figma.
Los diseños estáticos y las URL de prototipos comparten la misma contraseña en cada página de Figma. Si subes diseños estáticos y un prototipo en la misma página de Figma, ten en cuenta que cada página de Figma solo tiene una contraseña para ambas URL. Si cambias la contraseña de una, también se actualiza la de la otra.
Al actualizar la contraseña, nadie podrá entrar con la contraseña anterior. Si actualizas la contraseña, quien tuviera la anterior ya no podrá ver tu URL; si necesitas que sigan teniendo acceso, vuelve a compartir con ellos la nueva contraseña.
Eliminar la URL del prototipo
Si lo necesitas, puedes eliminar la URL protegida con contraseña desde el plugin Crypto o cambiar los permisos del archivo de Figma a only people invited to this file (o ambas cosas) para revocar el acceso.
Ver los prototipos de Figma
Iniciar sesión e interactuar con tu prototipo de Figma protegido con contraseña
Después de abrir en tu navegador la URL (obtenida en el plugin Crypto para Figma), podrás pegar la contraseña generada (también del plugin Crypto para Figma). Después de pegar la contraseña de la URL, haz clic en el botón Login para identificarte y ver los diseños subidos.
Como la app web de Crypto incrusta el embed nativo del prototipo de Figma, la interacción con el prototipo funciona exactamente igual que cuando lo ves en Figma. Para saber más, consulta el artículo de ayuda oficial de Figma Preview designs and prototypes in Presentation View.
Usar los atajos de teclado del prototipo de Figma
Como la app web de Crypto incrusta el embed nativo del prototipo de Figma, los atajos del prototipo son exactamente los mismos que cuando lo ves en Figma. Para ver estos atajos de teclado mientras usas la app web de Crypto, pasa el ratón por encima del icono Keyboard de la barra de herramientas.
Atajos de teclado disponibles mientras ves el prototipo
- Cambiar el tamaño de la vista (Z)
- Activar o desactivar la pantalla completa (F)
- Reiniciar el prototipo (R)
- Pantalla anterior (←)
- Pantalla siguiente (→)
- Avanzar en el prototipo (Enter)
Mostrar u ocultar los iconos de la barra de herramientas
Si no quieres que la barra de iconos de la app web de Crypto se vea mientras miras tu prototipo, haz clic en el botón con el icono Visibility de la barra de herramientas de la app web de Crypto. Al hacer clic en este botón se muestran u ocultan los iconos. Puedes volver a pasar el ratón por encima del botón con el icono Visibility para que aparezca y hacer clic de nuevo para volver a mostrar la barra de herramientas.
Vuelve a seleccionar el embed de Figma. Después de mostrar u ocultar los iconos o de usar otro control de la barra de herramientas de Crypto, vuelve a hacer clic en el prototipo de Figma antes de usar sus atajos de teclado.