Datengestützte Websites mit Payload in Figma erstellen, veröffentlichen und verwalten
Mit Payload in Figma können Teams vom Prototyp bis zur Produktion zusammenarbeiten und ihre Daten und Inhalte an einem Ort verwalten.
Datengestützte Websites mit Payload in Figma erstellen, veröffentlichen und verwalten teilen
Payload ist seit dem letzten Jahr Teil von Figma. In den letzten 12 Monaten haben sich die Payload-Downloads versechsfacht. Damit ist es jetzt das am schnellsten wachsende Open-Source-CMS auf NPM. Erfahre unter Payload.org mehr darüber und wie du es selbst hosten oder erweitern kannst.
Websites und Apps müssen Daten speichern und verwalten – von veröffentlichten Inhalten bis hin zu Informationen, die Besucher*innen bereitstellen. Mit Payload, dem nun in Figma Make integrierten Open-Source-Content-Framework, können Teams diese Erfahrungen mit einem integrierten Backend erstellen und hosten und dann ihre Inhalte und Daten an einem Ort verwalten.
Mit Payload werden bei einem Prompt an eine App in Figma Make auch die Tools zum Speichern und Verwalten von Inhalten und Daten eingerichtet, einschließlich einer Datenbank, Dateispeicherung, Benutzer-Login und Admin-Panel. Designer*innen können nun mit einem Prompt ein Erlebnis mit echtem Inhalt erstellen, während Marketing-Expert*innen denselben Inhalt über ein integriertes Admin-Panel hinzufügen sowie aktualisieren und Entwickler*innen die App mithilfe des Open-Source-Frameworks von Payload anpassen. Jede*r erhält einen Workspace passend zur jeweiligen Rolle und detaillierte Berechtigungen. So können Teams steuern, wer was ändern darf.
Informiere dich über alles, was in dieser Woche gestartet wird.
Einrichtung und Hosting komplett in Figma
Payload bietet alles, was deine App benötigt – Inhalte, Medien, Berechtigungen, Workflows, Versionierung, APIs und ein Admin-Panel – und Figma hostet es, sodass deine Inhalte und Daten zusammen mit den zugrundeliegenden Designs an einem Ort gespeichert sind.
Wenn dein Team zum Beispiel einen Lieferservice starten möchte, muss die Website den Service erklären und potenzielle Fahrer zur Bewerbung einladen. Dein Team muss Texte und Bilder verwalten können und benötigt zusätzlich eine Möglichkeit, eingereichte Bewerbungen zu speichern, zu überprüfen und die Bewerber*innen durch den Onboarding-Prozess zu verfolgen. Früher hätte dein Team möglicherweise ein externes Content-Management-System (CMS) mit der Website verbunden, um die Texte und Bilder zu verwalten, und mit Entwickler*innen zusammengearbeitet, um eine Möglichkeit zum Speichern, Überprüfen und Verfolgen der Fahrerbewerbungen zu schaffen.
Nun kommen die Website und das Backend zum Speichern und Verwalten von Anwendungen zusammen, einschließlich eines Admin-Panels, in dem Marketingfachleute Inhalte aktualisieren und Produktteams Bewerber*innen überprüfen. Das bedeutet, dass dein Team mehr Zeit damit verbringen kann, die Website zu erstellen und deren Inhalte aktuell zu halten, und weniger Zeit für das Einrichten, Verbinden und Verwalten separater Systeme aufwenden muss.
Kundenbeispiel: NBBJ
Bei IBM testete der leitende visuelle und UX-Designer Noah Trevino, ob Payload seinem Team die Verwaltung der häufig aktualisierten internen Websites erleichtern könnte. Er gab Figma seine vorhandenen Designbildschirme und eine Liste der benötigten Felder und erhielt einen Arbeitsentwurf zurück, den sein Team zum Aktualisieren von Inhalten verwenden konnte. „Payload gab meinem Team ein Content-System, das jeder verwalten kann und über eine integrierte Versionshistorie verfügt, sodass diese Ressourcen lange nach dem Start genau und nützlich bleiben“, sagt Noah.
Eine direkte Möglichkeit für Teammitglieder, Inhalte und Daten zu verwalten
Zur Verwaltung routinemäßiger Updates bietet Payload jetzt ein intuitives Bearbeitungs-Panel, sodass du für Änderungen nicht mit Prompts arbeiten, Figma verlassen und zu einem Drittanbieter-CMS wechseln oder eine separate Bearbeitungsseite erstellen musst. Über das Bearbeitungs-Panel kann das Team neue Artikel erstellen, Texte bearbeiten, Inhalte taggen, Medien austauschen, Kategorien umordnen, Versionen überprüfen und Updates veröffentlichen. Dazu muss es weder Tickets erstellen, noch auf das Entwicklungsteam warten.
Tipp zu Payload
Sobald deine Web-App veröffentlicht ist, kannst du Inhalte schnell verwalten, indem du dich in deine Site einloggst und /admin hinzufügst.
Figma-Marketer Seth Harris und sein Team bauen zum Beispiel eine Begleitwebsite für die YouTube-Reihe „Source Material“, damit Zuschauer*innen in den in den Episoden vorgestellten Bücher und Zeitschriften stöbern können, Sie haben Payload-Einträge für den Titel, das Coverbild und die zugehörige Episode jedes Artikels eingerichtet, zusammen mit benutzerdefinierten Feldern für Bindung und Einband, die seine Form in einem interaktiven 3D-Regal bestimmen. Das Admin-Panel bietet dem Team eine Möglichkeit, Artikel hinzuzufügen und diese Details zu aktualisieren, ohne dass zum Aktualisieren jedes Eintrags Prompts erforderlich sind. Wenn das Team später eine Reihe von Katalogeinträgen ergänzen muss, kann es eine CSV hochladen, anstatt jeden Artikel einzeln eingeben zu müssen.
Absicherung der API-Schlüssel deiner App
Angenommen, dein Team möchte, dass Besucher*innen sich für einen Newsletter über neue Produkte anmelden. Damit deine Website nach der Anmeldung eine Bestätigungs-E-Mail senden darf, benötigt sie die Erlaubnis, deinen E-Mail-Dienst zu nutzen. Diese Berechtigung erfolgt über einen API-Schlüssel. Vor Payload in Figma musstest du zum sicheren Speichern dieses Schlüssels ein Supabase-Projekt einrichten und verbinden. Jetzt kannst du den Schlüssel direkt in den Einstellungen von Make speichern, und Figma speichert ihn sicher, damit er beim Veröffentlichen der Website nicht für Besucher*innen erreichbar ist. Das bedeutet weniger Aufwand bei der Einrichtung von Bestätigungs-E-Mails, während der Schlüssel privat bleibt.
Mit Payload sind Inhalte und Daten nicht mehr etwas, um das dein Team herumbauen muss. Stattdessen werden sie zu dem Rohmaterial, mit dem du vom ersten Prompt bis zur Veröffentlichung gestaltest.
Mit Payload kann dein Team an einem Ort Inhalte aktuell halten und die von Besucher*innen gewünschten Funktionen unterstützen – und das mit weniger separatem Setup-Aufwand.
Payload ist in allen Abos verfügbar, mit rollierendem Zugriff auf alle Konten in den kommenden Wochen. Die Hosting-Infrastruktur für Projekte mit Payload-unterstütztem Figma Make befindet sich derzeit in der Beta-Phase und ist kostenlos nutzbar. Wir werden die Preisgestaltung und Pakete ankündigen, bevor sie in Kraft treten.
