Diseño y código

Para qué sirve. Construir una aplicación que coincida con un diseño que hiciste en Figma. Setherion renderiza el marco, lee su estructura, colores, tipografía y espaciado, y construye a partir de eso.

Conéctalo. Pulsa Connect Figma en la página Connectors, inicia sesión en Figma y vuelve. No hay claves que copiar. El acceso es de solo lectura: Setherion nunca puede cambiar tus archivos. Se usa mientras construyes y nunca forma parte de la aplicación que publicas. Figma no muestra ningún cargo por uso de Setherion.

Úsalo. En el editor pulsa +, luego Design, luego Import from Figma. En el panel de control está bajo +, en Import a design, donde también se ofrece Canva. En Figma, haz clic derecho en el marco que quieres y elige Copy link to selection, pega el enlace y pulsa Import frame. El marco se adjunta a tu mensaje junto con una descripción suya y sus colores, fuentes y espaciado exactos, y la aplicación se reconstruye para que coincida.

Pídele. «Reconstruye la página de inicio para que coincida con este marco.» «Usa los colores y las fuentes de mi diseño de Figma.»

Conviene saber. El enlace tiene que apuntar a un diseño, como figma.com/design/KEY?node-id=1-234. La barra de direcciones de tu lista de archivos no lo es, y el importador lo dice. Si se rechaza un enlace, la cuenta de Figma conectada tiene que poder abrir ese archivo. Si Figma deja de aceptar la conexión, la importación te dice que vuelvas a conectar.

Para qué sirve. Traer un diseño de Canva (un menú, un folleto, un banner) a una aplicación como imágenes que colocar. Son material gráfico para poner en una página, no una estructura que reconstruir.

Conéctalo. Pulsa Connect Canva, inicia sesión en Canva y vuelve. No hay claves que copiar. Setherion lee tus diseños y los exporta solo cuando importas uno, y no se cambia nada en Canva.

Importa desde Canva. En el editor pulsa +, luego Design, luego Import from Canva. En el panel de control está bajo +, luego Import a design. Abre el diseño en Canva, copia la dirección del navegador (lleva /design/, y una dirección corta canva.link no sirve), pégala y pulsa Import design. El diseño tiene que ser tuyo o estar compartido contigo.

Pídele. «Pon el menú que acabo de importar en la página Menú.» «Usa el banner como portada de la página de inicio.»

Límites.

• Llegan las tres primeras páginas del diseño, como imágenes, en el chat.
• Se exportan una vez, mientras construyes, y después se alojan con las demás imágenes de la aplicación. Los enlaces de exportación de Canva dejan de funcionar al cabo de un día, y por eso una aplicación nunca le pregunta a Canva mientras se ejecuta.
• Canva Free no puede ampliar un diseño mucho más allá de su propio tamaño. Cuando Canva rechaza una exportación grande, Setherion la pide de nuevo al tamaño propio del diseño.
• Canva limita cuántas exportaciones puede hacer una persona en unos pocos minutos. Si lo dice, espera y vuelve a intentarlo.

Para qué sirve. Llevarte tu código contigo, y traer código. Exportar pone la aplicación en un repositorio tuyo como un proyecto normal de Vite y React. Importar reconstruye una aplicación que ya tienes en un repositorio.

Conéctalo. Pulsa Connect GitHub, inicia sesión y aprueba, o usa Connect GitHub dentro de la ventana de exportación. El acceso se usa cuando pides enviar, y nunca forma parte de la aplicación que publicas. Cubre también los repositorios privados.

Exporta. Abre el menú Publish en el editor y elige Export to GitHub. Ponle nombre al repositorio, elige si es Private repository (lo predeterminado) y pulsa el botón. Si el repositorio no existe, se crea. Exporta de nuevo en cualquier momento para actualizarlo con los últimos cambios.

Importa. En el panel de control, pulsa +, luego Import an app, luego GitHub. Conecta GitHub ahí para ver tus propios repositorios, también los privados, o pega la dirección de uno público. Sirve cualquier aplicación web: React, Next.js, Vue o HTML sencillo. La lectura mira lo que hace la aplicación, no cómo se construyó. Los archivos secretos y las claves se dejan fuera. Consulta Importa una aplicación.

Límites. Exportar forma parte de los planes de pago: en Free el botón te pide que mejores el plan. Importar cuesta una aplicación nueva más la lectura del código, y tu primera importación es gratis: consulta Planes y créditos. Los registros de una base de datos no pasan con una importación, solo su estructura.

Conviene saber. Exportar es un botón en Publish, no una petición que escribes en el chat.

Para qué sirve. Lo mismo que la exportación de GitHub, para GitLab: tu código en un repositorio tuyo.

Conéctalo. Pulsa Connect GitLab, inicia sesión y aprueba, o usa Connect GitLab dentro de la ventana de exportación. Se usa cuando envías y nunca pasa a formar parte de una aplicación que publicas.

Exporta. Abre el menú Publish en el editor y elige Export to GitLab. Ponle nombre al repositorio, elige Private repository (lo predeterminado) o no, y pulsa Export to GitLab. Exporta de nuevo para actualizarlo. Es un proyecto de Vite y React que se puede ejecutar.

Límites. Exportar forma parte de los planes de pago, igual que con GitHub. GitLab no tiene importación: para traer una aplicación desde un proyecto de GitLab, descárgala como ZIP y usa la importación de ZIP en Importa una aplicación.