Crea diseños interactivos con Canva Code
Canva Code te permite crear diseños interactivos y con capacidad de respuesta sin el tecnicismo de escribir código. Puedes usar Canva Code de dos maneras:
- Crear diseños de código interactivo
- Crea diseños interactivos completos, como páginas de destino, paneles de control o portafolios, y edítalos y publícalos como sitios web en el Editor de Canva.
- Agrega elementos de código interactivos a tus diseños
- Crear elementos interactivos como cuestionarios, calculadoras o gráficos para otro diseño y reutilizarlos en varios diseños
Consejos:
- Obtén más información sobre cómo esta función cuenta para tu uso de IA.
- Aprende a escribir mejores indicaciones para maximizar tu asignación de IA.
Crea diseños de código interactivos
Usa el tipo de diseño Código cuando quieras crear una experiencia interactiva completa.
- Crea páginas de destino, paneles, portafolios y mucho más
- Editar y refinar en el editor de Canva
- Publicar como sitio web adaptativo
- En la página de inicio de Canva, selecciona Programar. Se abrirá el editor de Canva.
- En el editor de Canva, empieza describiendo tu diseño en la pestaña Canva IA. Pide algo como “Diseña un registro de ejercicio interactivo y fácil de usar”.
- Como alternativa, en la pestaña Plantillas también puedes explorar o buscar plantillas para empezar.
- Perfecciona el diseño usando Canva IA o editando directamente. Consulta Edita tus diseños y elementos interactivos de Canva Code para aprender a hacerlo.
Agrega elementos de código interactivo a tus diseños
Accede a Canva AI y, a continuación, a Codifica cuando quieras generar un único componente interactivo.
- Crea cuestionarios, calculadoras, gráficos y mucho más como elementos.
- Añádelos a presentaciones, pizarras blancas u otros tipos de diseño. Publicar como sitio web o reutilizar elementos en varios diseños.
- En la página de inicio de Canva, selecciona Canva IA.
- En el cuadro de diálogo, describe el elemento de código interactivo que quieres crear. Obtén más información sobre las sugerencias de la IA aquí.
- Selecciona </> Código.
- Pulsa Intro en el teclado o haz clic en el botón Enviar. Canva IA prepara tu diseño en función de tus indicaciones.
- Después de generar el código del diseño, selecciona Usar en un diseño.
- En Añadir como elemento a, selecciona un tipo de documento para añadirlo como elemento Code interactivo.
- Para mejorar el diseño generado con Canva Code, pídenos mejoras en la ventana de chat del panel lateral.
Nota: Puedes acceder a las versiones del diseño desde tu hilo de chat con Canva IA.
Edita tus diseños y elementos interactivos generados por Canva Code
Perfecciona el diseño generado por Canva Code con las herramientas del editor. Échale un vistazo a Edita los diseños y elementos interactivos generados por Canva Code para obtener más información.
Previsualiza y publica tu diseño
Selecciona Vista previa para interactuar con el diseño. Una vez que todo se vea bien, puedes publicarlo como un sitio web. Aprende a publicar y gestionar sitios web de Canva Code.
Nota: La interactividad funciona cuando el diseño se ve en Canva o se publica como un sitio web.
Accede, copia y gestiona las versiones de Canva Code
Cada vez que actualizas tu diseño de Canva Code, Canva guarda automáticamente una nueva versión en la misma conversación del chat. Esto te permite volver a iteraciones anteriores, seguir editando desde una versión anterior o copiar el código generado para uso externo.
Ver tu historial de versiones
- En la página de inicio de Canva, abre Canva IA.
- En la barra de mensajes, selecciona </> Code para ver tus chats de Canva Code en la barra lateral.
- Nota: Puedes identificar los chats de Canva Code por el </> icono que aparece al lado.
- Abre un hilo de chat de Canva Code.
- En la barra lateral, explora las versiones disponibles (por ejemplo: versión 1, versión 2 y más).
Nota: Si continúas con la pregunta en el mismo chat, se creará automáticamente una nueva versión.
Usar una versión anterior
- Abre el hilo del chat de Canva Code.
- Selecciona la versión que quieres usar.
- Selecciona Usar en un diseño para seguir editando esa versión en Canva.
Ve y copia el código
Puedes ver el código generado por Canva Code y copiarlo para volver a utilizarlo fuera de Canva.
- En tu hilo de Canva Code, activa la opción Mostrar código.
- Selecciona Copiar código para guardarlo en el portapapeles.
Limitaciones de Canva Code
- Canva Code admite todos los idiomas disponibles en Canva, excepto los usuarios de canva.cn.
- Canva Code solo acepta instrucciones de la descripción que hayas escrito o utilizado. Cuanto más contexto e instrucciones brindes, mejor será el resultado.
- El código se puede copiar y reutilizar de forma externa, pero no se puede exportar como archivo ni editar directamente en Canva.
¿Puedo reutilizar el código fuera de Canva?
Sí. Una vez copiado, el código se puede utilizar en tus propios proyectos. Aunque está diseñado para Canva, puedes adaptarlo a herramientas o flujos de trabajo externos.
¿Puedo usar mis creaciones de Canva Code para fines comerciales?
En lo que respecta a Canva y en la medida en que lo permita la ley, eres el propietario de tus descripciones y sus resultados en nuestras funciones de IA (incluyendo Canva Code y los códigos de Canva creados), y Canva no hará ninguna reclamación de propiedad de derechos de autor sobre tus descripciones y sus resultados (incluidos los códigos de Canva creados). Para obtener más detalles y los términos completos, consulta nuestros Términos y condiciones de productos de IA.
¿Quién puede ver lo que creo con Canva Code?
Solo tú puedes ver tus conversaciones con Canva Code. Cuando haces clic en Usar en un diseño, se crea un diseño nuevo con esa versión y puedes compartir el diseño (incluyendo Canva Code) con el botón Compartir.
Si publicas tu diseño en un sitio web, el control de acceso se controla mediante los ajustes que configures durante el flujo de publicación del sitio web.
¿Puedo gestionar el acceso de mi equipo al Código de Canva?
Si eres una persona con rol de administración, docente o especialista en diseño de marcas, puedes elegir quién tiene acceso a Canva Code en tu equipo o clase.
¿No encuentras Canva Code en tu página de inicio? Más información sobre las restricciones de acceso a Canva Code.
¿Por qué no veo que las líneas de código cambian?
Canva Code ahora utiliza la edición basada en diff, lo que significa que solo se actualizan las líneas de código necesarias en lugar de regenerar todo el bloque. Esto se traduce en una retroalimentación más rápida cuando realizas pequeños cambios en tu lógica de diseño.
Si no ves que las líneas de código cambian después de enviar el mensaje, significa que Canva está trabajando en segundo plano para aplicar solo los cambios necesarios. Espera a que Canva Code termine de generar otra versión.
¿Te ha resultado útil?
Útil
No útil