Scribd
Upload
172 views6 pages

Lab 2 - Adobe XD Advanced Tools PDF

This document provides instructions for advanced tools in Adobe XD including importing images and SVG files, combining shapes, aligning and positioning objects, and using repeat grids. Key steps covered are importing images by dragging them into XD, combining shapes using options like add, subtract and intersect, aligning multiple selected objects, and duplicating content into a consistent repeat grid for list views.

Uploaded by

2029 jtsoft
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
172 views6 pages

Lab 2 - Adobe XD Advanced Tools PDF

This document provides instructions for advanced tools in Adobe XD including importing images and SVG files, combining shapes, aligning and positioning objects, and using repeat grids. Key steps covered are importing images by dragging them into XD, combining shapes using options like add, subtract and intersect, aligning multiple selected objects, and duplicating content into a consistent repeat grid for list views.

Uploaded by

2029 jtsoft
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Laboratory 2 Adobe XD Advanced Tools

Based on the previous laboratory, we are going to do somethings more details


on the screen. You can get the previous work from Moodle and load it to XD.

Import images

Go to the menu and select Import.

You can select all images and click


import.

Zoom out a bit and see what have


happened.

Let's remove all of that now.

Another way we can import images is we can locate the images on our
computer and we can drag. Now, you can see it fit into the shape. Try to
drag for another image and drop into the circle.
1
If you want to remove the image, you can select the shape change to any
colour for the shape. You can undo by ctrl-z and bring the image bring.

Importing SVG file

SVG stands for scalable vector graphics. This type of file it will retain the
vector information from the application that it was created in. In Adobe XD, it
allows you to edit that SVG file to make any changes.

The other benefit using SVG is that Rasta based graphics like PNG and JPEG
will pixilate on higher quality displays whereas an SVG file could be displayed
on the highest resolution display available and it would never lose any quality.

Let's import by left clicking the SVG file and dragging into XD. (Do NOT drop
the SVG file to any shape in your XD file) You can go up to file down to import.
Now the benefit of it being SVG is it
does retain that vector information
so you can change the fill directly in
Adobe XD without needing to go
back into the application that it was
created in. You can also scale SVG
graphic without any lose quality.

2
Combine shapes

So we have a screen design where we left off.

1. Create a square meter and move the border and just give this a full
colour.
2. Create a copy of this square by dragging and holding the Alt Key and
give this a different colour film.
3. Duplicate 4 copies of these two shapes and show the different of the 4
option of the combine shape.

Let’s take a look the different options here:


Add Combine both sharps into ONE shape
Subtract It will subtract whichever shape is on top from the one below.
Intersect Only keep the cross over parts and anything outside of that
intersect will be removed.
Exclude It will knock out and remove where ever those shapes
Overlap intersect and keep everything else around the edge.

3
Aligning and Positioning objects

First of all, lets make the previous blocks randomly located in the screen.

If you select any ONE of the objects only, these controls are all ghosted out
and unselective. However, if you select two shapes most of them now
become available.

Let’s try each of the controls here.


Align Top, Align Middle, Align Bottom, Align Left, Align Center and Align Right

Now, select more objects (at least three)

Now, let’s try the rest of the controls here:


Horizontally and vertically distribute shapes and equal distance apart.

At last, let’s try to local the group of the objects to specify position (X, Y).

4
Repeat Grid

In this design, you can edit the text, the price, the profile image and main
image on the right. If you are going to design as a list view, you can simply
duplicate the selected object. Is there something wrong?

Try to click on the Repeat Grid control.

You can see the blue border is changed to green border and you can pull the
whole object as a list view.

If you mouse over in between each piece of content you will see a pink bar
come up. You will see some pixel widths to the left hand side and you can
adjust the width and it will keep the with between all pieces of content
consistent for you. (Now adjust to 11 and make the list to fit the bottom)

5
For the contents in the list view:
Text style Globally change
Text content Individually change
Imagery Group changes (select all images and drop to the list)
Object size Globally change

Let’s try to change all images.

More about design rule in Android and iOS.

You might also like