25 Adobe XD questions that will help you to nail your job interview

Adobe XD is a designing and prototyping tool that allows you to design and prototype software applications - websites, web apps, mobile apps or any other software.

Using Adobe XD you can create low fidelity wireframes, high fidelity mockups and live prototypes that demonstrate the behaviour of the application.

Designs and prototypes are created before the applications are developed. Thanks to them, developers know what to develop and business people can see how the application will look like before the development has even started.

While using Adobe XD application, you usually use the following screens very often:

• Home screen - This screen can be used for creating new projects, opening recent files and getting help and resources - tutorials, news. The screen is automatically opened immediately after you run the application, later it can be opened by clicking the Home icon in the top toolbar.
• Design screen - this screen is used for designing look and feel of your wireframes or mockups.
• Prototype screen -  this screen is used for designing behaviour of your application screens and defining user interactions.

Design

In very simplified model, design is used to define how things should look. It is very helpful for communicating key application-related information among business people, user interface designers, developers, testers and other involved parties.

Design:

• Defines the layout of screens of your application
• Defines look and feel of the elements on each screen
• Can have low fidelity (wireframe) or high fidelity (mockup)
• Simplifies communiction a lot because without having it, everyone has different image of what is to be built in his mind.
• Allows to get both business people and technical people to the same page

Prototype

Prototype is used to show how things should behave.

Prototype:

• Shows what happens in the application/design depending on different user interactions.
• Can be used by business users to test the usability of the application before the development has even started
• Helps back-end and front-end developers to understand how exactly the application should behave.
• Helps testers to understand behavioral details about the application so they can test it better.

An artboard usually represents one screen of your application or web site.

Think of an artboard as if it was a paper that you draw on. Artboard has a predefined size and you can place shapes and images on an artboard.

You can have multiple artboards and organzie them on your screen the same way you can organize papers on your table.

The Canvas can have zero, one or more Artboards placed on it. Imagine the canvas is a table and each artboard is a sheet of paper. You can organize the artboards on the canvas the same way as you can organize papers on the table.

An artboard can be created using on of the following ways:

• From the Welcome screen - When you create a new project, select a size of the first artboard that is to be created. Once the project is created, the first artboard gets created automatically
• Using the Artboard tool - Whenever you are within the Design tab of the application, you can select the Artboard tool (A) and just draw a new artboad onto the canvas by clicking and dragging a mouse or by clicking an artboard template on the right hand side of the screen.
• Copying an existing Artboard - You can always select an existing Artboard by clicking its header that is above the Artboard top edge. Then copy the Artboard to the clipboard by pressing Ctrl + C and paste it by pressing Ctrl + V. Alternatively you can rightclick the Artboard header, select Copy, then right-click canvas and select Paste. 

To select an Artboard, activate the Select tool by clicking it (or press V) and then click on the name of the Artboard that is located at the left hand side above the top Artboard edge.

To rename an Artboard, activate the Select tool by clicking it (or press V) and then double-click on the name of the Artboard that is located at the left hand side above the top Artboard edge. Once this is done, just rewrite the name of the selected Artboard to whatever you like.

To move a canvas, activate a select tool using V keyboard shortcut, then hold down the Spacebar key, pres and hold the left mouse button and drag the mouse so that the whole canvas moves.

To move an Artboard, you need to select it first. Activate the Select tool by clicking it (or press V) and then click on the name of the Artboard that is located at the left hand side above the top Artboard edge. Once the Artboard is selected, drag it to the new target location. In order to initiate the dragging, click on he name of the Artboard and move the mouse while holding the left mouse button down.

The following Artboard properties can be changed in the Artboard property inspector:

• Width
• Height
• Lock Aspect
• X position
• Y position
• Orientation - Landscape/Portrait
• Responsive resize
• Scrolling type and viewpoint height
• Fill color
• Grid type
• Number of grid columns
• Grid Gutter Width
• Grid Column Width
• Margins

First you need to select an Artboard that you want to modify. Activate the Select tool by clicking it (or press V) and then click on the name of the Artboard that is located at the left hand side above the top Artboard edge. Once the Artboard is selected, you can change its properties in the panel at the right hand side.

Don't forget that you have to be on Design screen (so the Design tab must be active).

The grid can be displayed using Artboard propery inspector.

You can use either Layout grid or Square grid, just check the Show/Hide Grid checkbox and select the grid type in the dropdown list.

When the grid is shown, it is way easier to place screen elements to their precise locations and keep them well aligned. Grids enable designers to manage the proportions between UI elements, such as spacing and margins. This helps to create pixel-perfect designs from the start and avoid timely reworking caused by incorrect adjustments.

There are more ways how to add an image:

• Import - Go to menu, click Import (or use Shift+Ctrl+I shortcut), select an image and click Import.
• Drag and Drop - Drag an image from your disk and drop it onto the Adobe XD window.
• Copy and Paste - Copy the image into the clipboard (Using Ctrl+C, Copy or making a Screenshot using PrintScreen) and paste it from the clipboard into the Adobe XD application.

The Artboard tool is used to add new Artboards to your canvas. The keyboard shortcut to activate the tool is A.

In ordert to create a new artboard, activate the tool and then do one of the following:

• press and hold the left mouse button anywhere on the canvas and drag the mouse diagonally to define the size of the Artboard
• select one of the Artboard preset from the list displayed at the right hand side of the screen and click on in - by doing this, you new Artboard will be created using the size of the preset and will be placed on the canvas 

The following tools are available on the Design screen:

• Select (V) - When this tool is active, you can click on any element within an Artboard to select it. You can also use this tool to select an Artboard by clicking on the Artboard name.
• Rectangle (R) - This tool can be used to draw rectangular shapes - either rectangle or square. When this tool is active, you can click on an Artboard and drag the mouse to draw a rectangle. If you hold Shift while doing this, a square will be drawn instead of a rectangle.
• Ellipse (E) - This tool can be used to draw elliptic shapes - either ellipsis or circle. When this tool is active, you can click on an Artboard and drag the mouse to draw an ellipse. If you hold Shift while doing this, a circle will be drawn instead of an ellipse.
• Line (L) - This tool can be used to draw line shapes. When this tool is active, you can click on an Artboard and drag the mouse to draw a line. If you hold Shift while doing this, the line will be drawn exactly horizontally or vertically.
• Pen (P) - This tool can be used to draw free shapes that consist of multiple points connected by lines. When this tool is active, you can click on an Artboard multiple times to draw the freeform shape.
• Text (T) - This tool can be used to add a text shape into the Artboard.
• Artboard (A) - This tool can be used to add new Artboard onto the canvas. Whenthis tool is active, click on the Artboard and drag the mouse to define the size of the Artboard. Or select from one of the predefined sizes by clicking on the presets shown on the right hand side of the screen.
• Zoom (Z) - This tool can be used to zoom into an Artboard. When this tool is active, you can Zoom in by clicking on the Artboard. To Zoom out, just hold Alt key while clicking.

The following tools are availalbe:

• Select tool (V) - Use this tool to select some shape or object on the Artboard or select the Artboard itself.
• Zoom (Z) - Use this tool to Zoom In or Zoom Out the Artboard. In order to Zoom In, just activate the tool and click on the Artboard. To Zoom Out, activate the tool, hold Alt and click on the Artboard.

Masking is used to hide an image and show only some of its parts.

As an example, think about circular avatar image - this is usually assembled using image and applying circular mask to this image. When this is done, all the parts of the image that are outside of the masking circle become hidden and only the part that is within the circle remains visible.

Masking can be done using one of the following ways:

Drag and drop - Draw a shape on the artboard, then go to file explorer, drag some image file and drop it onto the shape. The image will be automatically imported and the shape will became its mask. If you want to change the position of the image within a mask, just doubleclick the image and reposition the image.

Boolean operations - Intersect - Select the shape that should be used as a mask and move it on top of an image that is to be masked. Now select both image and shape by holding Control and clicking on both items and then click on the Intersect button or press Ctrl + Alt + I. 

If you got inspired and like an element on some web page and you would like to place it to your Artboard, the fastest way how to do this is to make screenshot of the page, crop the area you are interested in, copy the area into the clipboard and then paste it into the Artboard.

On Windows you can use Win + Shift + S, mark the area you want to copy, then paste Ctrl + V in Adobe XD.

The snippet will be pasted into the Adobe XD as a bitmap image so it's very likely you will want to rework it to a vector shape later, however, this trick is focused on speed and capturing the idea as fast as possible so the fact you have just a bitmap shouldn't be a big deal.

The Select tool is used for selecting Artboards and  for selecting Artboard elements/shapes. The keyboard shortcut used for activating the Select tool is V.

The Rectangle tool is used for drawing rectangles and squares onto the Artboard. The keyboard shortcut for using the rectangle tool is R.

In order to draw a square, hold the Shift key pressed while you draw the shape.

Each rectangular shape can have different

• Size,
• Opacity,
• Fill (Solid color/Linear gradient/Radial gradient), 
• Border,
• Shadow and
• Background/Object Blur.

The shapes are the basic Design building elements.

The Ellipse tool is used for drawing ellipses and circles onto the Artboard. The keyboard shortcut for using the Ellipse tool is E.

In order to draw a circle, hold the Shift key pressed while you draw the shape.

Each Ellipse shape can have different

• Size,
• Opacity,
• Fill, 
• Border,
• Shadow and
• Background/Object Blur.

The shapes are the basic Design building elements.

The Line tool is used for drawing lines onto the Artboard. The keyboard shortcut for using the Line tool is L.

In order to draw a line that will snap to predefined positions (increment of 45 degrees), hold the Shift key down while you draw the line.

Each Line shape can have different

• Opacity,
• Border,
• Shadow and
• Background/Object Blur.

The Pen tool is used for drawing paths composed from straight lines and curves onto the Artboard. The keyboard shortcut for using the Pen tool is P.

In order to draw a path, select the pen tool and start clicking on the canvas. This will add points that will be connected by straight lines.

You can modify the path by selecting, moving, adding, deleting and converting points.

• Select a point - To select a point in a path, double click the path and click the point you want to select. You can also select multiple points - just hold Shift key and click the points you want to select. 
• Move a point - To move a point in a path, double click the path and drag the point to a different location. You can also move multiple points - just click them while holding the Shift key and then drag them to a different location.
• Add a point - To add a point to a path, double click the path and click the path at some location. The point will be added to the location you clicked.
• Delete a point - To delete a point from a path, double click the path so you enter the editing mode, then select the point by clicking it. (You can also select multiple points by holding the Shift key and clicking them). Once the point is selected, press the Del key.
• Convert a point - There are two types of points. The point that connects two straight lines and the point that connects two curves. To convert between these two types of points, double-click the path and then double-click the point.

Each free-form path shape can have different

• Opacity,
• Fill, 
• Border,
• Shadow and
• Background/Object Blur.

The Text tool is used to place blocks of texts onto the Artboard. The keyboard shortcut for using the Text tool is T.

There are two types of text blocks that you can use:

Point text

This text block type is used to place a line of text onto the Artboard. The text block starts at a specific point and the text within a text block is never wrapped automatically.

• In order to use a Point text block, select the Text tool and click anywhere at the canvas. Once the text cursor appears, type the text.
• To wrap the line manually, press Enter key.
• To finish editing of the text, hit Esc key.

Area text

This text block type is used to place a block of text into the rectangular area. The text is the automatically wrapped to match the width of the text area. The text that overlaps the height of the text area is hidden. 

• In order to use an Area text block, select the Text tool, press and hold the left mouse button anywhere on the canvas and drag the mouse diagonally to define the rectangular area. Once the rectangle appears, type the text.
• To change the width of the rectangle to change the location at which the lines will get wrapped just resize the rectangle using its borders when the text block is selected.
• To finish editing of the text, hit Esc key.