The latest articles on DEV Community by Karan Balaji 🇨🇦 (@karanbalaji). https://dev.to/karanbalaji https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F156154%2Fce150b0d-920e-4bfa-8811-5f283f160e1b.jpeg https://dev.to/karanbalaji en Karan Balaji 🇨🇦 Mon, 20 May 2019 16:32:43 +0000 https://dev.to/exampro/aws-free-ui-kit-on-adobe-xd-496h https://dev.to/exampro/aws-free-ui-kit-on-adobe-xd-496h <h2> What I do ? </h2> <p>I'm a UX Engineer at ExamPro. My Background is in 📊 Business Marketing specializing in Customer Experience Design (CXD). To gain further perceptive on the customer experience, I decided this last year to pick up 👨🏽‍💻 programming skills both in Full Stack and Cloud Computing. </p> <p>I am also an avid gamer 🎮 over the last 20 years, which I like to think contributes to knowledge of customer experience. 😋</p> <h2> Why Use Adobe XD For Building Architects </h2> <p>Adobe XD recently renamed their Symbols functionality to Components adding a new host features such as better responsive dragging and importing en-mass replacement information. </p> <p>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 &amp; Business. </p> <h2> Why did we build🛠 this on Adobe XD ? </h2> <p>If you have yet to give Adobe XD a try, you should because it is free to use.</p> <p>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.</p> <h3> Step 1 : Quick Search🔍 &amp; Drag The Icon </h3> <p>Type in the icon your searching for &amp; just drop them<br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4vp4blxu0wahrp7dw4kx.gif" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4vp4blxu0wahrp7dw4kx.gif"></a></p> <h3> Step 2 : Adding Arrows &amp; Adjusting Them ⚖ </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fccd0suwya7ve3qhq46jf.gif" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fccd0suwya7ve3qhq46jf.gif"></a></p> <h3> Step 3 : Quickly Add Text💬 </h3> <p>Hold Option/Alt on Mac to clone the text &amp; quickly write them.<br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3ejrtral1i5p7l4mk2qz.gif" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3ejrtral1i5p7l4mk2qz.gif"></a></p> <h3> Step 4 : Resizing Icons👌🏽 </h3> <p>You have to disable responsiveness to resize icons without breaking them.<br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgtybtgom64ojwwzq20vs.gif" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgtybtgom64ojwwzq20vs.gif"></a></p> <h3> Bonus🎁🎁 : Quick Start From Templates </h3> <p>Preset serverless templates with just quick search &amp; drop. More will be added in the future &amp; can also be contributed.<br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdoz4rpc6utzf4ef3pvwc.gif" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdoz4rpc6utzf4ef3pvwc.gif"></a></p> <h3> What's Upcoming💡 &amp; Where to contact me quickly 📞📞 ? </h3> <p>My future post will be building a A/b testing infrastructure on AWS. Add me on<a href="https://www.linkedin.com/in/karanbalaji/" rel="noopener noreferrer">Karan Balaji's LinkedIn</a></p> <p>Download from </p> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/ExamProCo" rel="noopener noreferrer"> ExamProCo </a> / <a href="https://github.com/ExamProCo/aws-xd-ui-kit" rel="noopener noreferrer"> aws-xd-ui-kit </a> </h2> <h3> This is a Adobe XD UI Kit for creating AWS architectural diagrams. </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <div class="markdown-heading"> <h2 class="heading-element">Why Use Adobe XD For Building Architects</h2> </div> <p>Adobe XD recently renamed their Symbols functionality to Components adding a new host features such as better responsive dragging and importing en-mass replacement information.</p> <p>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 &amp; Business.</p> <div class="markdown-heading"> <h2 class="heading-element">Why did we build🛠 this on Adobe XD ?</h2> </div> <p>If you have yet to give Adobe XD a try, you should because it is free to use.</p> <p>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.</p> <div class="markdown-heading"> <h3 class="heading-element">Step 1 : Quick Search🔍 &amp; Drag The Icon</h3> </div> <p>Type in the icon your searching for &amp; just…</p> </div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/ExamProCo/aws-xd-ui-kit" rel="noopener noreferrer">View on GitHub</a></div> </div> aws tutorial productivity webdev