Ad goes here

Saturday, 29 August 2020

How to prototyping with Adobe XD?

Prototyping is the way to know what you will receive when project delivered.

Prototyping is one of the best approach to give a real feel of your mobile and web applications to customer. Customer can understand about what they are going to received deliverable project before start the programming. From business end you both will get benefits, as a service provider you will get most of the feedback during the prototype reviewing to get minimum changes in development phase and as a customer you can see the deliverable projects before start programming and can share your thought if required.

You may know several tool names for prototyping like Balsamiq, InVisionApp, Figma and Adobe XD. But today I will explain about how you can use Adobe XD for prototyping. You may find several tutorial on Adobe XD but they are too lengthy or not focused on actual uses, I will explain only those points which are required to prototyping your next project.

Adobe XD is basically a vector based user experience tool (UX tool) for web and mobile application. You can buy or use Free XD starter plan to use it. You can download the Adobe XD tool from here. It’s very easy to use for anyone by using simple following steps, you don’t need to know any coding or technical knowledge to use it.

Step 01: After installing the Adobe XD tool, please open it to get the similar view of image below.

Adobe XD first open view area

Step 02: There are different type of documents to choose – iPhone, Web, Instagram and custom size, Click on one of them to choose the document type which you like to prototyping.

After choosing the option you will get similar to below artwork area. I have chosen iPhone and web for your reference.

Adobe XD Artboards - iPhone
Adobe XD Artboards - Web

Step 03: Now the time to import files and create artboard for multiple pages. The Adobe XD support PSD, Ai, Sketch, JPG, GIF, PNG, TIFF, SVG, BMP, TXT formats

You can drag the file, or click on hamburger menu icon and choose improt (Shift + Ctrl + I) to import your files in the artboard area.

How to import images in Adobe XD

Info: To create multiple artboard area for your multi pages prototype, you need to click on Artboard tool (Shortcut Key - A) from "Design" tab.

Artboard tool

Step 04: After importing files to different artboard and edit as per your needs (You can edit layer based files/ text directly from Adobe XD by double click on the area which you like to edit ) now the time to connect each other artboards to prepare the prototype.

Go to "Prototype" tab from top menu to get the option of connecting each other. Once you click on Prototype and select one of the artboard then you will see a "+" sign right side of the artboard box, click and drag to link the end point to other artboard which you like to connect. This will work with tap or drag or time or key which can be choosen from the settings available at right side interaction panel. See image below for better understanding.

How to connect artboard in Adobe XD

Step 05: You almost done the basic uses of Adobe XD, now the time to prepare the link for review.

However there are more options which you can explore during your prototype creation. I have included some of the options just below the step 5 which you can check.

Choose "Share" from top menu and click on "Create Link" from right panel. You can also choose option for link access with password or for anyone. Once the link created you can copy it to share or assign email ID to share the link.

Befor prepare the link you also can choose following option based on your preferences of uses.

  • Design review is for get feedback and customer can add their comments
  • Developement is for developer who can directly download layered images/ icons separately
  • Presentaion is for optimzed the design
  • User testing - Ideal for testing the prototype


It's done! If you still like to know more, please read below




You can create button with mouse hover. Click on rectangle (R) from design view and draw it in the artboard area. Once the button created you can fill color in it from right sidebar option and change the shape to rounded by using four tiny circle inside the created rectangle button.

Now you have to add it in the component to get mouse hover and active for action. To add it in component, pleaser click on Assets (Shift+Ctrl+Y) and click on "+" sign from asset. Once it added in component it will be available at right side component panel to add different states color for default and hover. Please check image below.

How to create component in Adobe XD

You can create image slider in Adove XD. You need to create number of rectangles or add images which need to be expanded over the artboard. Now select all images/ rectangles and press Ctrl+G or right click to get group option to keep them in a group. Once you grouped it, you will get the option to make slider from right sidebar panel. Choose one of the option to make it horizontal or vertical or draggable to scroll them. Below image for your reference.

How to create slider in Adobe XD

You can also install several plugins to get more features in the Adobe XD and here is one example screenshot on "We Export" which is one of the option to export your prototype into HTML format. You can search and try several plugins as per your needs.

You can export HTML and CSS from Adobe XD

Note: All product names, logos, and brands are property of their respective owners.



1 comment:

  1. I really want to appreciate the way to write this article.
    It seems that you are very professional and intelligent on the above topics of writing.
    I enjoyed reading your article very much.

    No more waste time to searching #HDimages, #PCwallpaper, #smartphone_wallpaper, #socialmedia_banner, #socialmedia_image_post, #natureHDimages, and many more awesome pictures. Just visit All Awesome Pictures Only For Love Hearts and choose your best choice.
    All Awesome Pictures Only For Love Hearts

    ReplyDelete

Contact form

Name

Email *

Message *