I’m sure your thinking well if you aren’t using illustrator or Photoshop what the heck you going to use?!  Meet Adobe XD! I’ve always had the app with my creative cloud membership but didn’t fully realize its potential!

The other day I got a bit curious about the app so I sat down and googled“How to use Adobe XD”. A bunch of YouTube videos popped up so I watched a few of them and afterward I was extremely intrigued by what I saw being done in the app and the amount of time it could potentially save me when designing websites.  All I could think was “this is going to greatly improve my life!” not only could I create a full website design in Adobe XD  a few things that also intrigued me were…


Not only did it include all the design tools I needed to create beautiful web designs and layouts but I could create prototypes of my designs, generate a link and send that off to my client or developer (if I was to use one!) and they would get to see exactly how you should walk through the site.

Site wide updates

When you design in adobe illustrator or photoshop if you were to create a call to action button style and then later decide you wanted it to be a different color you would need to go through and update each CTA button throughout your design. NOT in Adobe XD!

Change one button and want it to be reflected across the entire site? It’s a simple click and all buttons no matter how many pages are in your site, are now updated! I’d don’t know about you but this is a huge time saver if you ask me. The best part? ANY part of your design can be updated like this…

Save typography styles

As you design in Adobe XD you can save typography styles (and colors) making it super easy to ensure your type styles are cohesive throughout your site.

The grid

I always wanted an easy way to have a “grid overlay” in illustrator. Well, say no more this is standard in Adobe XD simply right click and select “show layout grid” now you see the standard 960 grid which can also be edited to suit your needs and then saved!

Drag & drop photos into shapes

In Adobe illustrator when you want to show an image you have to create a shape and then use the “quick mask” tool to fill that shape in with an image. You also need to make sure you set up your image just right so your not cutting anything off and it fills the shape you created.  In Adobe XD you draw a shape and then drag an image from your desktop and drop it inside the shape you created, it will automatically fit within that shape! Obviously, you can edit and resize if you need to once it’s dropped in the shape but it’s super easy to do and takes roughly two seconds!

Easy export for development

Working with a developer? Spending hours saving out your work to send it off? Say no more! With the click of a button, you can export all of your colors and type styles as well as all the assets needed to create the website. With literally just the click of a button, your work is pretty much ready to send off for development! AND don’t forget you can send them the prototype link so they can see exactly how everything should link together! COMPLETE GAME CHANGER if you ask me! 

Okay so I’ve gone over the things that excited me the most upon first using Adobe XD and when I say I’m literally never opening Adobe illustrator or Photoshop to build a website again I mean it. Why it’s standard for website designers to use other software to build a website is beyond me when there is a much better option that makes the entire design process a lot quicker and not to mention it’s super easy to learn!

I learned the basics of Adobe XD and rebuilt THIS very site you are on within a matter of hours in Adobe XD and that was barely knowing how to use it. (Originally it was an illustrator file).

So I’m curious will you be giving Adobe XD a try?


Why I will never use adobe photoshop or illustrator to design a website again