Need to transform design to code? Don't hardcode it, Avocode it!
See how
August 3, 2016

What tools do you use to create new experiences?

Content Marketing Manager at Avocode.

"I write for those who want to be seen..."

No matter what language, tool or technology you use, as long as you are part of the digital industry you are here to do one thing: make sure that the user experiences at least something. At best - something pleasant. If you are one of the curious up-to-date designers, there is probably an Adobe Xd icon jumping in your toolbar by now.

Find out what's all the Xd buzz about

Let's put it bluntly. The recently launched Adobe Xd, earlier called as the Project Comet, is an early release. At first glance the Adobe Xd UI resembles Sketch in simplicity and overall minimal design (which is huge for Adobe, since their other tools are full of buttons which take some time to figure out). Here are some currently available nifty features:

1. Repeat Grid

Create a list view in seconds. No need to measure the distances or hand copy everything. The repeat grid let's you  create a gallery and import pictures in the order you had them stored in a folder. Just press import, and drag & drop the list of pics to the grid. No more manual importing one by one.

If you choose just one picture it will copy itself to all of the entire grid. And if your graphic is longer then the artboard, the content will become scrollable in the PLAY mode.

2. Import text

You can do the same thing with text. Once you import it it appears in the grid. If the copy doesn't fit, just adjust the grid to avoid overflowing. And here comes the cool part: imagine you are creating a new version of a website in a different language. Instead of rewriting the copy manually, you can use variables and link them to a particular text file. Then you can simply switch between different languages. Cool, huh?

Just drag & drop the .txt file.

3. Prototype

Creating something people want to touch and hold on to (without dropping their phones) is quite easy in Adobe Xd. You don't even have to write a single line of code. Add interactions by connecting individual artboards with strings, select and click the PLAY button in the right upper corner to see the real working app.

4. Share what you've got

You can use the PLAY mode to record the interactions and how the app works and save it in .mov.

You can publish any design via a link to the Adobe Cloud. You can either share the entire project or just one artboard. The shared design is clickable and the interactions work in the browser. If you open the link in a browser on your smart phone, you can taste how the interaction of the app feel.

When you edit your design, you just update the link and refresh.

BTW: How can you share a Sketch or a PSD design with people who don't have Sketch and Photoshop? Use Avocode and let people preview your design and comment on top of it easily in the browser.

What competition is out there?

There are some big guys in the prototyping area who look at Adobe Xd Preview as just a youngster. Well, the fact is that on it's way to maturity Adobe Xd will have to deal with tough competitors such as:

  • Sketch which has symbols. This is where Xd still has a lot of room for improvements.
  • Sketch Mirror which enables plugging in your iPhone and go through what you've designed on the smartphone's screen (not in a browser but on full screen).
  • Framer which “works just like a graphic design tool” while writing the JavaScript code for you and adding the animations. (How cool is that?).

What does the future hold?

We have information, that Adobe might roll out some new things in the fall:

  • A Windows version
  • Export for iOS automatically in 1x, 2x and 3x according to the display resolution
  • A better color picker and gradients (sooner than in autumn)

Be a part of the conversation

Let us know in the comments below what do you think about Adobe Xd and what prototyping tools do you use?

get guacamole
Free 3-in-1 UI kit
Are you a modern designer with taste? Get Guacamole
- a free UI kit  for Adobe Xd, Photoshop and Sketch.
Get a free UI kit
Available for: