Plugin ChatGPT Figma

v0.3.6

Plugin expérimental ChatGPT pour Figma

Aperçu

Capture d'écran de l'interface utilisateur du plug-in ChatGPT Figma

Ce plugin expérimental permet aux concepteurs de profiter du ChatGPT d'Open AI directement dans Figma. La « création » d’images est facilitée via Lexica et Unsplash. Il y a aussi un petit panneau pour exécuter du code et une mini console.

Étant donné que le plugin est expérimental et tire parti d'une API ChatGPT non officielle, il ne fonctionne qu'en "mode développeur" et peut cesser de fonctionner à tout moment. Vous devez être raisonnablement à l'aise avec le terminal, car la configuration est un peu difficile et le serveur doit souvent être redémarré compte tenu de l'intérêt actuel de ChatGPT.

Regardez la démo

Commencer

Conditions préalables

Créer un compte OpenAI
Assurez-vous que Node 18.0+ est installé. Je recommande nvm pour gérer la gestion des versions de Node.

Télécharger et construire

Clonez ce référentiel dans le répertoire de votre choix. git clone https://github.com/frederickk/chatgpt-figma-plugin.git
Installer les dépendances nécessaires npm install
Créez un fichier .env et ajoutez vos informations de connexion OpenAI OPENAI_EMAIL="..." et OPENAI_PASSWORD="..."
Construire npm run build

Installer et exécuter

Exécutez le serveur intermédiaire ChatGPT npm run serve .
Chargez le plugin dans Figma Plugins > Développement > Importer le plugin à partir du manifeste...
Et voilà !

Usage

Entrez simplement une question ou une demande pour ChatGPT, cliquez sur le bouton Envoyer (icône d'avion en papier) et (après quelques secondes) les résultats seront soit :

générer une nouvelle zone de texte ou
remplacer le contenu du texte de la zone de texte sélectionnée
erreur... réessayer ?

Ouvrez le panneau Lexica pour rechercher dans Lexica le travail généré par l'IA qui correspond à la description donnée.

Ouvrez le panneau Code et entrez n'importe quel javascript d'API Figma Plugin valide que vous souhaitez exécuter. ️ Sois prudent! cela se fait en utilisant eval() et ce n'est pas le plus sûr ️ .

Ouvrez le panneau Console pour révéler une petite sortie de la console afin que vous puissiez voir ce qui se passe dans les coulisses.

Construire

Commande	Description
`npm run build`	Exécute le processus de création de Webpack une fois
`npm run clean`	Nettoie `./build` et tous les fichiers mis en cache
`npm run dev`	Exécute le processus de création de Webpack et surveille les modifications ; reconstruire si nécessaire
`npm run dev:serve`	Identique au développement mais avec une interface utilisateur accessible via `http://localhost:8080`
`npm run serve`	Exécute le serveur intermédiaire de l'API ChatGPT `http://localhost:3000` . Ceci est requis pour que le plugin fonctionne.