Adobe XD plugins: How to use Undraw and other helpful plugins
Tags: design
Published: 2021-03-29 17:10:35

###What is Adobe XD used for?

Adobe Creative Cloud offers an application called Adobe XD that is used for creating mockups and prototypes of the designs you hope to achieve on your actual website or application. It is a simple program to use when you are first getting started on your project and thankfully, Adobe XD offers helpful tools to make the design process fun and easy. 

###What are Adobe XD plugins? 

Adobe XD plugins are features you have to download in Adobe XD that gives you access to icons, animations, helpful programs to transfer images and other designs, and many more. Adobe XD presents a range of plugins you can easily install and uninstall to your liking. Just like Adobe XD, the plugins are simple, easy, and very useful in creating mockups for website and mobile application designs. 

###What is Adobe Undraw? 

Adobe Undraw is a plugin application used in Adobe XD to quickly create designs and mock-ups for your desired project. Undraw includes modern, sleek, fun, yet simple designs and cartoons that are sure to fit your design goals. If not, Adobe XD makes it easy for you to customize and edit the designs you selected from Undraw. 

![Alt Text](https://d2gdtie5ivbdow.cloudfront.net/media/user/images/Screen_Shot_2021-01-13_at_11.57.59_AM.png)

![Alt Text](https://d2gdtie5ivbdow.cloudfront.net/media/user/images/Screen_Shot_2021-01-13_at_11.59.00_AM.png)


###How to select the perfect design from Adobe UnDraw? 

Undraw offers hundreds of creative designs to choose from--so finding the perfect design should not be too challenging. If you searched for hours and can't find a design you like, then select a design that is closest to the image you want to achieve. For example, I want an image of a person in a cape flying across the sky, but Undraw only offers a person in a cape standing. To achieve my desired look I simply move and rotate the person to be flying in front of the sun. 

![Alt Text](https://d2gdtie5ivbdow.cloudfront.net/media/user/images/Screen_Shot_2021-01-13_at_12.04.16_PM.png)

![Alt Text](https://d2gdtie5ivbdow.cloudfront.net/media/user/images/Screen_Shot_2021-01-13_at_12.11.39_PM.png)

###How to adjust your image accordingly

For those of you who are completely new to using Adobe XD, sometimes when you want to adjust your design to enlarge or shrink your image, the individual shapes making up the image do not enlarge or shrink together but rather the shapes disperse. I ran into this issue when I first started using Adobe XD and to fix it, simply select the design you want to resize and hold in the Command and Shift keys (if using a Mac) at the same time while you drag the size of your image accordingly. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fqpsgfzv6vl1v1ru77ga.png)
 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tnzkyikenjom22w2ivd.png)
 

###What about other Adobe XD plugins? 

Remember, you are not limited to Undraw as there are plenty of other plugins that allow you to add cool and unique features to your design. For instance, Glitch in Adobe XD changes to the image to appear as if it is glitching.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ao7729f4akkbuq06o39.png)
  

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qyz624rl7cfzjfqii5e9.png)
 

Adobe XD's Confetti plugin duplicates the selected design to appear as confetti sprinkled over the screen. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jp2w6xvlpk2npv3nizd1.png)
 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63kc1by02mrgvbp2kvr1.png)
 

Adobe XD's Pixels plugin offers hundreds of images to fill the shape as the color. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7im2kdti7kwp69j0wsad.png)
 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k2t9wuv9fpwan7b5ywlo.png)
 

Adobe XD's VizzyCharts plugin allows you to create your own different types of charts if you have data needing to be displayed. Just start off by having a rectangle or circle in place.
 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v0eura34k04mndp4hg6d.png)
  
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/if93tz0qtwxuwzgwij38.png)
 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8i4m5m0vjeo6qb9p69cn.png)
 

Finally, Adobe XD's Icons 4 Design plugin provides you with plenty of essential icons that will help fit your design. This plugin offers different designs of the same icon as shown below with various icons of a boat. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l9wyi5r38wjolqozrihe.png)
 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hoq10m3iwqh3xxrnlcgk.png)
 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tcev4p1002urbe73gjq6.png)
 

A few other Adobe XD plugins that might help you with your design include the Color Designer plugin which offers a wide range of colors and shades to chose from, FancyMaps which allows you to fill in your shape with a map of a specific or random location as the shape's color, and Quick Mockup which presents you the ability to select one of their themes (there are a few different designs of both light and dark themes) and add whichever icons or images that suits your design.