Export to Supabase

Design in Figma, export with Sendra, paste into Supabase as the body of a sign-up, magic link or password reset email. Supabase fills in the link for each person it writes to.

Before you start

• A free Supabase project created after 3 June 2026 can edit its email templates only once it sends through your own email provider (Supabase calls it custom SMTP). Set that up first under Authentication, then Emails, on the SMTP Settings tab.
• Put your images online: turn on Host images online in Sendra, or use your own image URLs. Supabase keeps only the HTML, so every image needs an address.
• Set your preview text in Properties. It travels in the file.
• Supabase has one email for each step of signing in: Confirm sign up, Invite user, Magic link or OTP, Change email address, Reset password and Reauthentication. Each has its own body, so export one design for each email you want to replace.

What Supabase needs in every email

Every email carries the tag that becomes the link for its step. Type the link text, such as “Confirm your email”, select it, and put this in its Link field: {{ .ConfirmationURL }}. Give the link its own text layer, since Figma’s link box will not accept a tag. For an email that shows a code instead of a link, put {{ .Token }} in a text layer where the code should appear.

Use only Supabase’s tags in a Supabase email. Supabase reads the whole body as a template, and a tag from another platform, such as {{ first_name }}, makes Supabase ignore your design and send its previous or default email instead.

Note: type the tags exactly as shown, with the dot and the spaces inside the braces. See Merge tags for how Sendra treats them.

Tags you will use most

What it does	Tag	Where
The link for this step	{{ .ConfirmationURL }}	Link
The one-time code	{{ .Token }}	text
The account’s email address	{{ .Email }}	text
The new address, in Change email address	{{ .NewEmail }}	text
Your site	{{ .SiteURL }}	Link

Anything saved with the account, such as a first name, comes from {{ .Data }} followed by the field’s name: {{ .Data.first_name }}.

Outlook

Supabase removes the parts of the HTML that only Outlook on Windows reads. Every other email app shows the email as designed. In Outlook on Windows the email runs the full width of the window, and some of the spacing between sections is tighter.

If your developers send with Supabase’s Send Email hook instead, Supabase hands the hook the details and sends nothing itself, so the HTML your code sends arrives as exported, Outlook parts included.

Paste it in

1. In Sendra, click Copy HTML.
2. In Supabase, open Authentication, then Emails, and choose the template on the Templates tab.
3. Give the email a subject, paste the HTML into the message body, and save.

Check it

Sign up at your own site with an address you can read, and compare the email with the test you sent from Sendra. They should match, apart from the link or the code, which Supabase fills in.

Changing it later

Keep Figma as the source: change the design, export again, and paste again.