How to install Adobe XD

How to install Adobe XD?

Install Adobe XD to your PC by steps, let’s take it step by step until we launch the Adobe XD software on your PC.

Adobe XD

Ads

This software Adobe XD is one of Adobe software programs for designs and content creation, It’s specialist for web and application design or UI/UX Design.

Its heavy software doesn’t need high specifications to work on your PC, Not like Photoshop or Illustrator who need a high specification to launch.

Also, It’s available for PC only for designing but for sharing and view you can use Adobe XD application for android or iPhone.

Install Adobe XD for Windows or Macintosh

First, you have to install Creative cloud and then install it on your PC.

Ads

After it’s successfully installed now you can log in or signup if you don’t have an Adobe account.

After log in or signing up, use the search icon to look up for Adobe XD.

When you find the Adobe XD icon, press install button.

Adobe XD is a completely free software program, and it includes plugins for Adobe XD to make designs better and faster.

How to use Adobe XD?

As we said before it’s used for UI/UX Design, For that when you open up the Adobe XD you will find the first main page which contains:

  • iPhone mobile screen canvas.
  • Tablet screen canvas.
  • Web screen canvas.
  • Custom size.
  • Instagram stories.

Adobe XD sidebar and menu tools and settings

When you open a new or recent project you will find a sidebar contains some shapes and tools, let’s explain what is this tools and how to use?.

Adobe XD Home screen
Adobe XD Home screen

Adobe XD home screen the first screen when you start Adobe XD, here you can start the project with canvas you want, E.g: Mobile screen, Web screen or Custom size yourself.

After start, you will find the design area as in the next photo.

Adobe XD select
Adobe XD select

Let’s know more about the left sidebar tools.

  • Select: this tool to layer or item to control or choose, you can reach it by clicking on “V” button on your keyboard in Adobe XD screen.
Adobe XD rectangle
Adobe XD rectangle
  • Rectangle: This tool to draw rectangle in the screen, and it used for E.g.: input field or menu bar. Use “R” keyboard button to call it.
Adobe XD triangle
Adobe XD triangle
  • Triangle (Polygon) : This tool to draw triangle shape, and it’s awesome to use it for play icon button for videos, or thing like that. Use “Y” button on keyboard to call it.
Adobe XD line
Adobe XD line
  • Line: to get a line on your screen design between the widgets or to split screen or in drawing, You can call this tool by click on “L” to call this tool.
Adobe XD circle
Adobe XD circle
  • Circle (Eclipse): This tool to draw circle or eclipse in your design, you can call it by clicking on “E” Button.

 

Adobe XD Pen
Adobe XD Pen
  • Pen: This tool is used to draw any curve or anything in your mind manually in the screen. You can use “P” button to call it.
Adobe XD Text area
Adobe XD Text area
  • Text: this tool to add a text area in your design to write on designed button or to write titles, You have to choose this tool first and then select text area, Then start writing your text, and finally you can edit font style or color by using the right sidebar. You can call this tool by pressing “T” key on your keyboard.

The bottom of left sidebar

There are three icons in the bottom of the left sidebar, have three things to-do.

  • Libraries: for saved templates or components. For E.g.: If you created a menu, and you want to save to use it again in the future choose the group of the menu items, and right click on it, then choose “Reveal components to assets”.
Adobe XD Libraries
Adobe XD Libraries
  • Layers: When you put many layers in one screen, This icon will let you set up their position backward or forward. Also, delete a layer.

    Adobe XD layers
    Adobe XD layers

  • Plugins: This icon is to manage your Adobe XD plugins, when you click on it, will appear a new left sidebar Your plugins to choose one and plus icon “+” to add any new plugins you want.Share Adobe XD project
    Adobe XD Plugins
    Adobe XD Plugins

    You can call this tool by click on “Ctrl + Y” to get your plugins in the left sidebar.

The right sidebar in Adobe XD

Adobe XD Sidebar
Adobe XD Sidebar

It’s contains all options and settings for every element alone. So, by this sidebar you can manage size (height and wide), Position, color, Border color, border radius, opacity and shadows.

The top menu in Adobe XD

In the right of the top menu you will find 4 things.

  • The first from left is to share the project with someone, by email at this situation you have to add email for someone who is using Adobe or own an Adobe creative account.
Share Adobe XD project
Share Adobe XD project
  • The second icon from left is to share the project in mobile screen view, it’s used to test your design for application or web mobile view on a mobile screen, to make sure it’s perfect for the user before forwarding the project to the developer or the buyer.
Adobe XD device preview
Adobe XD device preview
  • The third icon with “play icon” this button is used to preview the project in web view to open the project in the same device.
Adobe XD Desktop preview
Adobe XD Desktop preview
  • The last button or tool is to zoom on or zoom out by percentage, for E.g.: 100% means full screen.