What are Figma email signature templates?
Figma email signature templates are pre-built signature layouts designed in Figma and ready to export as production-ready HTML. Instead of coding an email signature by hand — or using a limited online generator — you design directly in Figma and export clean, table-based HTML in one click using the Marka Email Generator plugin.
The result renders correctly in Gmail, Outlook (including legacy desktop versions), Apple Mail, and all major email clients. No coding required.
What's included
Professional signature layouts Covers the most common use cases: individual professional signatures, team-standard signatures, and company-wide branded signatures with social links, logo, and legal disclaimer.
Figma components for fast customization Every element — name, title, phone, email, website, logo, social icons — is a separate Figma component. Swap your details in minutes without touching HTML.
Gmail and Outlook compatible HTML The exported HTML uses table-based layouts and inline CSS — the only approach that renders reliably in Outlook 2007 through Microsoft 365 and Gmail's strict email client environment.
Dark mode support Signatures adapt to light and dark mode in Apple Mail and Gmail mobile without extra configuration.
How to use these Figma email signature templates
- Duplicate the Figma file and open it in your Figma account
- Replace placeholder text (name, title, phone, email) with your own details
- Swap the logo with your own brand logo
- Adjust colors to match your brand guidelines using Figma variables
- Open the Marka Email Generator plugin, select the signature frame, and click Export HTML
- Copy the exported HTML and paste it into your email client's signature settings
Adding to Gmail
Go to Settings → See all settings → Signature → Create new and paste the HTML into the signature editor.
Adding to Outlook
Go to File → Options → Mail → Signatures, create a new signature, switch to the HTML editor, and paste the code.
Why use Figma for email signature templates?
Most email signature generators give you fixed templates with limited customization — adjust a font color and that's it. Figma gives you full design control:
- Change any element: layout, typography, logo size, icon colors, spacing, dividers
- Create team-standard components so every team member uses the same base layout
- Update once and re-export — no per-seat subscription required
- The Marka plugin handles all email-client compatibility automatically
Frequently asked questions
Do these templates work in Gmail and Outlook at the same time? Yes. The exported HTML is tested across Gmail (web and mobile), Outlook 2010–2365, Apple Mail, and Yahoo Mail. Table-based layouts are used throughout to avoid rendering differences between clients.
Can I create a team signature with these templates? Yes. Customize the shared elements in Figma (logo, colors, disclaimer text), then export individual signatures per team member by swapping the name/title/contact details in each Figma component.
Can I add social media icons? Yes. Social icon components (LinkedIn, Twitter/X, Instagram, YouTube, GitHub) are included. Swap or remove any icon directly in Figma before exporting.
How do I keep the signature consistent across our whole company? Use Figma variables for brand colors and a shared Figma component library. Each team member can pull the master signature component, enter their details, and export their own HTML — all from the same source of truth.
Will images in the signature break in email clients? Marka automatically uploads signature images to a CDN and embeds the URLs in the exported HTML. Images load reliably in all email clients, including Outlook, without requiring the recipient to manually download them.
