Como Criei um Componente para o Framer Usando IA

O Framer é extremamente poderoso e permite que você crie páginas com animações e efeitos complexos sem digitar nenhuma linha de código.

Mesmo assim, se você quiser ir além e adicionar funcionalidades extras, você pode incluir trechos de código pra alterar o comportamento de elementos na sua página (code overrides) ou ainda criar um componente personalizado para o seu projeto (code component).

Hoje, vou mostrar como criei esse componente sem saber programar em React:

Demo: https://progress-circle.framer.website

Há um tempo atrás, queria criar um componente igual o exemplo acima. Assim como várias coisas dentro do Framer, existe mais de uma forma de chegar no resultado desejado - mas dessa vez quis criar um code component.

O que é um Code Component?

Os Code Components são componentes em React (linguagem de programação do Framer) personalizados que você pode criar quando você precisa de algo especial que os componentes padrão não conseguem fazer.

Eles são usados como qualquer outro componente comum no seu site, mas podem fazer coisas que os componentes normais não conseguem, utilizando trechos de código.

Como Foi o Processo

Certo, mas como fez isso se você já disse que não sabe programar em React?

A verdade é que com um pouco de criatividade podemos encontrar soluções aproveitando ferramentas de IA que estão ao nosso alcance, como o ChatGPT e o Claude.

Nesse caso, pedi para o Claude escrever esse código pra mim. Aqui o segredo é enviar um código existente ou documentação para que a IA tenha uma base para seguir:

Perceba que além de explicar em detalhes o que eu queria, também deixei claro quais Propriedades eu queria que fossem disponibilizadas no painel do Framer (depois adicionei outras):

Essas propriedades são controles que as pessoas podem usar para customizar o componente depois, e aparecem dessa forma:

Dificilmente funciona na primeira tentativa, e você precisará pedir algumas alterações - mas depois de alguns ajustes, cheguei no resultado que eu queria.

É claro que estou falando de coisas mais simples, e não funcionalidades muito complexas, mas é incrível o que conseguimos fazer hoje em dia sem entender nada de programação, só com a ajuda de inteligência artificial.

Então, fica aqui a minha dica: não se limite e saiba aproveitar as ferramentas disponíveis para criar soluções que podem facilitar seu trabalho e elevar o nível dos seus projetos!