How to use Adobe XD CC beta version

What is Adobe Experience Design CC?

Have you ever imagine if you have a client that ask you to design mobile apps, website or anything else with interactivity and then traditionally maybe you are using illustrator, photoshop or event third party apps to design it, then you have to show it to a client’s and ask them to imagine if you will click this button it takes you to this page.

Then now, Adobe is building an application that actually lets you, not to only design it but actually put that interaction so your clients don’t have to imagine if they click this button it goes to other pages that can actually click and go to that page.

It’s not an app builder, it’s not a web builder it doesn’t write HTML, and didn’t write any code at all. It just basically allows you to create your design very similar to what you would do in photoshop or illustrator and then let you prototype or send your designs as a working model to your clients. That’s what Adobe XD is.

Let’s take a look at how it works.

    1. Create the new project.
      welcomescreen.png
      Welcome screen Adobe XD beta version

      You can start with a mobile phone with a prompt to default to an iPhone 6/7 but you can switch to different iPhone, you can switch to an iPad or Web or you can choose a custom size.

      The workspace is divided into two views, Design and Prototype. In the design view, you can use a number of tools and features to create design layout, add artboards and import resources from other applications.

      In the Design view, you can use a number of tools and features to create design layout, add artboards and import resources from other applications.

      In the Prototype view, you can link between artboards (pages) and define the relationship between them through interactions.

      Once it’s done, you can preview it by clicking the play button on the top right.

    2. Choose the artboard, for instance, iPhone 6/7.
    3. Setup the Welcome Page, click rectangle icon from the Tools panel on the right. If you want to make the round edge, click and drag the dot inside the rectangle. Click File > Import, choose any picture for your background.
    4. Build the content area, repeat the same step.
    5. Add the Content.
    6. Creating content.
      You can create multiple contents without duplicating them manually. Click Rectangle, then click repeat grid button in the properties panel. You can drag the grid to the right or bottom.ss_okinawa_grid.png
    7. Build the linkage between pages. In order to link between the pages, select the page, click on the blue arrow to the right page. The target floating menu appears; select the target page, and set the transition animation type (for example “Dissolve”). Repeat this step to link between the other pages.linked
    8. There are two main methods to preview it. First, is the preview feature within Adobe XD itself just click the play button. Second, you can preview it from your device connected via USB.preview.png
    9. You can record your prototype which allows you to record the flow between pages and save to .Mov format.
    10. Sharing the prototype.We’re done! Now we can share the prototype with other team members who aren’t necessarily using XD. Just click share and copy the link and shared between team members.You can see the sample from here

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s