The problem
XD’s developer handoff lived in “Share for Development” links, made by the designer from inside XD. If you’ve been handed the .xd file instead, or the share link has expired, you need another way to read the specs: the exact colours, fonts and sizes, and the words on every screen.
Inspect any layer
Open the file here and click an artboard. In the artboard view, click any element, or pick it in the layers panel, and the inspector shows:
- Position and size on the artboard (X, Y, width, height), rotation and opacity.
- Fill and border: hex colours with opacity, gradients with their stops, border width, alignment and dashes, and corner radii.
- Effects: drop shadows (offset, blur, colour) and blurs.
- Type: font family, style and weight, size, line height, letter spacing and alignment, with mixed styles listed run by run, and the text itself, ready to copy.
Click any colour, font name or value to copy it.
The whole design system
The Specs tab shows the document’s named colours, every colour actually used (and how often), the character styles saved in the document, every text style in use with an example, and the fonts, with a note on which are open source and which aren’t.
The handoff sheet
With the one-time £9 unlock, one click saves a ZIP with:
- colours.csv: every colour as hex, RGBA and HSL, what it is used for, how often and on which artboards, with its document name if it has one;
- character-styles.csv and text-styles-in-use.csv: font, weight, size, line height, letter spacing and colour;
- text.csv and one .txt per artboard: every text layer with its position, in reading order, ready for copy review or translation;
- fonts.txt and tokens.json: the fonts, and colours and type as design tokens for your code.
Spreadsheet cells that start with =, +, - or @ are protected so a design can’t smuggle a formula into Excel.
Limits
XD’s responsive resize rules, Stacks and Padding aren’t shown yet, and positions are measured from the drawn shapes, so they can differ by a pixel from XD’s own panel for rotated or curved elements. For pixel-perfect work, check the PNG export at 2x against your build.