Ein Backend zu einem funktionalen Prototyp oder einer Web-App hinzufügen

Vor dem Start

Wer kann diese Funktion verwenden?

Figma Make befindet sich in der offenen Beta-Version.

In jeder Lizenz verfügbar.

Beim Erstellen eines Prototypen oder einer Web-App mit Figma Make ist es manchmal nötig, Daten sicher zu speichern und zu verwalten, indem du ein Backend hinzufügst. Zum Beispiel benötigst du ein Backend, wenn du Folgendes tun möchtest:

• Den Zustand einer App in verschiedenen Browsern beibehalten
• Funktionierende Authentifizierungsflüsse bereitstellen, wie z. B. einen Login-Bildschirm für deine App
• Benutzereingaben erfassen und auf Formulare antworten
• Inhalte wie Text und Bilder speichern und laden
• Geheimnisse, API-Schlüssel und Token speichern, um Anfragen an Server zu stellen

Figma Make integriert sich mit Supabase, um eine Backend-Umgebung bereitzustellen, die geheime Speicherung, Rechenleistung und eine Postgres-Datenbank bietet. Figma Make wird grundlegende Schlüsselwertspeicher in dieser Postgres-Datenbank einrichten; derzeit richtet Figma Make keine vollständige SQL-Datenbank in der von Supabase bereitgestellten Postgres-Datenbank ein.

Du kannst dein bestehendes Supabase-Konto zu Figma Make mitbringen. Wenn du kein Konto hast, führt dich Figma Make durch die ersten Schritte.

Sobald dein Konto bereit ist, wird Figma Make dich durch die Schritte führen, um ein Supabase-Projekt mit deiner App zu verbinden.

Figma Make merkt sich die Supabase-Projekte, mit denen du zuvor verbunden warst, damit du sie in deinen Figma Make-Dateien leichter wiederverwenden kannst.

Sobald du ein Backend hast, kannst du auch Geheimnisse und API-Schlüssel hinzufügen, die zur Abfrage externer Server verwendet werden können.

Weitere Informationen findest du in unseren Best Practices und Beispiel-Prompts.

Backends

Wenn du mit Backends in deinen Figma Make-Dateien arbeitest, kannst du:

• Ein Backend hinzufügen
• Ein Geheimnis oder einen API-Schlüssel hinzufügen
• Supabase-Geheimnisse, Projekte und Organisationen verwalten

Ein Backend hinzufügen

Es gibt zwei Möglichkeiten zum Aktivieren der Supabase-Integration, die deinem funktionalen Prototyp oder deiner Web-App ein Backend hinzufügt:

• Figma Make empfiehlt dir basierend auf der Absicht deiner Eingaben im KI-Chat automatisch, ein Backend hinzuzufügen. Du kannst auch explizit dazu auffordern, ein Backend hinzuzufügen, indem du einen Prompt wie „Authentifizierung zu meiner App hinzufügen“ verwendest.
• Verbinde Supabase in den Einstellungen deiner Figma Make-Datei.

Du kannst beide Methoden in deinen Figma Make-Dateien verwenden. Du wirst jedoch nicht beide Methoden in derselben Datei verwenden, da du pro Datei nur einmal ein Backend einrichten musst.

Aufforderung, ein Backend hinzuzufügen

So fügst du mithilfe des KI-Chats ein Backend hinzu:

1. Im KI-Chat forderst du das Modell auf, ein Backend zu deinem funktionalen Prototyp oder deiner Web-App hinzuzufügen. Das kann so einfach sein wie „Backend hinzufügen“, „Benutzeranmeldung hinzufügen“ oder „[eine sichere API, wie OpenAI] aufrufen“.

2. Wenn Figma Make dich auffordert, dein Supabase-Konto einzurichten, klicke auf „Verbinden“. Dieser Schritt erfolgt nur beim ersten Mal, wenn du die Supabase-Integration einrichtest.

   In einem neuen Browser-Tab wirst du zur Supabase-Website weitergeleitet.

   Wenn du aufgefordert wirst, dich bei Supabase einzuloggen, verwende dein bestehendes Konto oder erstelle ein kostenloses Konto.

   Wenn dein Supabase-Konto noch nicht mit einer Organisation verknüpft ist, fordert dich Supabase auch auf, eine Organisation zu erstellen.

3. Auf der Seite „API-Zugriff für Figma autorisieren“ wähle eine Organisation aus und klicke auf „Figma autorisieren“.

   In deinem Browser wird der Supabase-Tab geschlossen und du wirst zurück zu Figma Make geleitet.

4. Wenn du bereits ein bestehendes Supabase-Projekt hast, klicke auf „Projekt auswählen“ und dann auf „Verbinden“ neben dem Projekt, das du für die Figma Make-Datei verwenden möchtest.

   Falls du noch keine Supabase-Projekte hast, klicke auf „Projekt erstellen“. Dann gib im Modal „Neues Supabase-Projekt“ einen Projektnamen ein, wähle die Region aus, in der du das Supabase-Projekt hosten möchtest, und erstelle ein Passwort für deine Datenbank.

   Hinweis: Das Datenbankpasswort ist nicht dasselbe wie das Passwort für dein Supabase-Konto. Das Datenbankpasswort wird für den Zugriff auf die Postgres-Datenbank in deinem Supabase-Projekt verwendet. Du wirst dieses Passwort wahrscheinlich nicht verwenden müssen, während du in deiner Figma Make-Datei arbeitest, aber Supabase erfordert, dass deine Datenbank ein Passwort hat.

5. Klicke auf „Projekt erstellen“.

Sobald dein Supabase-Projekt mit der Figma Make-Datei verbunden ist, bist du startklar! Im KI-Chat kannst du dem Modell die Funktionalität mitteilen, die du erstellen möchtest, wie zum Beispiel ein Formular zur Erfassung von Benutzereingaben, und das Modell wird die Implementierung der Funktionalität für dich übernehmen.

Ein Backend in den Dateieinstellungen hinzufügen

So fügst du ein Backend in den Einstellungen deiner Figma Make-Datei hinzu:

1. Klicke in der oberen rechten Ecke deiner Figma Make-Datei auf „Make-Einstellungen“.
2. Klicke in der linken Seitenleiste unter „Integrationen“ auf „Supabase“.

3. Klicke auf „Supabase verbinden“. Dieser Schritt ist nur erforderlich, wenn du die Supabase-Integration zum ersten Mal einrichtest.

   In einem neuen Browser-Tab wirst du zur Supabase-Website weitergeleitet.

   Wenn du aufgefordert wirst, dich bei Supabase einzuloggen, verwende dein bestehendes Konto oder erstelle ein kostenloses Konto.

   Wenn dein Supabase-Konto noch nicht mit einer Organisation verknüpft ist, fordert dich Supabase auch auf, eine Organisation zu erstellen.

4. Auf der Seite „API-Zugriff für Figma autorisieren“ wähle eine Organisation aus und klicke auf „Figma autorisieren“.

   In deinem Browser wird der Supabase-Tab geschlossen und du wirst zurück zu Figma Make geleitet.

5. Falls du bereits ein Supabase-Projekt hast, klicke auf „Verbinden“ neben dem Projekt, das du für die Figma Make-Datei verwenden möchtest.

   Falls du noch keine Supabase-Projekte hast, klicke auf „Neues Projekt erstellen“. Dann gib im Modal „Neues Supabase-Projekt“ einen Projektnamen ein, wähle die Region aus, in der du das Supabase-Projekt hosten möchtest, und erstelle ein Passwort für deine Datenbank.

   Hinweis: Das Datenbankpasswort ist nicht dasselbe wie das Passwort für dein Supabase-Konto. Das Datenbankpasswort wird für den Zugriff auf die Postgres-Datenbank in deinem Supabase-Projekt verwendet. Du wirst dieses Passwort wahrscheinlich nicht verwenden müssen, während du in deiner Figma Make-Datei arbeitest, aber Supabase erfordert, dass deine Datenbank ein Passwort hat.

   Klicke auf „Projekt erstellen“.

Sobald dein Supabase-Projekt mit der Figma Make-Datei verbunden ist, kannst du zum KI-Chat zurückkehren und mit dem Modell arbeiten, um die Vorteile deines Backends zu nutzen.

Ein Geheimnis oder einen API-Schlüssel hinzufügen

Wenn du einen funktionalen Prototyp oder eine Web-App erstellst, möchtest du möglicherweise Daten von externen Servern abrufen können. Wenn du zum Beispiel eine App hast, die deinen Benutzer*innen Wetterinformationen anzeigt, kannst du eine API verwenden, die einen API-Schlüssel oder ein Zugriffstoken erfordert.

Wenn du im KI-Chat dazu aufgefordert wirst, deinen funktionalen Prototyp oder deine Web-App zu erstellen, wird Figma Make dich bitten, ein Backend einzurichten (falls du dies noch nicht getan hast), und dir dann eine Benutzeroberfläche bereitstellen, in die du deinen geheimen Schlüssel oder API-Schlüssel eingeben kannst.

So fügst du ein Geheimnis oder einen API-Schlüssel hinzu:

1. Im KI-Chat sagst du dem Modell, dass du ein Geheimnis für deinen Funktionsprototyp oder deine Web-App hinzufügen möchtest. Zum Beispiel: „Ich möchte eine App, mit der ich Aktienkurse ansehen kann.“ Erstelle ein Geheimnis, um meinen API-Schlüssel zu speichern."
2. Gib im Feld „Geheimnis erstellen“ unter „Geheimnisdetails hinzufügen“ dein Geheimnis oder deinen API-Schlüssel ein.
3. Klicke auf „Geheimnis erstellen“.

Wenn du auf „Geheimnis erstellen“ klickst, verwendet Figma Make Supabase, um das Geheimnis oder den API-Schlüssel sicher zu speichern. Anschließend kannst du Figma Make auffordern, deinem Funktionsprototyp oder deiner Web-App weitere Funktionen hinzuzufügen, die das hinzugefügte Geheimnis oder den API-Schlüssel nutzen.

Supabase-Geheimnisse, Projekte und Organisationen verwalten

Die Geheimnisse in deinem Backend sowie deine Supabase-Projekte und -Organisationen werden über die Supabase-Website verwaltet. Figma Make bietet einige schnelle Links, die dich zu den richtigen Seiten auf der Supabase-Website führen.

So verwaltest du Geheimnisse, Projekte und Organisationen in Supabase:

1. Klicke in der oberen rechten Ecke deiner Figma Make-Datei auf „Make-Einstellungen“.
2. Klicke in der linken Seitenleiste unter „Integrationen“ auf „Supabase“.
3. In der Zeile des Projekts, das mit deiner Figma Make-Datei verbunden ist, klicke auf das Ellipsensymbol. Dann:
   • Klicke auf „Projekt verwalten“, um zum Supabase-Dashboard dieses Projekts zu gelangen.
   • Klicke auf „Organisation verwalten“, um zur Seite „Einstellungen“ deiner Supabase-Organisation zu gelangen.
   • Klicke auf „Geheimnisse verwalten“, um zur Edge Functions-Datenbank für dein Supabase-Projekt zu gelangen.

Best Practices für die Arbeit mit Backends

Hier sind einige Best Practices, die du bei der Arbeit mit Backends in Figma Make beachten solltest:

• Stelle sicher, dass du die Supabase-Benutzeroberflächen verwendest, die Figma Make bereitstellt. Füge keine sensiblen Daten wie Geheimnisse oder API-Schlüssel in den Klartext deiner Prompts ein.
• Im Allgemeinen empfehlen wir dir, Supabase-Projekte in deinen Figma Make-Dateien wiederzuverwenden, um deine Supabase-Projekte so effizient wie möglich zu nutzen.

Beispiele für Prompts

Hier sind einige Beispiel-Prompts, die du verwenden kannst, um mit einem Backend in Figma Make zu arbeiten.

Beispiele für das Speichern von Daten und Zuständen

• „Erstelle eine Aufgabenverfolgungs-App, in der ich meine Aufgaben speichern kann. Sie sollte eine Zeiterfassungsfunktion enthalten, damit ich eingeben kann, wie lange ich für jede Aufgabe gebraucht habe.“
• „Erstelle eine Fotogalerie, in die ich Bilder hochladen kann.“
• „Ich bin Produktmanager*in bei einer Marketingplattform. Erstelle ein Proof of Concept für das Kampagnenvergleichstool, das wir hinzufügen. Zeige, wie historische Kampagnendaten gespeichert werden und wie Benutzer*innen Datumsbereiche zum Vergleich auswählen können.“
• „Ich bin Produktmanager*in bei einer E-Learning-Plattform. Erstelle einen Prototyp des Quiz-Erstellungstools für unser Kursautorensystem. Zeige, wie Lehrkräfte eine breite Palette von Fragen erstellen können, von Freitext über Multiple-Choice bis hin zu Schiebereglern. Mache die Quizze teilbar, damit Personen, die mit dem Prototyp spielen, ihr eigenes Quiz erstellen und es zum Feedback teilen können.“

Beispiele für die Verwendung von Geheimnissen und API-Schlüsseln

• „Erstelle einen Musik-Playlist-Creator, der meinen Hörverlauf von der Spotify-API abruft.“
• „Ich brauche eine Leselisten-App, die sich mit der Goodreads-API verbindet, um Buchinformationen abzurufen und es Benutzer*innen ermöglicht, ihren Fortschritt zu verfolgen.“
• „Erstelle einen Bewerbungstracker, der die LinkedIn-API verwendet, um Stellenangebote zu importieren und es Benutzer*innen ermöglicht, den Bewerbungsstatus zu verfolgen.“

Beispiele für das Hinzufügen von Authentifizierung

• „Erstelle einen Gewohnheits-Tracker, der eine Benutzeranmeldung erfordert und Streak-Informationen in einem Key-Wert-Store speichert.“
• „Ich bin ein Entwickler, der ein SaaS-Produkt erstellt. Erstelle ein System zur Benutzeranmeldung. Es sollte sowohl die E-Mail-/Passwort-Authentifizierung als auch soziale Logins über Google und GitHub unterstützen und eine Funktion zum Zurücksetzen des Passworts enthalten.“
• „Erstelle einen Code-Schnipsel-Manager, der eine GitHub-Anmeldung erfordert und Code-Schnipsel in einer Datenbank speichert.“