Payload dans Figma : créez, publiez et gérez des sites web basés sur des données

Les sites web et les applications doivent stocker et gérer les données, des contenus publiés aux informations soumises par les visiteurs. Avec Payload, le framework de contenu open source désormais intégré dans Figma Make, les équipes peuvent créer et héberger ces expériences avec un backend intégré, puis gérer leur contenu et leurs données, le tout en un seul endroit.

Avec Payload, la création d'une application par prompt dans Figma Make permet également de configurer les outils nécessaires au stockage et à la gestion de son contenu et de ses données, notamment une base de données, un espace de stockage de fichiers, une connexion utilisateur et un panneau d'administration. Un designer peut désormais créer par prompt une expérience à partir de contenu réel tandis qu’un responsable marketing ajoute et met à jour ce même contenu via un panneau d’administration intégré, et qu’un développeur personnalise l’application à l’aide du framework open source de Payload. Chacun dispose d'un espace de travail adapté à son rôle, avec des autorisations précises permettant aux équipes de contrôler les modifications autorisées pour chaque utilisateur.

Découvrez tous les lancements prévus cette semaine.

Configurer et tout héberger dans Figma

Payload prend en charge tout ce dont votre application a besoin — contenu, médias, autorisations, workflows, gestion des versions, API et panneau d'administration — et Figma héberge le tout, de sorte que votre contenu et vos données se trouvent au même endroit que les designs qui les définissent.

Imaginons que votre équipe lance un service de livraison. Le site web doit expliquer le service et permettre aux conducteurs potentiels de postuler. Outre la gestion des textes et des images, votre équipe a besoin d'un moyen de stocker les candidatures reçues, de les examiner et d'assurer le suivi des candidats tout au long de leur intégration. Auparavant, votre équipe devait peut-être connecter un système de gestion de contenu (CMS) externe au site web pour gérer les textes et les images, et collaborer avec des ingénieurs afin de mettre en place un système permettant de stocker, d’examiner et d’assurer le suivi des candidatures des chauffeurs.

Désormais, le site web et le backend dédié au stockage et à la gestion des candidatures ne font plus qu’un, et comprennent un panneau d’administration sur lequel les responsables marketing mettent à jour le contenu et les équipes produit examinent les candidatures. Votre équipe peut ainsi consacrer davantage de temps à la conception du site web et à la mise à jour de son contenu, et moins de temps à la mise en place, à l’interconnexion et à la gestion de systèmes distincts.

Offrez à vos coéquipiers un moyen direct de gérer le contenu et les données

Pour gérer les mises à jour courantes, Payload met désormais à votre disposition un panneau d'édition intuitif. Vous n'avez ainsi plus besoin de passer par plusieurs étapes pour effectuer des modifications, ni de quitter Figma pour vous rendre sur un CMS tiers, ou de créer une page d'édition distincte. Grâce à ce panneau d'édition, l'équipe peut rédiger de nouveaux articles, modifier des textes, ajouter des balises au contenu, remplacer des fichiers multimédias, réorganiser les catégories, réviser les versions et publier des mises à jour, le tout sans avoir à ouvrir de ticket ni à attendre l'intervention de l'équipe technique.

Par exemple, Seth Harris, spécialiste du marketing chez Figma, et son équipe créent un site web compagnon pour la série YouTube Source Material, afin que les utilisateurs puissent parcourir les livres et magazines présentés dans les épisodes. Ils ont configuré des entrées Payload pour le titre, l’image de couverture et l’épisode associé à chaque ouvrage, ainsi que des champs personnalisés pour la reliure et la finition de la couverture, qui déterminent son apparence sur une étagère 3D interactive. Le panneau d'administration donne à l'équipe un moyen d'ajouter des éléments et de mettre à jour ces détails sans utiliser de prompts pour mettre à jour chaque entrée. Si plus tard l'équipe doit ajouter un lot d'entrées de catalogue, elle pourrait télécharger un fichier CSV plutôt que de saisir chaque article individuellement.

Veiller à la sécurité des clés API de votre application

Imaginons que votre équipe souhaite que les visiteurs s'inscrivent à une newsletter consacrée aux nouveautés produits. Pour envoyer un e-mail de confirmation après une inscription, votre site web doit disposer d’une autorisation d’utiliser votre service de messagerie. Cette autorisation s'obtient par une clé API. Avant Payload dans Figma, il vous aurait fallu configurer et connecter un projet Supabase pour stocker cette clé en toute sécurité. Désormais, vous pouvez stocker la clé directement dans les paramètres de Make, et Figma la stocke en toute sécurité pour qu'elle ne soit pas exposée aux visiteurs lorsque le site web est publié. Ainsi, la configuration nécessaire au fonctionnement des e-mails de confirmation est simplifiée, tout en préservant la confidentialité de la clé.

Avec Payload, le contenu et les données ne sont plus des éléments que votre équipe doit contourner, mais la matière première avec laquelle vous concevez, de la première ébauche jusqu’au produit final.

Grâce à Payload, votre équipe dispose d'un espace lui permettant de maintenir son contenu à jour et d'assurer le bon fonctionnement des fonctionnalités sur lesquelles comptent les visiteurs, tout en réduisant les configurations distinctes nécessaires.

Payload est disponible dans tous les forfaits, avec un déploiement progressif sur tous les comptes au cours des prochaines semaines. L’infrastructure d’hébergement des projets Figma Make basés sur Payload est actuellement en version bêta et son utilisation est gratuite. Nous communiquerons les tarifs et les offres avant leur entrée en vigueur.

Pour en savoir plus, accédez au centre d'aide.