chatgpt figma plugin

Plug-in ChatGPT Figma

v0.3.6

Plug-in Experimental ChatGPT para Figma

---

Visão geral

Este plugin experimental permite que os designers aproveitem o ChatGPT da Open AI diretamente no Figma. A "criação" de imagens é facilitada através do Lexica e do Unsplash. Há também um pequeno painel para execução de código e um mini console.

Como o plugin é experimental e aproveita uma API ChatGPT não oficial, ele opera apenas no “modo de desenvolvedor” e pode quebrar ou parar de funcionar a qualquer momento. Você deve estar razoavelmente confortável com o terminal, pois a configuração é um pouco complicada e o servidor precisa ser reiniciado com frequência devido ao interesse atual do ChatGPT.

Assista à demonstração

---

Começando

Pré-requisitos

1. Crie uma conta OpenAI
2. Certifique-se de ter o Node 18.0+ instalado. Eu recomendo o nvm para lidar com o versionamento do Node.

Baixe e construa

1. Clone este repositório no diretório de sua escolha. git clone https://github.com/frederickk/chatgpt-figma-plugin.git
2. Instale as dependências necessárias npm install
3. Crie um arquivo .env e adicione suas credenciais de login OpenAI OPENAI_EMAIL="..." e OPENAI_PASSWORD="..."
4. Construir npm run build

Instalar e executar

1. Execute o servidor intermediário ChatGPT npm run serve .
2. Carregue o plugin em Figma Plugins > Desenvolvimento > Importar plugin do manifesto...
3. Et voilà!

---

Uso

Basta inserir uma pergunta ou solicitação para ChatGPT, clicar no botão Enviar (ícone de avião de papel) e (após alguns segundos) os resultados serão:

1. gerar uma nova caixa de texto ou
2. substitua o conteúdo do texto da caixa de texto selecionada
3. erro... tentar novamente?

Abra o painel Lexica para pesquisar no Lexica trabalhos gerados por IA que correspondam à descrição fornecida.

Abra o painel Código e insira qualquer javascript válido da API Figma Plugin que você gostaria de executar. ️ Tome cuidado! isso é feito usando eval() e não é o mais seguro ️ .

Abra o painel Console para revelar uma pequena saída do console para que você possa ver o que está acontecendo nos bastidores.

---

Construir

Comando	Descrição
npm run build	Executa o processo de construção do Webpack uma vez
npm run clean	Limpa ./build e quaisquer arquivos em cache
npm run dev	Executa o processo de construção do Webpack e observa as alterações; reconstruindo conforme necessário
npm run dev:serve	O mesmo que dev, mas com UI acessível via http://localhost:8080
npm run serve	Executa o servidor intermediário da API ChatGPT http://localhost:3000 . Isso é necessário para que o plugin funcione.