# Design
source: https://developer.mastercard.com/transactions-service/documentation/experience-design-guide/design/index.md

Everything you need for a best-in-class consumer experience - end-to-end UX journeys, Figma design access, and theming guide to quickly plug in the product APIs and go live.

![](https://static.developer.mastercard.com/content/transactions-service/uploads/prototype.svg)

### Experience prototype {#experience-prototype}

Get a glimpse of the reference experience.

<br />

[Open prototype](https://www.figma.com/proto/d0LCM0WCAuXZUOrKuQXbCb/Transaction-Service?node-id=4018-670&viewport=425%2C510%2C0.12&t=pbVYfl1hp0VVuuV5-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=4018%3A670&page-id=1%3A2)
![](https://static.developer.mastercard.com/content/transactions-service/uploads/figma-file.svg)

### Figma file {#figma-file}

Find the end-to-end product experience for all use cases to duplicate and customize in your own environment.

<br />

[Access file](https://www.figma.com/design/hxm4FmrKnAt9LYNv9y8ubz/Transaction-Service-User-Journey?node-id=0-1&t=s43C4aLKmIdDjGLt-1)
![Figma theming guide](https://static.developer.mastercard.com/content/transactions-service/uploads/theming-guide.svg)

### Figma theming guide {#figma-theming-guide}

Apply your brand's font and colours in a few simple steps to fully customize the product experience.

<br />

[View guide](https://www.figma.com/design/hxm4FmrKnAt9LYNv9y8ubz/Transaction-Service-User-Journey?node-id=254-4508&t=s43C4aLKmIdDjGLt-1)

### UX journeys {#ux-journeys}

<br />

[Retrieve Transaction Details](https://developer.mastercard.com/transactions-service/documentation/experience-design-guide/design/retrieve-trans-details/index.md)   

<br />

Next: [Retrieve Transaction Details](https://developer.mastercard.com/transactions-service/documentation/experience-design-guide/design/retrieve-trans-details/index.md)