AWS UI kit for Adobe XD

Why Use Adobe XD For Building Architects

I created this UI kit to visualize the experience for the user and to collaborate with developers. Adobe XD recently renamed their Symbols functionality to Components adding new host features such as better responsive dragging and importing en-mass replacement information.

One of our favourite features of Adobe XD is the ability to share documents with other team members similar to how you can share🤝 a google doc. So hence, The UX Engineer👩🏼‍🎨 + Stakeholder🕵‍♂ + Cloud Architects🧙‍♂ + Developers👨🏽‍💻 can all have a look and advocate for the User & Business.

Step 1 Quick Search🔍 & Drag The Icon

Type in the icon you are searching for & just drop them

Step 2: Adding Arrows & Adjusting Them ⚖

Step 3: Quickly Add Text💬

Hold Option/Alt on Mac to clone the text & quickly write them.

Step 4: Resizing Icons👌🏽 You have to disable responsiveness to resize icons without breaking them.

Bonus🎁🎁 : Quick Start From Templates

Preset templates with just a quick search & drop. More will be added in the future & can also be contributed.

Why did we build🛠 this on Adobe XD?

If you have yet to give Adobe XD a try, you should because it is free to use. With both Adobe XD features to sync new file changes and Components feature, it allows us to ship user-centric architect diagrams to clients quickly.

Download from Github

https://github.com/ExamProCo/aws-xd-ui-kit

This article on Dev.to

AWS UI kit: Quickly Build Architectural Diagrams on Adobe XD

Comments

More from this blog

Day 5/100: Open Source AI SDKs and Frameworks for Next-Gen Agents

Day 4/100: State of Offline On-Device AI in 2025 & beyond

Day 3/100: AI SDK 6: Revolutionizing AI Application Development

Day 2/100: Revolutionizing AI Agents with A2UI and Interactions API

Day 1/100: The Future of Generative UIs: What to Expect in 2026