Adobe Xd is a tool for designing and developing an user experience and user interface with prototype and wire-framing for new mobile and web applications.

Artboard

Figure 1 Home Screen AdobeXd

Figure 1 Home Screen AdobeXd

 

AdobeXD provide artboard design for Mobile, Tablet/iPads and Web. Apart from this there is an option to choose custom design where you can choose high and width according to your need. You can check home screen Image in Figure 1.

So when you choose the custom design or readymade design size there are many useful features/tools you can use in AdobeXd.

Figure 2 Artboard Screen

Figure 2 Artboard Screen

List of Basic Tools:

  • Select – To move a layer or a group of layers.
  • Rectangle, Circle, Line – To draw shapes in the artboard.
  • Pen – Using anchor points you can draw the desired shape.
  • Text – You can type using available font-family, font-size, font-weight, character spacing, line spacing, paragraph spacing.

Advanced AdobeXd Tools:

  • Repeat Grid: You can repeat the particular object horizontally or vertically.
  • Fix position when scrolling: You can fix the position of an object while scrolling.
  • Responsive resize: If you want to set object size responsive you can do it with automatic responsive resize feature.
  • Appearance: You can work on the objects look and fill with this tool. Using this tool you can change color, Gradient, Border, add shadow effect etc.
  • Layer: A very important feature of AdobeXd. You can fix the layers according to your design need.
  • Assets: This is one of the great tools AdobeXd has. When you need to use some appearance and styling features multiple times you can create one asset and apply it to objects.
  • Masking: With the help of this feature you can add an image in any kind of shape.
  • Prototyping: If you want to link the artboard for interactive design it can be done from prototype. When you link the artboard with another artboard there will be a popup for the transition effect like slide left, slide right, etc.
  • Preview: You can check the design of prototype in desktop and mobile view and can test it before publishing it.

Publish: with the help of this feature you can share the design of prototype with others and they can share their comments with you. There is another option which is called design specs by which you can share not only design but CSS file too. Both the feature has password protection security feature too for sharing the confidential designs.