|
| 1 | +--- |
| 2 | +title: 'Create a Supabase backend using Figma Make' |
| 3 | +description: 'Build functional web apps with Supabase backend directly in Figma Make, with no backend expertise required.' |
| 4 | +categories: |
| 5 | + - launch-week |
| 6 | +tags: |
| 7 | + - launch-week |
| 8 | + - figma |
| 9 | +date: '2025-07-15:00:00' |
| 10 | +toc_depth: 2 |
| 11 | +author: prashant |
| 12 | +image: launch-week-15/day-2-figma-make/og.jpg |
| 13 | +thumb: launch-week-15/day-2-figma-make/thumb.png |
| 14 | +launchweek: 15 |
| 15 | +--- |
| 16 | + |
| 17 | +With [today’s update to Figma Make](https://www.figma.com/make), you can now build **richer prototypes and fully functional web applications**, complete with real backend logic using Supabase—all without leaving Figma. |
| 18 | + |
| 19 | +This integration brings a faster, more seamless path from idea to reality. With AI-powered prompts and built-in Supabase support, Figma Make automatically suggests adding a backend when your prompt calls for it, so you don’t even need to ask. You can add auth, databases, or file uploads exactly when you need them, without handoffs, context-switching, or backend expertise. |
| 20 | + |
| 21 | +Mock data becomes a real Postgres database. Placeholder flows become working auth, storage, and real user data—all powered by Supabase. Here’s what’s possible inside Figma Make with Supabase: |
| 22 | + |
| 23 | +## Store structured data with Supabase |
| 24 | + |
| 25 | +Supabase brings a production-grade Postgres database to your Figma Makes. It’s perfect for anything from a journaling app to a CRM. You get structured tables, relational logic, and a secure API to query your data. |
| 26 | + |
| 27 | +**Figma Make prompt example:** |
| 28 | + |
| 29 | +``` |
| 30 | +Create an internal CRM where sales reps can log new leads, track status updates, and filter leads by region or priority. Each lead record should be editable and tied to a specific account manager. |
| 31 | +``` |
| 32 | + |
| 33 | +## Add authentication to your Figma Make apps |
| 34 | + |
| 35 | +Secure sign-in is just a prompt away. Ask Figma Make to “add Supabase Auth” and it will wire up email/password, magic links, or social logins like GitHub and Google. Supabase automatically scopes data so users only access what they should. |
| 36 | + |
| 37 | +**Figma Make prompt example:** |
| 38 | + |
| 39 | +``` |
| 40 | +Build a customer portal where users can create accounts, sign in with Google or email/password, and view their order history. Ensure each customer can only see their own data. |
| 41 | +``` |
| 42 | + |
| 43 | +## Upload and manage files |
| 44 | + |
| 45 | +Let users upload images, PDFs, or any file type directly in your Figma Make project. Supabase Storage securely stores each file and lets you control who can access it. |
| 46 | + |
| 47 | +**Figma Make prompt example:** |
| 48 | + |
| 49 | +``` |
| 50 | +Build a content submission platform where users can upload images, pitch decks, or PDFs. Display uploaded files in a user’s profile, and restrict access to their own files only. |
| 51 | +``` |
| 52 | + |
| 53 | +## Bring in data from anywhere |
| 54 | + |
| 55 | +With Supabase, your Make prototypes or apps aren't limited to a single data source—you can easily pull in live data, connect to APIs, and add AI-powered features. |
| 56 | + |
| 57 | +- **Edge Functions** let you run backend logic close to your users. Think of them like lightweight serverless functions that can fetch data, transform it, and return just what your Make needs. |
| 58 | +- **Foreign Data Wrappers** allow you to query external databases and APIs as if they were part of your own Supabase project. That means you can pull in live data from internal systems, spreadsheets, or external APIs, without syncing or duplicating data. |
| 59 | +- **Vector embeddings** enable AI-powered features like semantic search and recommendations by letting you store and search high-dimensional data (like text or images) using natural language. Ideal for building smarter search bars, content discovery, or personalization. |
| 60 | + |
| 61 | +## Get started with Figma Make |
| 62 | + |
| 63 | +Figma Make already made it easier to go from concept to interactive experience. Now, with Supabase, you can go even further—building fully functional web apps powered by a production-grade backend. |
| 64 | + |
| 65 | +[Bring your ideas to life today with Figma Make and Supabase.](https://www.figma.com/make/) |
| 66 | + |
| 67 | +# Social Posts |
| 68 | + |
| 69 | +**Twitter** |
| 70 | + |
| 71 | +Supabase 🤝 @/figma |
| 72 | + |
| 73 | +Add auth, database, and storage to your Figma Makes with a single prompt. |
| 74 | +Go from idea to reality — no backend expertise needed. |
| 75 | + |
| 76 | +**LinkedIn** |
| 77 | + |
| 78 | +Figma Make now supports Supabase so you can build real, functional apps without ever leaving Figma. Add auth, database, storage, and connect to external data sources in seconds. |
| 79 | + |
| 80 | +From idea to reality, all with a prompt. Try it today. |
0 commit comments