Figma now supports backend integration with Supabase

Supabase has introduced a new integration with Figma Make, enabling users to build fully functional web applications with AI-powered backend capabilities — all within Figma.

This integration makes it easy to:

• Maintain application state across pages or content updates
• Set up user authentication (email, Google, GitHub)
• Collect and store form data, such as feedback
• Load and save text, images, and other content
• Securely manage secrets, API keys, and tokens

Supabase handles data storage (e.g., user-generated text, images, shapes), authentication, and connections to external APIs such as OpenAI, Spotify, and LinkedIn — all with secure key management.

Users can connect Supabase either through the AI chat in Figma Make or via file settings. Existing Supabase accounts can be reused, or new projects can be created. One Supabase project can be shared across multiple Figma files.

Example Use Cases

Data Storage

• Build a task tracker with time-tracking features
• Create an image gallery with upload functionality
• Design a marketing campaign comparison tool with historical data

Secrets & API Integration

• Generate a playlist using the Spotify API
• Fetch book data from Goodreads
• Track job applications via LinkedIn

Authentication

• Create a habit tracker requiring email login
• Set up login flows with Google, GitHub, and password reset
• Develop a code snippet manager using GitHub login

Managing Projects and Secrets

All Supabase projects, organizations, and secrets are managed on the Supabase website. To access these settings from Figma, users just need to open Make settings, go to the Supabase section, and click the three-dot menu next to the connected project. From there, they can go directly to the project settings, manage the organization, or securely handle API keys and other secrets.

The Supabase integration is currently available in open beta to all Figma Make users, regardless of seat type.