+
Connect Figma to Supabase
Automate Figma and Supabase with AI
App UI in Figma and live data in Supabase should describe the same screens your team ships. OpenClaw on Operator links design frames to Supabase table names in your spec doc, opens tasks when a schema change affects a component, and can pull sample row values into a Figma description for realistic mocks. Ask which tables a checkout frame touches and it reads Supabase and returns the mapping.
It reaches both apps directly or through connectors like Composio MCP and Pipedream MCP, which handle the sign in and token refresh, so there is no Zap to build and no API keys to paste.
What your agent can do with Figma and Supabase
What your agent does in Figma
Add a comment to a file
Posts a new comment to a Figma file or branch, optionally replying to an existing root comment (replies cannot be nested); `region_height` and `region_width` in `client_meta` must be positive if defining a comment region.
Add a reaction to a comment
Posts a specified emoji reaction to an existing comment in a Figma file or branch, requiring valid file_key and comment_id.
Create a webhook
Creates a Figma webhook to receive POST notifications when specific events occur. Webhooks can monitor events at three scopes: - Team level: monitors all files in a team (requires team admin permissions) - Project level: monitors all fil...
Create dev resources
Creates and attaches multiple uniquely-URLed development resources to specified Figma nodes, up to 10 per node.
Create, modify, or delete variables
Manages variables, collections, modes, and their values in a Figma file via batch create/update/delete operations; use temporary IDs to link new related items in one request and ensure `variableModeValues` match the target variable's `re...
Delete a comment
Deletes a specific comment from a Figma file or branch, provided the authenticated user is the original author of the comment.
What your agent does in Supabase
Create project api key
Creates a 'publishable' or 'secret' API key for an existing Supabase project, optionally with a description; 'secret' keys can have customized JWT templates.
Delete an API key from the project
Permanently deletes a specific API key (identified by `id`) from a Supabase project (identified by `ref`), revoking its access.
Delete third party auth config
Removes a third-party authentication provider (e.g., Google, GitHub) from a Supabase project's configuration; this immediately prevents users from logging in via that method.
Get a third-party integration
Retrieves the detailed configuration for a specific third-party authentication (TPA) provider, identified by `tpa_id`, within an existing Supabase project specified by `ref`.
List third-party auth integrations for project
Lists all configured third-party authentication provider integrations for an existing Supabase project (using its `ref`), suitable for read-only auditing or verifying current authentication settings.
Update an API key for the project
Updates an existing Supabase project API key's `description` and/or `secret_jwt_template` (which defines its `role`); does not regenerate the key string.
How it works
Tell the agent what you want to happen between Figma and Supabase, for example to watch one and act in the other, or to keep the two in step. It reads what it needs from Figma, works out what to do, and runs the matching action in Supabase without you mapping a single field.
You can have it run once, on a schedule, or whenever something changes. Ask it for a status any time and it reads the latest from both apps back to you in the same chat.
Common questions about Figma and Supabase
- How do I connect Figma and Supabase to Operator?
- You authorize Figma and Supabase once each from your Operator dashboard. Operator holds both connections and refreshes the access tokens for you, so your agent keeps working across them without you signing in again.
- What can my agent do across Figma and Supabase?
- You describe the outcome in plain language and your agent works between the two, reading from one and acting in the other. It picks the right Figma and Supabase actions on its own, so you do not map fields or pick triggers.
- Can my agent keep Figma and Supabase in sync?
- Yes. It can watch Figma and act in Supabase, or keep both in step, reading from one and running the matching update in the other. This runs on demand when you ask or on a schedule you set.
- Do I need to build a workflow or write code?
- No. There is no workflow to build, no fields to map, and no API keys to paste. Operator manages both connections, and you give the agent instructions in plain language.
Figma and Supabase integrations
Put your agent on Figma and Supabase
Sign in, connect both apps, and hand your agent the work. The same setup reaches every app in the catalog. Your first week is free.
Try for free