This video is brought to you by Wondershare VidAir.
Hey friends welcome to the Adobe xd beginner to pro course for absolutely free of charge.
the only thing I want is to like this video so YouTube recommended it to more people.
if you new to UI and UX design or never heard of adobe xd, you might ask what’s adobe xd? Adobe XD
is a powerful and easy-to-use vector-based experience design platform that gives
you the tools that you need to craft the world’s best experiences collaboratively.
it’s Available both on Mac and Windows.
Adobe XD is designed and built with the mobile and web in mind.
However it’s not limited to those only, you can use adobe xd for wireframing, user interface
design, animation and interaction design, prototyping, user experience design,
and developer handoff. we will dive deep into each one in upcoming videos.
Here I listed some adobe xd features:
1: vector-based. it’s vector-based which means the object created in adobe xd
is not pixelated, and the design adapts to large and small screens easily.
2: lightweight and fast. adobe xd is a lightweight and fast software,
you can work with multiple artboards without facing any problems.
3: Components and States. Create your designs once and bring them to life everywhere.
Using components in Adobe XD, you can create reusable elements
like buttons and navigation that streamline the process of designing.
Using Component States, you can create variations on a button and apply
interactions to all instances.
4: stacks and padding. Padding provides a consistent spacing between the content
of a group and the outer bounds of that same group. When a label on a button is
changed or content is added to a group, that group's padding remains consistent.
Stacks enable you to easily organize content and rearrange them with a simple drag and drop,
Spacing between elements is maintained
automatically, and can be adjusted individually, or globally across the Stack.
5: repeat grid. Creating repetitive content is a time-consuming part of the design.
The Repeat Grid tool can automate that process in your
design. Once enabled, you can repeat any object or group of objects horizontally and vertically.
6: 3D transform. 3D transform Adds depth to your designs by
easily transforming any flat design into a 3D
perspective. 3D Transforms is a versatile tool for creating rich and immersive experiences.
7: Responsive Resize. Responsive Resize intelligently understands your layouts.
Designing for new screen sizes is as simple as dragging and dropping or
resizing, and the layout instantly adjusts to fit new dimensions.
8: Scroll Groups. Adobe XD's Scroll Groups feature is a great way to
quickly add scrollable sections in prototypes. It allows designers
to add either horizontal or vertical scrollable sections to their designs.
these are some of the features adobe xd offers, but it's not limited to these only,
there are loads of other features like anchor links, auto-animate,
triggers and inputs, voice prototyping, coediting,
plugins, and much more. we will discuss each of these in detail in upcoming videos.
Before we continue the tutorial, I got to let you know that this video
is brought to you by Wondershare VidAir. Wondershare VidAir is a video creation tool
for small businesses. With its easy-to-learn interface and impressive array of features,
this program has the power to help any business market their products or services easily.
it’s A flexible video editor for both beginner and advanced users,
simply create videos in minutes, add text effects or stickers to highlight the key
information of your brand or product, create one video for multiple platforms.
to get started click on the link in the description or go to Vidair.Wondershare.com
when you launch adobe xd, a start window will pop up. Here you can choose the size of your artboard,
which represents the screen of the app,
the page of the website, or the social media layout you are going to design.
you can choose from the pre-defined sizes for mobiles,
website, and social media layouts, you can also create custom size artboards.
under these, you can see your recently opened files.
at the left, we have a simple file browsing navigation like any other software.
once you get into the main interface of adobe xd, the first thing you see is the top horizontal
panel, On its left, we have the “Design / Prototype / Share switch, and on its right,
we have coediting, real-time preview, desktop preview, and finally the zoom drop-down menu.
underneath those, on left we have the toolbar which has all the main tools adobe xd offers,
the first tool on the list is the select tool, which lets you move artboards, and objects.
the second tool which you’re going to use most of the time is the rectangle tool,
with this tool we can create any square or rectangle shape.
one thing that you probably noticed whatever tool you select from the toolbar, the properties change
accordingly in the properties inspector, like color, corner radius, border size, and Et cetera.
the next tool is the ellipse tool, with this tool we can create circles, and oval shapes.
then we have the polygon tool, you can create any shape with three or
more than three corners like triangles, pentagons,
polygon tool has another interesting feature that lets you create different star shapes.
after that, we have the line tool, which lets you create horizontal, vertical, and 45-degree lines.
after the line tool, we have the pen tool, with this tool we can create any custom shape.
the next one is the text tool that lets us write texts,
when the text tool is selected we have options related to text like font, font size, font-weight,
character spacing, and a lot of other options. then we have the artboard tool that lets you
select from pre-defined sizes or you can create a custom one.
and finally, we have the zoom tool that lets us zoom in and out.
at the bottom of the toolbar, we have the libraries panel which has two options,
document assets, and my library. in document assets, you can see, edit and re-use the Colors,
Character Styles, and Components present in your XD project,
and in my library you can re-use colors and character styles that you created with other
Adobe tools like Photoshop or Illustrator and saved in your Creative Clouds Libraries.
after that we have layers panel, if you have used other Adobe products like photoshop and
illustrator, you must have known the importance of layers panel, adobe xd is no different,
layers are fundamental of adobe xd and every object you create is a layer,
and layers stack on top of each other. we can also use layers to rearrange objects' positions.
when you hover on a layer in the layers panel, three small icons appear, with the lock icon
you can lock a layer, and when a layer is locked you can’t move or edit it unless you unlock it.
with the eye icon, you can hide a layer, it still is present in the layers panel but invisible.
with the mark for export icon, you can mark any object for export.
you can also group two or more layers by selecting them and choosing Object,
Group, or using the shortcut command G. then we have the plugins panel,
plugins can be real-time saving and extend the range of features and capabilities of Adobe XD.
some settings in properties inspector are always there regardless of what tool you select,
these are: alignment options, save component, repeat grid, boolean operators, objects
size & positioning, 3d transform, scrolling options, responsive layout, and at the bottom
shadows, blurs, and mark for export. these are some adobe xd features but
there are a lot more, which we will learn one by one in upcoming lessons.
I hope you enjoyed this video if so then please subscribe because last time I checked my analytics
13% of you watching are subscribed, 87 % aren’t, so please consider subscribing for more tutorials.