figchat

Vous trouverez ci-dessous les étapes pour faire fonctionner votre widget. Vous pouvez également trouver des instructions à:

https://www.figma.com/widget-docs/setup-guide/

Ce modèle de widget utilise TypeScript et NPM, deux outils standard pour créer des applications JavaScript.

Tout d'abord, téléchargez Node.js qui est livré avec NPM. Cela vous permettra d'installer TypeScript et d'autres bibliothèques. Vous pouvez trouver le lien de téléchargement ici:

https://nodejs.org/en/download/

Ensuite, installez TypeScript, Esbuild et les derniers définitions de types en fonctionnant:

Installation de NPM

Si vous connaissez JavaScript, TypeScript sera très familier. En fait, le code JavaScript valide est déjà un code TypeScript valide.

TypeScript ajoute des annotations de type aux variables. Cela permet aux éditeurs de code tels que Visual Studio Code de fournir des informations sur l'API Figma pendant que vous écrivez du code, ainsi que pour vous faire des bugs que vous n'avez pas remarqués auparavant.

Pour plus d'informations, visitez https://www.typescriptlang.org/

L'utilisation de TypeScript nécessite un compilateur pour convertir TypeScript (widget-src / code.tsx) en javascript (dist / code.js) pour que le navigateur l'exécute. Nous utilisons Esbuild pour le faire pour nous.

Nous vous recommandons d'écrire du code TypeScript à l'aide du code Visual Studio:

1. Téléchargez le code Visual Studio si vous ne l'avez pas déjà fait: https://code.visualstudio.com/.
2. Ouvrez ce répertoire dans Visual Studio Code.
3. Compiler TypeScript à JavaScript: Exécutez l'élément de menu "Terminal> Exécuter la tâche de construction ...", puis sélectionnez "NPM: Watch". Vous devrez refaire cela à chaque fois que vous rouvrez Visual Studio Code.

C'est ça! Visual Studio Code régénérera le fichier JavaScript à chaque fois que vous enregistrez.