Crie designs interativos com o Canva Code
O Canva Code permite que você crie designs interativos e responsivos sem a tecnicidade de escrever código. Você pode usar o Canva Code de duas formas:
- Criar designs de código interativos
- Crie designs interativos completos, como páginas de destino, painéis ou portfólios, e edite e publique como sites no Editor do Canva
- Adicione elementos de código interativos aos seus designs
- Crie elementos interativos, como questionários, calculadoras ou gráficos, para outro design e reutilize-os em vários designs
Dicas:
- Saiba mais sobre como esse recurso conta para o seu uso de IA.
- Saiba como escrever instruções melhores para maximizar o seu subsídio de IA.
Criar designs de código interativos
Use o tipo de design Código quando quiser criar uma experiência interativa completa.
- Crie páginas de destino, painéis, portfólios e muito mais
- Edite e refine no editor do Canva
- Publicar como um site responsivo
- Na página inicial do Canva, selecione Code. O editor do Canva será aberto.
- No editor do Canva, comece descreva o seu design na aba Canva IA. Dê um comando como "Crie um rastreador de exercícios interativo e fácil de usar".
- Como alternativa, na aba Modelos, você também pode explorar ou buscar modelos para começar.
- Refine-o usando o Canva IA ou as edições diretas. Veja como editar seus designs e elementos interativos do Canva Code.
Adicione elementos de código interativos aos seus designs
Depois, acesse o Canva AI e codifique quando quiser gerar um único componente interativo.
- Crie questionários, calculadoras, gráficos e muito mais como elementos.
- Você pode adicioná-los a apresentações, quadros de comunicações ou outros tipos de design. Publicar como um site ou reutilizar elementos em vários designs.
- Na página inicial do Canva, selecione Canva IA.
- Na caixa Prompt, descreva o elemento interativo do Code que você gostaria de criar. Saiba mais sobre comandos de IA aqui.
- Selecione 👇.
- Aperte Enter no seu teclado ou clique no botão Enviar. O Canva IA prepara seu design com base no seu comando.
- Depois de gerar o design do code, selecione Usar em um design.
- Em Adicionar como elemento a, selecione um tipo de documento para adicioná-lo como elemento interativo do Code.
- Para melhorar o design gerado pelo Canva Code, envie seus refinamentos na caixa de chat no painel lateral.
Observação: você pode acessar as versões dos designs a partir do seu tópico de chat com o Canva IA.
Edite seus designs e elementos interativos gerados pelo código do Canva
Refine seu design gerado pelo código do Canva usando as ferramentas do editor. Confira Editar designs e elementos interativos gerados pelo Canva Code para saber mais.
Pré-visualize e publique o seu design
Selecione Pré-visualização para interagir com o seu design. Quando estiver tudo pronto, você pode publicá-lo como um site. Saiba como publicar e gerenciar sites do Canva Code.
Observação: a interatividade funciona quando o design é visualizado no Canva ou publicado como um site.
Acessar, copiar e gerenciar versões do Canva Code
Cada vez que você atualiza seu design do Canva Code por meio de comandos, o Canva salva automaticamente uma nova versão no mesmo tópico de chat. Isso permite que você revise iterações anteriores, continue editando a partir de uma versão anterior ou copie o código gerado para uso externo.
Ver seu histórico de versões
- Na página inicial do Canva, abra o Canva IA.
- Na barra de comandos, selecione 👇 Code para visualizar os chats do Canva Code na barra lateral.
- Observação: você pode identificar os chats do Canva Code pelo 👇 ícone ao lado deles.
- Abra um tópico de chat do Canva Code.
- Na barra lateral, explore as versões disponíveis (por exemplo: Versão 1, Versão 2 e mais).
Observação: se você continuar usando o mesmo chat, criará uma nova versão automaticamente.
Usar uma versão anterior
- Abra o chat do Canva Code.
- Selecione a versão que você quer usar.
- Selecione Usar em um design para continuar editando essa versão no Canva.
Ver e copiar o código
Você pode visualizar o código básico gerado pelo Canva Code e copiá-lo para reutilizá-lo fora do Canva.
- No seu tópico Código do Canva, ative a opção Mostrar código.
- Selecione Copiar código para salvá-lo na sua área de transferência.
Limitações do Canva Programação
- O Canva Code é compatível com todos os idiomas disponíveis no Canva, exceto os usuários do canva.cn.
- O código do Canva só recebe instruções da descrição que você inseriu ou usou. Quanto mais contexto e instruções você der, melhor será o resultado.
- O código pode ser copiado e reutilizado externamente, mas não pode ser exportado como um arquivo ou editado diretamente no Canva.
Posso reutilizar o código fora do Canva?
Sim. Depois de copiado, o código pode ser usado em seus próprios projetos. Embora tenha sido desenvolvido para o Canva, você pode adaptá-lo para ferramentas ou fluxos de trabalho externos.
Posso usar minhas criações do Canva Code para fins comerciais?
Como acontece entre você e o Canva e na medida permitida por lei, você é proprietário das informações que insere e dos resultados obtidos em nossos recursos de IA (incluindo o Canva Code e os códigos criados), e o Canva não fará nenhuma reivindicação de propriedade de direitos autorais de suas informações ou resultados (incluindo códigos criados no Canva Code). Para obter mais detalhes e ver os termos completos, consulte nossos Termos de Uso de Produtos com IA.
Quem pode ver o que eu crio com o Canva Code?
Só você pode ver suas conversas com o Canva Code. Ao clicar em Usar em um design, um novo design com essa versão é criado e você pode compartilhar o design (incluindo o Canva Code) pelo botão Compartilhar.
Se você publicar seu design em um site, o controle de acesso será controlado pelas configurações definidas durante o processo de publicação do site.
Posso gerenciar o acesso da minha equipe ao Código do Canva?
Se você é admin, professor ou designer de marca, pode escolher quem tem acesso ao Canva Code na sua equipe ou turma.
Não consegue encontrar o Código do Canva na sua página inicial? Saiba mais sobre as restrições de acesso ao Código do Canva.
Por que não vejo linhas de código mudando?
O Canva Code agora usa edição baseada em diferenças, o que significa que apenas as linhas de código necessárias são atualizadas em vez de regenerar todo o bloco. Isso resulta em um feedback mais rápido quando você está fazendo pequenas alterações na sua lógica de design.
Se as linhas de código não forem alteradas após o envio do prompt, isso significa que o Canva está trabalhando em segundo plano para aplicar apenas as alterações necessárias. Aguarde até que o Canva Code termine de gerar outra versão.
Esta informação foi útil?
Foi útil
Não achei útil