Ajouter un backend à un prototype fonctionnel ou une application Web

Avant de commencer

Qui peut utiliser cette fonctionnalité

Figma Make est disponible en version bêta ouverte.

Disponible sur n'importe quelle licence.

Lorsque vous créez un prototype ou une application Web avec Figma Make, vous devrez parfois stocker et gérer des données de manière sécurisée en ajoutant un backend. Par exemple, vous aurez besoin d'un backend lorsque vous voudrez :

• Maintenir l'état d'une application sur différents navigateurs
• Fournir des parcours d'authentification fonctionnels, tels qu'un écran de connexion pour votre application
• Collecter les saisies des utilisateurs et les réponses aux formulaires
• Enregistrer et charger du contenu, comme du texte et des images
• Stocker des secrets, des clés API et des tokens pour effectuer des demandes sur les serveurs

Figma Make s'intègre à Supabase pour fournir un environnement en backend offrant un espace de stockage des secrets, des capacités de calcul et une base de données Postgres. Figma Make configurera des magasins de clés-valeurs de base dans cette base de données Postgres. Pour le moment, Figma Make ne configurera pas de base de données SQL complète dans le système Postgres fourni par Supabase.

Vous pouvez intégrer votre propre compte Supabase dans Figma Make. Si vous n'avez pas de compte, Figma Make vous expliquera comment vous lancer.

Une fois votre compte configuré, Figma Make vous guidera tout au long des étapes pour connecter un projet Supabase à votre application.

Figma Make garde en mémoire les projets Supabase auxquels vous vous êtes précédemment connecté, afin que vous puissiez les réutiliser plus facilement dans vos fichiers Figma Make.

Dès que vous disposez d'un backend, vous pouvez également ajouter des secrets et des clés API utilisables pour émettre une requête aux serveurs externes.

Pour plus d'informations, consultez nos bonnes pratiques et exemples de suggestions.

Backends

Lorsque vous travaillez avec des backends dans vos fichiers Figma Make, vous pouvez :

• Ajouter un backend
• Ajouter une clé secrète ou une clé API
• Gérer les secrets, les projets et les organisations Supabase

Ajouter un backend

Il y a deux façons d'activer l'intégration de Supabase qui ajoute un backend à votre prototype fonctionnel ou à votre application Web :

• Figma Make recommandera automatiquement l'ajout d'un backend en fonction de l'intention de vos prompts dans le chat IA. Vous pouvez également explicitement demander l'ajout d'un backend, en utilisant un prompt comme « Ajouter une authentification à mon application ».
• Dans les paramètres de votre fichier Figma Make, connectez Supabase.

Vous pouvez utiliser l'une ou l'autre méthode dans vos fichiers Figma Make. Vous n'utiliserez pas les deux méthodes dans le même fichier, car vous n'avez besoin de configurer un backend qu'une seule fois par fichier.

Rédiger un prompt pour ajouter un backend

Pour ajouter un backend en utilisant le chat IA :

1. Dans le chat IA, demandez au modèle d'ajouter un backend à votre prototype fonctionnel ou à votre application Web. Vous pouvez simplement écrire « Ajouter un backend », « Ajouter une connexion utilisateur » ou « Appeler [une API sécurisée, comme OpenAI] ».

2. Lorsque Figma Make vous demande de configurer votre compte Supabase, cliquez sur Connect. Cette étape ne se produit que lorsque vous configurez l'intégration Supabase pour la première fois.

   Un nouvel onglet de navigateur s'ouvre, vous redirigeant vers le site Web de Supabase.

   Lorsqu'on vous invite à vous connecter à Supabase, utilisez votre compte existant ou créez un compte gratuit.

   Si votre compte Supabase n'est pas encore associé à une organisation, Supabase vous invite également à en créer une.

3. Sur la page Authorize API access for Figma, sélectionnez une organisation et cliquez sur Authorize Figma.

   Dans votre navigateur, l'onglet Supabase se ferme et le système vous redirige vers Figma Make.

4. Si vous avez déjà un projet Supabase, cliquez sur Choose a project, puis cliquez sur Connect à côté du projet que vous souhaitez utiliser pour le fichier Figma Make.

   Si vous n'avez pas de projet Supabase, cliquez sur Create project. Ensuite, dans la fenêtre modale New Supabase project, saisissez un nom de projet, sélectionnez la région où vous souhaitez que le projet Supabase soit hébergé et créez un mot de passe pour votre base de données.

   Remarque : Le mot de passe de la base de données n'est pas identique à celui de votre compte Supabase. Le mot de passe de la base de données est utilisé pour accéder à la base de données Postgres dans votre projet Supabase. Vous n'aurez sans doute pas besoin d'utiliser ce mot de passe lorsque vous travaillez sur votre fichier Figma Make. Toutefois, Supabase exige que votre base de données comporte un mot de passe.

5. Cliquez sur Create project.

Une fois que votre projet Supabase est connecté au fichier Figma Make, vous pouvez vous lancer ! Dans le chat IA, vous pouvez indiquer au modèle la fonctionnalité que vous souhaitez développer, comme un formulaire pour recueillir les données des utilisateurs. Le modèle se chargera alors de mettre en œuvre cette fonctionnalité pour vous.

Ajouter un backend dans les paramètres du fichier

Pour ajouter un backend dans les paramètres de votre fichier Figma Make :

1. Dans le coin supérieur droit de votre fichier Figma Make, cliquez sur Make settings.
2. Dans la barre latérale gauche, sous Integrations, cliquez sur Supabase.

3. Cliquez sur Connect Supabase. Cette étape n'est requise que lorsque vous configurez l'intégration Supabase pour la première fois.

   Un nouvel onglet de navigateur s'ouvre, vous redirigeant vers le site Web de Supabase.

   Lorsqu'on vous invite à vous connecter à Supabase, utilisez votre compte existant ou créez un compte gratuit.

   Si votre compte Supabase n'est pas encore associé à une organisation, Supabase vous invite également à en créer une.

4. Sur la page Authorize API access for Figma, sélectionnez une organisation et cliquez sur Authorize Figma.

   Dans votre navigateur, l'onglet Supabase se ferme et le système vous redirige vers Figma Make.

5. Si vous avez déjà un projet Supabase, cliquez sur Connect à côté du projet que vous souhaitez utiliser pour le fichier Figma Make.

   Si vous n'avez pas de projet Supabase, cliquez sur Create new project. Ensuite, dans la fenêtre modale New Supabase project, saisissez un nom de projet, sélectionnez la région où vous souhaitez que le projet Supabase soit hébergé et créez un mot de passe pour votre base de données.

   Remarque : Le mot de passe de la base de données n'est pas identique à celui de votre compte Supabase. Le mot de passe de la base de données est utilisé pour accéder à la base de données Postgres dans votre projet Supabase. Vous n'aurez sans doute pas besoin d'utiliser ce mot de passe lorsque vous travaillez sur votre fichier Figma Make. Toutefois, Supabase exige que votre base de données comporte un mot de passe.

   Cliquez sur Create project.

Une fois que votre projet Supabase est connecté au fichier Figma Make, retournez sur le chat IA et commencez à travailler avec le modèle pour exploiter pleinement votre backend.

Ajouter une clé secrète ou une clé API

Lorsque vous créez un prototype fonctionnel ou une application Web, il se peut que vous souhaitiez obtenir des données à partir de serveurs externes. Par exemple, si vous possédez une application qui affiche des informations météorologiques à vos utilisateurs, vous pouvez utiliser une API météorologique qui nécessite une clé API ou un jeton d'accès.

Lorsque vous utilisez le chat IA pour créer votre prototype fonctionnel ou votre application Web, Figma Make vous demandera de configurer un backend (si vous ne l'avez pas déjà fait), puis vous fournira une interface pour saisir votre secret ou votre clé API.

Pour ajouter un secret ou une clé API :

1. Dans le chat IA, indiquez au modèle que vous souhaitez ajouter un secret pour votre prototype fonctionnel ou votre application Web. Rédigez par exemple : « Je souhaite une application qui me permette de voir les cours des actions. Créez un secret pour stocker ma clé API. »
2. Dans la zone Create a secret, sous Add secret details, saisissez votre secret ou clé API.
3. Cliquez sur Create secret.

Lorsque vous cliquez sur Create secret, Figma Make utilisera Supabase pour stocker en toute sécurité le secret ou la clé API. Ensuite, vous pouvez continuer à demander à Figma Make d'ajouter d'autres fonctionnalités à votre prototype fonctionnel ou application Web qui exploitent le secret ou la clé API ajoutés.

Gérer les secrets, les projets et les organisations Supabase

Les secrets de votre backend, ainsi que vos projets et organisations Supabase, sont tous gérés via le site Web de Supabase. Figma Make propose quelques liens rapides pour vous rediriger vers les bonnes pages du site Supabase.

Pour gérer les secrets, les projets et les organisations dans Supabase :

1. Dans le coin supérieur droit de votre fichier Figma Make, cliquez sur Make settings.
2. Dans la barre latérale gauche, sous Integrations, cliquez sur Supabase.
3. Dans la ligne du projet connecté à votre fichier Figma Make, cliquez sur l'icône des points de suspension. Ensuite :
   • Cliquez sur Manage project pour accéder au tableau de bord Supabase de ce projet.
   • Cliquez sur Manage organization pour accéder à la page des paramètres de votre organisation Supabase.
   • Cliquez sur Manage secrets pour accéder à la base de données Edge Functions de votre projet Supabase.

Bonnes pratiques pour travailler avec les backends

Voici quelques bonnes pratiques à garder à l'esprit lorsque vous travaillez avec des backends dans Figma Make :

• Assurez-vous d'utiliser les interfaces Supabase que Figma Make fournit. N'incluez pas de données sensibles, telles que des secrets ou des clés API, dans le texte brut de vos prompts.
• De manière générale, pour optimiser l'utilisation de vos projets Supabase, nous vous recommandons de réutiliser les projets Supabase dans vos fichiers Figma Make.

Exemples de prompts

Voici quelques exemples de prompts que vous pouvez utiliser pour essayer de travailler avec un backend dans Figma Make.

Exemples de stockage de données et d'état

• « Créer une application de suivi des tâches où je peux enregistrer mes tâches. Elle doit inclure une fonctionnalité de suivi du temps afin que je puisse saisir combien de temps j'ai passé sur chaque tâche. »
• « Créer une galerie photos où je peux importer des images. »
• « Je suis responsable produit pour une plateforme de marketing. Créer une preuve de concept pour l'outil de comparaison de campagnes que nous ajoutons. Montrer comment les données historiques de campagne seront stockées et comment les utilisateurs peuvent sélectionner des plages de dates pour la comparaison. »
• « Je suis responsable produit pour une plateforme d'apprentissage en ligne. Créer un prototype de l'outil de création de quiz pour notre système auteur de cours. Montrer comment les instructeurs peuvent créer une large gamme de questions, allant du texte libre aux choix multiples et aux curseurs. Permettre le partage des quiz afin que les utilisateurs du prototype puissent créer leur propre quiz et le partager afin d'obtenir des retours. »

Exemples d'utilisation de secrets et de clés API

• « Créer un générateur de playlists qui extrait mon historique d'écoute à partir de l'API Spotify. »
• « J'ai besoin d'une application de liste de lecture qui se connecte à l'API Goodreads pour récupérer des informations sur les livres et permettre aux utilisateurs de suivre leur progression. »
• « Créer un outil de suivi des candidatures qui utilise l'API LinkedIn pour importer des offres d'emploi et qui permet aux utilisateurs de suivre l'état des candidatures. »

Exemples d'ajout d'authentification

• « Créer un traqueur d'habitudes qui nécessite la connexion de l'utilisateur et stocke les informations de suivi dans un magasin clé-valeur. »
• « Je suis un développeur qui conçoit un produit SaaS. Créer un système de connexion pour les utilisateurs. Il doit prendre en charge l'authentification par e-mail/mot de passe ainsi que les connexions sociales via Google et GitHub, et inclure une fonctionnalité de réinitialisation du mot de passe. »
• « Créer un gestionnaire d'extraits de code nécessitant une connexion à GitHub et stockant les extraits dans une base de données. »