AWS UI kit: Quickly Build Architectural Diagrams on Adobe XD

AWS UI kit: Quickly Build Architectural Diagrams on 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 gif-1.gif

Step 2: Adding Arrows & Adjusting Them ⚖


Step 3: Quickly Add Text💬

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

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

Bonus🎁🎁 : Quick Start From Templates

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

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

This article on

Did you find this article valuable?

Support Karan Balaji by becoming a sponsor. Any amount is appreciated!