3D Reveal Pro

Plugin de Figma que revela un frame bajo otro con una máscara-pincel en 3D y mapas de profundidad.

Para qué reto sirve

Cuando necesitas un antes-y-después que no sea un deslizador de cortina. El pincel con profundidad hace que las dos capas se separen en el eje Z, así que el reveal se lee como volumen y no como recorte. Sirve para presentar un rediseño, para una portada de caso, o —extrayendo el renderizador— para un héroe web.

Qué es

Plugin de Figma que toma dos frames, los manda a un servidor Python local que les genera mapas de profundidad con el modelo depth-anything-small, y renderiza una escena WebGL donde una máscara-pincel suave barre el lienzo y va revelando el segundo frame bajo el primero, con parallax de profundidad. Tiene un modo vídeo que no necesita servidor y graba la salida en MP4 o WebM.

Cuándo no usarla

No está en Figma Community, se importa como plugin de desarrollo, así que salta la revisión de la plataforma. El modo foto exige tener corriendo un servidor Flask local con PyTorch, unos 200 MB de modelo y una ventana de terminal abierta. Tiene 2 estrellas, 3 commits y un solo autor sin perfil, así que nadie más lo ha auditado y un commit futuro entra solo si haces git pull. Y el servidor levanta CORS sin restricción de origen en el puerto 5000: mientras esté encendido, cualquier web que visites puede mandarle peticiones.

Mi veredicto

Sin probar, pero sí revisado. Leí el manifest, el requirements, el server.py y el instalador de Windows antes de decidir, y los cuatro están limpios. El dato que manda es que el manifest restringe la red del plugin a localhost puerto 5000, así que no puede sacar el contenido de mi archivo de Figma a ningún sitio. Quedan dos archivos por leer, code.js y ui.html, que son los que corren dentro de Figma. Hasta verlos no lo estreno en un archivo con material de cliente. Cuando lo pruebe, con el ZIP de un commit fijo y no con git clone.

Revisión de seguridad — 28 jul 2026

Lectura de código, no auditoría formal. Cuatro archivos revisados, dos pendientes.

Archivo	Qué se buscó	Resultado
`plugin/manifest.json`	Dominios permitidos	Limpio. `networkAccess.allowedDomains` es solo `http://localhost:5000`. `capabilities` vacío, `enableProposedApi` en falso
`requirements.txt`	Typosquats, paquetes falsos	Limpio. flask, flask-cors, transformers, torch, torchvision, pillow. Los seis reales
`server.py`	Red saliente, ejecución de comandos	Limpio. 60 líneas. Sin subprocess, sin os.system, sin eval, sin peticiones salientes, sin escritura a disco
`setup-windows.bat`	Descargas externas, elevación	Limpio. Crea un venv e instala desde PyPI. Nada más
`plugin/code.js`	—	Sin leer
`plugin/ui.html`	—	Sin leer

La afirmación del README de que nada sale de tu máquina está respaldada por el manifest, que es el archivo que Figma hace cumplir.

Lo que queda como riesgo real, en orden:

CORS abierto. CORS(app) sin restricción de origen. Mientras el servidor corra, cualquier página que visites puede hacer POST a localhost:5000/api/depth. El endpoint solo devuelve mapas de profundidad de lo que se le envíe, así que no filtra nada, pero es entrada no confiable procesada por Pillow y torch. Apagar el servidor al terminar.

Sin versiones fijadas. El instalador hace pip install de los seis paquetes sin fijar versión. Si alguno se compromete más adelante, entra.

Señales de proyecto sin terminar. El id del manifest sigue en REPLACE_WITH_YOUR_PLUGIN_ID, el README manda a una página de releases vacía, y dice cd 3d-reveal-pro cuando la carpeta clonada se llama Figma-plagin.

Cómo llevarlo a una web

Solo code.js depende de Figma: exporta los dos frames como PNG. El renderizador de ui.html es WebGL y Canvas 2D normales, con cinco texturas —base, reveal, profundidad de cada una, y máscara—.

Y en una web el servidor sobra. Existe porque en Figma eliges dos frames cualesquiera y hay que calcular la profundidad al vuelo; en una página las imágenes son fijas, así que los mapas se generan una vez y se sirven como PNG estáticos. Eso reduce Python, PyTorch y Flask a dos imágenes, dos mapas y un shader.

Para generar los mapas sin instalar nada, el modelo depth-anything-small-hf tiene demo pública en Hugging Face.

Lo que habría que añadirle antes de ponerlo en producción es justo lo que Canvas UI ya trae y esto no: respeto a prefers-reduced-motion, pausa fuera de pantalla, tope de densidad de píxeles y apagado en móvil.