Before diving into the steps, there is something every Adobe XD user should know in 2026: Adobe officially discontinued Adobe XD in July 2023. The app no longer receives updates, new features, or active development. Adobe has redirected its UX/UI design focus toward Figma (which Adobe acquired) and Adobe Express for design tasks.
If you are currently using Adobe XD, it still works on existing installations — but it is not available as a new purchase or download. If you are looking for an alternative that is actively maintained and supported, see the Best Adobe XD Alternatives section at the end of this guide.
This article covers everything you need to know about making transparent backgrounds in Adobe XD for existing users — all the methods still work in the installed version of the app.
Introduction
A transparent background is one of the most essential elements in professional UI/UX design, logo creation, and digital asset production. In Adobe XD, achieving a transparent background depends on what you are trying to do — whether you want a transparent canvas background, a transparent shape or element, an image with its background removed, or an exported file with transparency preserved.
Each scenario requires a different approach, and XD handles them in slightly different ways. This guide covers every method clearly and step by step, so you know exactly which approach to use for your specific situation.
Understanding Transparency in Adobe XD
Adobe XD handles transparency in three distinct ways, and understanding the difference helps you get to the right solution faster:
1. Canvas/Artboard Background Transparency The artboard background is the white (or coloured) surface your design sits on. Making this transparent means the background of your exported image shows no colour — it shows a checkered pattern in the editor (indicating transparency) and exports with a transparent background.
2. Shape or Element Transparency Any individual element — a rectangle, button, icon container, or UI component — can have its fill removed entirely (making it transparent) or have its opacity reduced (making it semi-transparent).
3. Image Background Removal If you have placed a raster image (photo, JPG, PNG with a white background) into your XD document, you cannot remove the background from within XD itself — XD does not have background removal tools. This must be done in Photoshop or another image editor before importing, or using Adobe Express after export.
Method 1: Make Your Artboard Background Transparent
This is the most commonly needed transparency setting — making the artboard background transparent so that your exported design has no background colour.
Step 1: Open your project in Adobe XD.
Step 2: In the Layers panel on the left side (or in the canvas), click on your artboard name to select the artboard itself — not a specific element on it.
Step 3: With the artboard selected, look at the Property Inspector panel on the right side of the screen. You will see an option labelled Fill with a colour swatch next to it.
Step 4: Click the Fill colour swatch to open the colour picker.
Step 5: In the colour picker, locate the Opacity or Alpha slider — it is usually the bottom slider, labelled A (for Alpha) or shown as a percentage. Drag this slider all the way to 0% (zero).
Step 6: Alternatively, if there is a checkbox or toggle next to the Fill option, simply uncheck or disable the Fill entirely by clicking the checkbox. This removes the fill colour completely, making the artboard background transparent.
Step 7: You will see your artboard background change to a checkered grey and white pattern — this is the standard indicator of transparency in design software.
Step 8: To preserve the transparency when exporting, see the Exporting With Transparent Background section below.
Method 2: Make a Shape or Element Transparent
If you want to make a specific shape, button, card, or UI element transparent (no fill), here is how:
Step 1: Click on the element you want to make transparent to select it.
Step 2: Look at the Property Inspector on the right. Under the Fill section, you will see a colour swatch.
Step 3: Option A — Remove the fill entirely: Click the checkbox or toggle next to Fill to uncheck it. The fill colour is completely removed and the shape becomes fully transparent (you can see through it to whatever is behind).
Step 4: Option B — Reduce opacity for semi-transparency: Use the Opacity slider at the top right of the Property Inspector (usually shown as a percentage — 100%, 80%, 50%, etc.) to reduce the element’s overall opacity. This makes the entire element semi-transparent, including any borders or effects applied to it.
Step 5: For components or grouped elements: If the element is a group or component, double-click to enter the group, then select the specific background rectangle or fill layer inside it, and uncheck its Fill as described above.
Tip from Adobe Community: Double-click on the button, then over on the right uncheck the Fill option. That should make the button transparent. This is especially relevant for UI Kit components where the background appears opaque even though the outer element looks styled.
Method 3: Set Element Opacity to Zero
For situations where you need an element to be invisible but still present in the layer structure (for example, as a placeholder or interaction trigger), you can set its opacity to 0% rather than removing its fill:
Step 1: Select the element.
Step 2: In the Property Inspector, find the Opacity field (displayed as a percentage at the top of the panel, separate from the fill opacity).
Step 3: Change the value to 0.
The element is now invisible but still exists in the layers and can still receive interactions in prototypes.
Method 4: Make a Transparent Overlay or Glass Effect
A common UI design technique is creating a semi-transparent overlay — used for modals, cards, frosted glass effects, and overlaid panels.
Step 1: Draw a Rectangle over the area where you want the overlay.
Step 2: Set the Fill colour to your desired colour (white for a light overlay, dark grey or black for a dimming effect).
Step 3: Reduce the Fill opacity — click the colour swatch → find the Alpha (A) slider → drag it to your desired transparency level. Common values:
- 80% — light overlay, content mostly visible
- 50% — medium overlay
- 20% — subtle tint effect
Step 4: Optionally, apply a Blur effect from the Property Inspector to create a frosted glass look:
- Click Effects → enable Background Blur
- Adjust the blur amount to taste (8–20 is typical for a frosted glass effect)
This technique is widely used for modal backgrounds, navigation drawer overlays, and glass-morphism UI cards.
Method 5: Import Images With Transparent Backgrounds
If you need a transparent image (logo on transparent, icon on transparent, PNG sticker) in your XD document, the transparency must exist in the image file before you import it into XD.
Images need to be PNG files for transparency. This is something you need to set up before bringing the images into XD as XD will only alter the appearance of the whole image through the Opacity slider.
Supported formats for transparency in XD:
- PNG — fully supports transparency (alpha channel)
- SVG — fully supports transparency
- GIF — supports single-colour transparency (limited)
- JPG/JPEG — does NOT support transparency (always has a solid background)
To bring in a transparent image:
Step 1: Make sure your image is saved as a PNG or SVG file with a transparent background. If your image has a white background, you need to remove it in Photoshop, Adobe Express, or another editor first.
Step 2: In Adobe XD, drag and drop your PNG or SVG file directly onto the canvas, or go to File → Import and select your file.
Step 3: The transparent areas of your image will remain transparent inside XD, showing whatever is behind them on the canvas.
If your image has a white background that needs removing: XD cannot remove image backgrounds. Use one of these tools first:
- Adobe Express (free) — upload image → click Remove Background
- Adobe Photoshop → use Select Subject + Delete Background
- Remove.bg (free online tool) — instant background removal Then save as PNG and import into XD.
Method 6: Export Your XD Design With a Transparent Background
Creating a transparent background in XD is only half the process — you also need to export it correctly so the transparency is preserved in the output file.
Step 1: Make sure your artboard background is transparent (checkered pattern visible, as described in Method 1).
Step 2: Select the artboard or elements you want to export. You can select specific elements or the entire artboard.
Step 3: Go to File → Export (or press Ctrl + E on Windows / Cmd + E on Mac).
Step 4: In the export dialog, choose PNG as your file format. PNG is the only common raster format that preserves transparency.
Do NOT export as JPG — JPG does not support transparency and will replace your transparent background with white.
Step 5: Set your desired scale (1x for standard resolution, 2x for retina/high-DPI displays).
Step 6: Click Export and save to your desired location.
Your exported PNG file will have a transparent background — verifiable by the checkered pattern visible when you open it in most image viewers or design tools.
For SVG export (vectors): SVG files inherently support transparency. Export as SVG if you are working with vector shapes and need a scalable, transparent-background file.
Method 7: Using the Opacity Slider for Layer-Level Transparency
Every element in Adobe XD has an Opacity slider in the Property Inspector that controls the transparency of the entire layer — including its fill, stroke, and any applied effects.
How to use it:
Step 1: Select any element in your canvas.
Step 2: Look at the top of the Property Inspector panel on the right — you will see an Opacity field showing a percentage (default is 100%).
Step 3: Click the percentage value and type a new number, or hover over it and scroll to adjust. Common values:
- 100% — fully opaque (no transparency)
- 75% — 25% transparent
- 50% — half transparent
- 25% — mostly transparent
- 0% — fully transparent (invisible)
This controls the transparency of the entire layer as a unit. It is different from fill opacity, which only affects the fill colour while leaving strokes and effects at full opacity.
Best Adobe XD Alternatives in 2026
Since Adobe XD was discontinued in July 2023, if you are starting a new project or looking for an actively maintained design tool, consider these alternatives:
Figma (Free Plan Available)
Figma is now the industry standard for UI/UX design and prototyping — and ironically, it is the tool Adobe itself invested in. It offers real-time collaboration, a generous free tier, and a feature set that exceeds what XD offered. Making transparent backgrounds in Figma is done through the Fill panel → click the colour swatch → set Alpha to 0.
Best for: UI/UX designers, product teams, collaborative design work
Adobe Express (Free)
Adobe Express handles transparent backgrounds natively — particularly for marketing assets, social media graphics, and logo creation.To download an image with a transparent background in Adobe Express, click outside the canvas, then select Background in the left panel and select No fill. When downloading the file, make sure to choose Transparent PNG as the file format.
Best for: Marketing graphics, social media assets, quick transparent PNG exports
Adobe Illustrator
For vector-based design work — logos, icons, illustrations — Illustrator remains Adobe’s premium vector tool and handles transparency with far more control than XD ever did.
Best for: Logos, icons, brand assets, print design
Canva Pro
Canva’s Pro plan includes a Background Remover tool and the ability to export transparent PNG files. It is the most accessible option for non-designers.
Best for: Non-designers, social media content, quick marketing assets
Troubleshooting Common Transparency Issues in Adobe XD
My exported PNG still has a white background
This means the artboard fill was not removed before exporting. Go back to XD → select the artboard → uncheck the Fill (or set Alpha to 0) → re-export as PNG.
I can see through the element in XD but it exports as opaque
Make sure you are exporting the correct artboard or element. If you are exporting the entire artboard and the artboard itself has a white fill, that white fill will be included in the export even if the elements on top are transparent. Remove the artboard’s fill before exporting.
My PNG image has a white box around it after importing to XD
This means the image was saved as a JPG (which does not support transparency) rather than PNG. Open the original image in Photoshop or Adobe Express, remove the white background, and re-save as PNG before importing into XD.
The transparency looks correct in XD but prints with a white background
PDF exports from XD may not preserve transparency depending on the PDF settings. For print with transparency, export as a high-resolution transparent PNG and handle transparency in your print layout software (InDesign, Illustrator).
I cannot set the artboard fill to transparent — the option is greyed out
Make sure you have clicked on the artboard itself (click the artboard name in the Layers panel) rather than an element on the artboard. Artboard fill options only appear when the artboard is selected, not an element on it.
Frequently Asked Questions
Can Adobe XD export transparent backgrounds?
Yes. Export your design as a PNG file (not JPG) after setting your artboard fill to 0% opacity or removing the fill entirely. PNG is the only raster format that preserves transparency.
How do I make a shape transparent in Adobe XD?
Select the shape → in the Property Inspector on the right → uncheck the Fill checkbox to remove the fill entirely, making the shape transparent. Alternatively, click the fill colour swatch → reduce the Alpha (A) slider to 0%.
Can I remove an image background in Adobe XD?
No. XD will only alter the appearance of the whole image through the Opacity slider — it cannot remove backgrounds from photos or raster images. Remove the background in Adobe Express, Photoshop, or Remove.bg first, then import the transparent PNG into XD.
What file format preserves transparency when exporting from XD?
PNG and SVG both preserve transparency. JPG does not — it replaces transparent areas with white. Always choose PNG when exporting designs with transparent backgrounds from Adobe XD.
Is Adobe XD still available in 2026?
Adobe XD was discontinued in July 2023 and is no longer actively developed or sold. It still works on existing installations but does not receive updates. Adobe recommends transitioning to Figma or Adobe Express for new projects.
How do I create a frosted glass effect in Adobe XD?
Draw a rectangle → set a semi-transparent fill (white or light grey at 20–40% opacity) → apply Background Blur from the Effects panel → adjust blur amount. This creates a frosted glass appearance over whatever is behind the element.
How do I reduce the opacity of an element in Adobe XD?
Select the element → in the Property Inspector → find the Opacity percentage field at the top → change it to your desired value (0% = fully transparent, 100% = fully opaque).
What is the difference between Fill opacity and Layer opacity in XD?
Fill opacity only affects the fill colour of the element, leaving strokes, borders, and effects at full opacity. Layer opacity (the main opacity slider) affects the entire element including all its properties — fill, stroke, shadow, and effects.
Can I use XD files in Figma?
Figma does not have a native XD file importer. Third-party plugins exist for converting XD files to Figma, with varying results. For complex projects, recreating designs in Figma from scratch typically produces cleaner results than automated conversion.
