Focus on the structure and flow of an app before refining your design. Add artboards, placeholder text, and basic shapes to map out the design. Use Repeat Grid to place copies of text and objects in rows and columns. Set up symbols as placeholders for items that repeat throughout your design. Leverage templates and design elements from wireframe kits available for XD to quickly get a head start.
Another powerful feature
in Adobe XD is components, which you can also manage
from the Assets panel. I can draw a shape as simple
as a rectangle like I'm doing here to reserve space for a header. If I make it a component and copy
and paste it to other artboards changes that I make to the master component
are applied across all the instances except in the case of overrides. For example, if I double-click
into the master component and draw a few ellipses
inside the rectangle to serve as placeholders for icons
to be added later they appear in all instances
of this component. With Adobe XD you have
the tools and performance to design your experience
from scratch. Adobe XD offers easy access
to other resources that make getting started easier. This includes wire frames, which have
pre-build templates and components, that can be used
as is or customized as well as other UI resources
for designing for Apple iOS Google Material design and
Microsoft Windows. I'll go into these in more
detail in the next video.
Learn how to use the canvas to experiment with design concepts before updating artboards. Use Repeat Grids in various ways to speed up your design process. Modify a design element in a Repeat Grid to update elements in other cells simultaneously. Open UI kits and wireframe kits to copy and paste design elements into your document. Streamline the management of your documents assets, including color and character styles, from the Assets panel.
Use the Rectangle, Ellipse, Line, and Pen tools to draw simple icons. Refine the graphics in your app with the Boolean operators by adding, subtracting, intersecting, and excluding overlapped shapes. Import icons and illustrations created in Adobe Photoshop and Adobe Illustrator. Explore Components and Repeat Grids as you develop your design.
As with Boolean operators,
components and Repeat Grids objects in a mask
are automatically grouped. by double clicking on the mask you have access to its contents. So, you can now select either
the square or the photograph and edit them separately. If you grab the grouped mask you can
modify the shapes together. And finally, image fill lets you add
an image directly into a shape by dragging and dropping it in. Notice the image is automatically
scaled and cropped to best fit the containers dimensions. While you can't scale
the image independently Adobe XD makes image adjustments
automatically as the container is modified. Be sure to watch the next tutorial in
this Adobe XD Getting started lesson.
Fine-tune your app or website’s design by adding final images and text to your artboards and Repeat Grids. Add components and apply component overrides and use images, colors, and character styles from Creative Cloud Libraries and the Assets panel.
Now that these pages
are pretty defined, I'm going to make them high fidelity. Adobe XD makes it so easy to incorporate
assets from other applications CC Libraries, your Desktop
or Explorer and more. In this video,
I'll show you how. I'll begin by going to my Desktop grabbing some Ginchy assets,
saved as SVG format and dragging them into Adobe XD. I'm going to make this black logo
type
a component right away. I'll click on it to select it
in isolation, open the ASSETS panel and click the + sign
to make it a . Then I'll drag the original on top
of the placeholder Ginchy text and use the automatic
guides to align it. Then I click on the placeholder text
container underneath and delete it. Next, I'll grab
the Ginchy headers and icons I'll drag them onto my homepage and place them close to the
placeholder
header component I made earlier. To make my substitution quicker,
I'm going to edit the placeholder component and add in these assets. I cut
them so they are on my clipboard.
I'll double-click the main container
and the placeholder header, so that when I paste
what's on that clipboard It will go into the same
component container. Then I can grab the placeholder content delete it and slide
the final header in position. Basically, the final header
has been substituted for the placeholder
everywhere it was used.