Tutorial en vídeo: proteger con contraseña diseños estáticos de Figma
Este vídeo explica cómo añadir protección con contraseña a tus diseños de Figma con el plugin Crypto.
La función "Static Frames" de Crypto sube imágenes de los frames padre de nivel superior de la página actual de Figma mediante el plugin Crypto para Figma y genera 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).
Para empezar a usar esta función, asegúrate de haber seleccionado Figma Designs (Static Frames) en la barra de herramientas del plugin Crypto.
Seleccionar y deseleccionar los frames que quieres subir
Para empezar, asegúrate de haber seleccionado Figma Designs (Static Frames) en la barra de herramientas del plugin Crypto.
Ahora podrás seleccionar los frames de la página actual de Figma que quieres usar como diseños para compartir en tu enlace protegido con contraseña.
Crypto carga en el plugin todos los "frames padre" de la página actual de Figma como una lista de frames en la que puedes elegir los diseños que quieres compartir; haz clic en la casilla o en la miniatura de cualquier frame para seleccionarlo (si vuelves a hacer clic, se deselecciona).
Se necesitan frames de Figma de nivel padre. Para subir tus diseños estáticos, 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.
Resaltar los frames padre de Figma para seleccionarlos
Para que te resulte más fácil seleccionar los frames padre de Figma que quieres comparar, al hacer clic en uno o varios frames de tu página de Figma o resaltarlos, se filtran automáticamente en la lista de frames disponibles del plugin Crypto.
Actualizar los frames padre de Figma
Si el plugin Crypto ya se está ejecutando y necesitas añadir o quitar frames padre en la página actual de Figma, haz los cambios que necesites y después haz clic en el botón con el icono Refresh frames, junto al recuento de frames de la barra de herramientas del plugin Crypto.
Usar la ordenación rápida para ordenar los frames
Hay varias formas de ordenar los frames de los diseños que subes:
Ordenar los frames según el orden de las capas de Figma
Si eliges la opción Sort frames by Layer Order ↓ (o ↑ para el orden inverso), los frames se ordenan automáticamente según su orden en las capas de Figma.
Ordenar los frames visualmente por columnas
Si eliges la opción Sort frames Left to Right o Sort frames Right to Left, los frames se ordenan automáticamente según su posición visual por columnas en tu diseño de Figma.
Ordenar los frames visualmente por filas
Si eliges la opción Sort frames Top to Bottom o Sort frames Bottom to Top, los frames se ordenan automáticamente según su posición visual por filas en tu diseño de Figma.
La ordenación visual tolera pequeñas diferencias de alineación y usa la posición absoluta de cada frame en el lienzo, incluidos los frames anidados en distintas Sections de Figma.
Ordenar los frames por el nombre de la capa de Figma
Si eliges la opción Sort by Figma Layer Name ↓ (o ↑ para el orden inverso), los frames se ordenan automáticamente de forma natural según los nombres de sus capas de Figma, de modo que nombres como Frame 2 aparecen antes que Frame 10.
Ordenar los frames manualmente arrastrando y soltando
Puedes ordenar los frames manualmente arrastrando y soltando: haz clic y mantén pulsado el ratón sobre el icono del tirador al final de cualquier fila de frame, arrástralo hacia arriba o hacia abajo para cambiar su posición entre los frames que vas a subir y suéltalo para confirmar ese orden. Este orden personalizado se guarda aunque cambies entre las opciones de ordenación, así que puedes recuperarlo eligiendo la opción Sort frames by Custom Order en el selector de ordenación.
Subir tus diseños
Cuando estés conforme con la selección y el orden de los frames, haz clic en el botón Share Design URL de la barra de herramientas del plugin Crypto. Se abre la ventana para compartir, donde puedes hacer clic en el botón Securely Upload Designs para empezar a subir las imágenes.
Cuando termine la subida, verás un mensaje de confirmación con tu URL segura y una contraseña generada.
Al duplicar un archivo de Figma también se copian su URL y su contraseña. Para generar datos distintos para el duplicado, introduce el código Konami (Up, Up, Down, Down, Left, Right, Left, Right, B, A) con el plugin abierto. Crypto crea una URL y una contraseña nuevas sin eliminar la URL anterior.
Abrir la URL generada
Cuando termine la subida, podrás copiar la URL segura y la contraseña para ver en el navegador los frames que has seleccionado en Figma, 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 Design URL de la barra de herramientas del plugin Crypto y selecciona una versión subida anteriormente en el selector Select Previous Version; se mostrarán la URL y la contraseña, que podrás copiar en la sección Secure URL Details.
Subir una nueva versión de la URL
Después de subir tus diseños por primera vez, podrás seguir subiendo URL nuevas, que crean versiones de tus diseños. Es una buena forma de hacer un seguimiento de las distintas fases de un diseño o de crear URL diferentes que muestren un conjunto distinto de frames.
Para crear una nueva versión de la URL con el plugin Crypto, haz clic en el botón Share Design URL de la barra de herramientas del plugin Crypto y después en el botón Upload New Version URL.
Cuando termine la subida, verás un mensaje de confirmación con la nueva versión de tu URL segura y la contraseña.
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 Design URL de la barra de herramientas del plugin Crypto y selecciona una versión subida anteriormente en el selector Select Previous Version; se mostrarán la URL y la contraseña, que podrás copiar en la sección Secure URL Details.
Actualizar una versión de URL de Crypto subida anteriormente
A veces querrás actualizar una versión anterior de una URL de Crypto que ya has subido y enviado a alguien. Puedes actualizar cualquier URL subida anteriormente con el plugin Crypto: haz clic en el botón Share Design URL de la barra de herramientas del plugin Crypto, selecciona una versión subida anteriormente en el selector Select Previous Version y haz clic en el botón Update Version xxxxxxxx URL.
Así se sustituyen los diseños de esa URL subida anteriormente por los nuevos frames que hayas seleccionado en el plugin Crypto. No cambian ni la URL ni la contraseña, así que quien ya las tuviera podrá seguir usándolas.
Cuando termine la subida, verás un mensaje de confirmación con la nueva versión de tu URL segura y la contraseña.
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 Design URL de la barra de herramientas del plugin Crypto y selecciona una versión subida anteriormente en el selector Select Previous Version; se mostrarán la URL y la contraseña, que podrás copiar en la sección Secure URL Details.
Al actualizar una URL se sustituyen los diseños subidos anteriormente. Al hacer clic en el botón Update Version xxxxxxxx URL se sustituyen todos los diseños subidos de la versión seleccionada. Quien tenga la URL y la contraseña anteriores verá los diseños actualizados cuando vuelva a visitar la URL que se le envió.
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 una versión de URL de Crypto
Puedes eliminar cualquier versión de las URL seguras que hayas generado con el plugin Crypto: haz clic en el botón Share Design URL de la barra de herramientas del plugin Crypto, selecciona una versión subida anteriormente en el selector Select Previous Version y activa el interruptor I would like to delete the xxxxxxxx version URL; al activarlo podrás hacer clic en el botón Delete Version xxxxxxxx URL.
Verás un mensaje de confirmación que te indica que la versión seleccionada se ha eliminado.
La eliminación de una versión de URL no se puede deshacer Al hacer clic en el botón Delete Version xxxxxxxx URL se eliminan todos los diseños subidos de la versión seleccionada. Quien tenga esa URL ya no podrá ver esos diseños. Aun así, siempre puedes subir una nueva versión y compartir la nueva URL después de eliminar la URL anterior que se les envió.
Ver los diseños estáticos de Figma
Iniciar sesión para ver tus diseños
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.
Navegar por los frames de tu diseño
Puedes moverte entre los frames en la app web de Crypto haciendo clic en los botones con flechas, haciendo clic, manteniendo pulsado y arrastrando los frames hacia la izquierda o la derecha, o pulsando las teclas de flecha izquierda o flecha derecha del teclado. Al pulsar la tecla espacio del teclado también pasas al siguiente frame.
Saltar entre los frames de tu diseño
Si necesitas ir directamente a un frame concreto de los diseños subidos, puedes usar la barra de navegación de la parte inferior de la página en la app web de Crypto. Al pasar el ratón por encima de la barra de navegación se muestran las miniaturas de cada frame, y al hacer clic en cualquiera de ellas saltas al instante a ese frame.
Cambiar entre las versiones de diseño subidas
Si has subido varias versiones de tus diseños con el plugin Crypto para Figma, puedes cambiar al instante entre ellas en la app web de Crypto haciendo clic en el selector del encabezado, arriba a la izquierda de la página. Al seleccionar otra versión se cargan los diseños de esa versión. También puedes ver cuándo se actualizó por última vez cada versión en la etiqueta que hay debajo del selector.
Activar el modo oscuro
Si tus diseños se ven mejor sobre un fondo oscuro, puedes activar el modo oscuro haciendo clic en el icono del sol o de la luna de la barra de herramientas de la app web de Crypto. Al hacer clic en el icono cambias entre el modo oscuro y el modo por defecto (más claro).
Mostrar u ocultar el contenido exterior
Si no quieres que el encabezado, los iconos de flechas, la barra de navegación o la barra de iconos se vean mientras miras tus diseños, haz clic en el botón con el icono de visibilidad de la barra de herramientas de la app web de Crypto. Al hacer clic en este botón se muestra u oculta todo excepto los propios diseños.