Add a backend to a functional prototype or web app

Add a backend in Figma Make to build web apps that store data, support user accounts, and let your team manage content. Describe what you want to build in the chat, and Make can create a Payload-powered backend, including a database, file storage, authentication, and an admin panel. You can also manually connect a Supabase project from Make settings.

About backends in Figma Make

A backend stores information and handles actions behind your app’s interface. For example, a booking site needs a backend to save appointment requests, and a restaurant website can use one to store menu items that staff can update.

Add a backend when your app needs to:

• Save information between visits, such as tasks or preferences
• Support user accounts and sign-in
• Collect form submissions
• Store and manage content, such as articles, listings, and images
• Connect to services that require private API keys

Figma Make supports two backend options:

Use Payload in Figma Make

Payload is an open-source application framework built with TypeScript and Next.js. It provides tools for storing data, managing content, and controlling access, including a database, file storage, APIs, authentication, and an admin panel. It is often used as a headless content management system, or CMS.

Make creates the data model and connects your app to the Payload backend. The data model defines the information your app stores and how it is organized.

For example, an online marketplace might store seller accounts, listings, and product photos alongside marketing pages and help articles. Make builds the interface, and Payload provides the backend to store and manage that information.

Figma hosts the app and its data, reducing the number of services your team needs to set up and manage.

Add a Payload backend

You can prompt the chat in Make to add a backend to your app.

1. Open a Figma Make file, or create one from the file browser.
2. Describe an app that needs to store or manage data. You can explicitly ask Make to include Payload, a CMS, or a backend.
3. When the backend creation card appears, click Create.
4. Make designs the data model, creates the Payload collections, and builds the front end.
5. Open the CMS tab to view and manage the content Make created.

For example, you can prompt:

Build a booking site with a Payload CMS backend. Customers should be able to browse services and submit appointment requests. Staff should be able to manage services and requests. Seed realistic sample content with Payload's MCP.

Payload organizes records into Collections. Each collection stores a type of content or data, such as articles, services, or appointment requests. You can ask Make to add sample records so you have content to work with.

The generated Payload and Next.js code is included in your Make project. Continue prompting Make to add features or refine the app.

Example projects with Payload

Use these prompts as starting points. Continue the conversation to add features or change your data model.

Booking and registration apps

Create an app where visitors submit requests and staff manage the records:

Build a service-booking app for a neighborhood wellness studio called Northstar Bodywork, using Payload CMS. Customers should be able to browse massage and acupuncture services, view practitioner profiles, request an appointment slot, and submit their contact details. Staff should manage services, practitioners, availability, appointment requests, and customer notes. Seed realistic starter records.

You can use the same approach for event registration: list events, let visitors register, and let them manage their registrations.

Content websites and directories

Create a website with content that a team can update through the admin panel:

Build a restaurant website with an editable menu using Payload CMS. Seed a realistic opening menu and food images.

Then add a feature:

Add dietary tags to menu items and show vegetarian badges.

For a places directory, ask Make to seed listings, add opening hours, and display an “Open now” indicator.

Internal tools and dashboards

Create a tool that stores records and displays results:

Create a dashboard with a Payload backend to log experiments and track results. Include sample data.

You can also ask Make to connect an external data source:

Pull results from Mixpanel.

Editorial websites

Create a CMS for editors to manage articles and related content:

Build an editorial website for a small city food magazine called Table Signal, using Payload CMS. Editors should manage articles, authors, categories, homepage feature slots, and media through an admin panel. Articles need slugs, hero images, excerpts, rich body content, authors, categories, publish dates, and draft and revision support. Seed realistic starter articles.

Then extend the site:

Add an editor’s picks section on the homepage. Editors should be able to manage and reorder the picks in the admin panel. Each pick should link to an article detail page by slug.

Manage content and data

The CMS tab displays the Payload admin panel inside Figma Make. Use it to view, create, and edit records in the collections Make built.

For example, in a booking app, staff can update services and practitioner profiles, manage availability, and review appointment requests. When a visitor submits a connected booking form, the app saves the request as a record in Payload.

Teammates can make routine content updates through the admin panel without prompting Make or editing the app’s code. For example, a marketer can update campaign copy and images while a designer continues refining the app’s layout. Permissions control who can view or change content.

Invite teammates on the same Figma plan to manage content. After publishing, they can continue using the CMS tab inside Make or access the deployed admin panel at your published URL with /admin added to the end.

Update your data model

Prompt Make when you want to change the types of information your app stores or how the app uses that information.

For example, after creating a restaurant website, you can ask:

Add dietary tags to menu items and show vegetarian badges.

Make updates the data model and the interface to support the new fields. Your team can then manage dietary tags for individual menu items through the CMS tab.

Use the CMS tab to edit existing records, such as changing a menu item’s price. Use the chat to ask Make to add fields, collections, or features.

Add environment variables

Environment variables store configuration values your app needs, such as an API key for an external service.

For example, your app might send a confirmation email when someone signs up for a newsletter. To send the email, the app needs an API key that gives it permission to use your email service.

Add the key through the environment variable settings in Make. Figma stores it securely so your app can use it without exposing the key to visitors when you publish.

Publish your app

Use the same publishing flow as other Figma Make projects. Publishing deploys your app and its Payload backend to Figma’s hosted infrastructure.

To publish your functional prototype or web app:

1. Open the Figma Make file that you want to publish.
2. In the upper-right corner, click Publish.
3. In the Publish modal, set a title.
4. Optionally, in the upper-right corner of the Figma Make interface, click Make settings to change additional settings for your site.
5. Click Publish.

Learn more about publishing, updating, and unpublishing Figma Make files.

After publishing, you and your teammates can continue managing content through the CMS tab inside Make. You can also open your published URL with /admin added to the end and log in to the deployed Payload admin panel.

Payload limitations

• Hosting region: Payload backends are currently hosted in the eastern United States, with support from more regions coming soon. You can use the feature from other regions, but requests may take longer when you are farther from the database.
• GitHub and local development: GitHub integration and local codebase workflows are not yet available for Payload-backed Make apps, but will be available soon.

Connect Supabase to Figma Make

Supabase remains available through Integrations in Make settings. It provides compute, secret storage, and a Postgres database. Figma Make currently uses key-value stores rather than setting up a full SQL database.

Connect a project

1. Open Make settings → Integrations → Supabase.
2. Click Connect Supabase.
3. Sign in or create an account and organization.
4. Select an organization and click Authorize Figma.
5. Back in Make, connect an existing project or click Create new project.
6. For a new project, enter its name, hosting region, and database password, then click Create project.

Continue prompting Make to build functionality using the connected project.

Add secrets

Ask Make to create a secret. Enter its value in the Create a secret box and click Create secret. Supabase stores it.

Manage Supabase

1. In Make settings, go to Integrations > Supabase.
2. Open the connected project’s menu.
3. Select Manage project, Manage organization, or Manage secrets to open Supabase.