Gmail UI Kit – Adobe XD
Last Updated on July 20, 2026 by Editorial Team
Gmail Inbox and Compose screens recreated! A fun way to use, easy to edit, and fully customizable Gmail UI kit created with Adobe XD.
Designed by Edwin Delgado.
What makes this Gmail UI kit worth grabbing is how faithfully it reconstructs the interface people already know by heart. The top navigation bar, the red Compose button, the left sidebar with Inbox, Starred, Important, Sent Mail and Drafts, the subject line and sender row, the reply and forward links at the bottom: every element is placed exactly where your eye expects it in the real product.
That familiarity is the whole point. When you are mocking up an email notification, a marketing screenshot, or a product demo that involves sending or receiving mail, using a recognizable Gmail layout instantly grounds the scene for viewers without any extra explanation.
The color palette sticks close to Google’s own branding. You get the blue gradient header, the multicolor Google wordmark, the red accent on Compose and the Gmail icon, and a clean white and light-gray content area that keeps the focus on whatever message content you drop in.
It reads as a light, functional, almost neutral UI style, which is exactly what you want from a kit meant to be edited rather than admired on its own.
Because this is an Adobe XD file, everything is built from vector shapes and text layers that behave like normal editable objects rather than a flattened screenshot.
- Swap the “Subject like goes here” placeholder for your own subject line.
- Replace the sender name and email address with a real or fictional contact.
- Drop your own avatar into the profile circles in the header and message thread.
- Edit the email body area to show a promotional message, a receipt, a notification, or a conversation thread.
- Adjust the date, the reply text, or the sidebar labels if your scenario calls for a different folder or state.
Because the layout mirrors the real Gmail interface so closely, you can rearrange or hide elements like the sidebar or the search bar if your composition only needs the message pane.
Where This Gmail Layout Comes In Handy
This kit is built for anyone who needs to show an email inside a believable inbox rather than as a floating text box.
It works well for SaaS and app landing pages that promise “email notifications” or “automated follow-ups” and want to visualize that promise convincingly.
It also suits marketing decks, case studies, and portfolio pieces where a founder or agency wants to demonstrate an email campaign, a transactional message, or a customer support reply exactly as the recipient would see it.
Product designers working on email-related features, like notification settings, inbox integrations, or Gmail add-ons, can use it as a realistic base for wireframes and presentation screens.
Educators and tutorial creators benefit too, since walking through “how to write a professional email” or “how to spot a phishing message” lands better against a recognizable inbox than a generic template.
To make the mockup feel native to your own project, pair it with a browser chrome frame or a MacBook or desktop mockup so the Gmail window sits inside a realistic screen.
If you are illustrating a notification or alert flow, combine it with a phone mockup showing the same message as a push notification, which helps tell a coherent cross-device story in a single presentation.
