# Adobe XD resources We will be using [Adobe XD](https://www.adobe.com/products/xd.html) (Experience Design) for creating website mockups and web design ideas. Compared to coding html and css from scratch, Adobe XD is a more visual approach to design. The software space is filled with plenty of other options for creating design mockups for UI (User Interface) and UX (User Experience). Some systems are simple, while others are really complex. Some systems are expensive, however most have a free-tier or a free trial. ## software A bit of recent history: Adobe tried to buy the XD competitor Figma but the deal fell through. Figma remains the industry standard and Adobe has basically abandoned XD. It is still fairly functional for learning the basics of building interactive mockups. I’m leaving this page active while I’m still teaching the tool in my college web design class and while XD is still available as a tool. ### alternatives - [penpot](https://penpot.app/): online and pretty good for a free open-source alternative - [figma](https://www.figma.com/): professional level, but complex and limited for free option - [sketch](https://www.sketch.com/): professional level, expensive, for mac only - [lunacy](https://icons8.com/lunacy): cross-platform free alternative to sketch - [wondershare mockitt](https://mockitt.wondershare.com/): pretty good with limited for free option - photoshop or illustrator: good for static layouts but no interactivity --- ## tutorials I'm finding that there are plenty of tutorials out there. Adobe XD is fairly new and is frequently updated. Most of the tutorials are good, but things do change often. For example, older tutorials talk about symbols and newer tutorials talk about components. They are the same thing. You may find others as you explore. - [get started from adobe help](https://helpx.adobe.com/xd/get-started.html) - [adobe xd learn and support from adobe](https://helpx.adobe.com/support/xd.html) - [xd guru](https://www.xdguru.com/adobe-xd-guide/): an entire set dedicated to learning XD (make this your first stop) - [a to z of adobe xd from tuts plus](https://webdesign.tutsplus.com/articles/a-to-z-of-adobe-xd-tips-tricks--cms-36820): terminology and tools - [intro from mockplus](https://www.mockplus.com/blog/post/adobe-xd-tutorial): good intro with more resources at the bottom - [vandelay list of tutorials](https://www.vandelaydesign.com/free-adobe-xd-tutorials/): a variety of specific tutorials - [design shack tutorials](https://designshack.net/articles/software/adobe-xd-tutorials/): a variety of specific tutorials - [XDfile tutorials](https://xdfile.com/category/adobe-xd-tuts/): solid set of tutorials - [linkedin learning deep dive](https://www.lynda.com/Adobe-XD-tutorials/Welcome/5022353/3509042-4.html): really good, but you will need a subscription --- ## resources a few sites dedicated to free and premium downloadable content. - [modular from adobe](https://modular.adobe.com/) : free plugins for presentations, mockups, whiteboards - [free UI kits from mockplus](https://www.mockplus.com/blog/post/adobe-xd-ui-kit) - [UI kits from adobe](https://www.adobe.com/products/xd/features/ui-kits.html) - [free XD kits from inkyy](https://www.inkyy.com/category/free-adobe-xd-kits/) - [free XD wireframe kits from mockitt](https://mockitt.wondershare.com/adobe-xd/adobe-xd-wireframe-kit.html) - [XD UI kits from xdfile](https://xdfile.com/category/adobe-xd-uikits/) - [mockplus](https://www.mockplus.com/blog/post/adobe-xd-ui-kit) - [xd guru](https://www.xdguru.com/) - [adobe xd elements](https://adobexdelements.com/) - [xd resources](https://xdresources.co/) ### individual xd kits These are some the many downloadable XD mockup and UI kits you can find on [Behance](https://www.behance.net/search?tools=596340077). - [Explord](https://www.behance.net/gallery/64228123/Explord-FREE-UI-Kit-for-Adobe-XD) - [Collector Wireframe Kit](https://www.behance.net/gallery/58845807/Collector-Wireframe-Web-Kit-%28Adobe-XD%29) - [Wireflows](https://www.behance.net/gallery/51863763/Adobe-XD-Wireflows-v1) --- tags: #web #resources home: [[! intro to web resources]]