Update Roundup : Adobe Experience Design CC

The new Line Spacing feature is highlighted in the Properties panel.
Line spacing just made life a ton easier for desktop, mobile and app designers and developers.

When I first wrote about  Experience Design I mentioned the team responsible for it had a pretty robust update schedule. It looks like they have delivered. About one month after kicking off the Preview Release an update to the application has just been released. If you have a CreativeCloud account you can get it by clicking on the Gear icon in the CC app and selecting Check for app updates. Otherwise you can pick up a free copy of the preview here.

 I have to admit this update to Experience Design is a pretty ambitious one. It addresses many requests on the forums and contains a couple of rather interesting surprises.

So what’s new:

Grids:

The foundation of web and mobile design is a grid. For example Google’s Material Design specification clearly states: “All components align to an 8dp square baseline grid for mobile, tablet, and desktop. Iconography in toolbars align to a 4dp square baseline grid. “ In the preview release of XD the ability to accurately align content to that specification was non-existent. This is no longer the case.

When you add an artboard to an XD layout the properties panel now sports a grid area. In this area you can change the colour and opacity of the grid and you can change the the value used for the grid squares. The default value is is the 8dp grid square called for by Google but you change that number to any one you choose.

As well, you can turn the visibility of the grid on or off for any selected artboard. What really makes the grid so important is that any item placed on the artboard will snap to the grid when you release the mouse.

Line Spacing:

When I wrote the first XD “Quickstart” I said : This is the weakest link in the lineup but I suspect it will become quite robust over the next few months. Use this one to add single lines or multiple lines of text.” I can now report that statement can be officially withdrawn.

My issue was the inability to apply line spacing to a block of text. When a block was added one was stuck with, for want of a better description, single-spacing. There was no way to “air out” text blocks or to have the baselines sit on the grid. This update addresses that issue big time.

When you add a text block to an artboard the Text Properties light up and a new Line Spacing control appears right beside the Character Spacing control. Enter a number and the selected lines space themselves out. You don’t even have to type a number. Select the value and use the Up or Down Arrow keys to increase or decrease the value.

One other nifty feature is the ability to drag and drop text files on to selected artboards and into Repeat Grids. No longer do you have to manually enter the text or copy and paste the text from a Word processing document. Just keep in mind these files need to be in the .txt format.

Design Improvements

When you drew a rectangle or square on an artboard you could drag one of the circular corner handles while holding down the Option key to round off that particular corner. The problem was graphic designers also prefer to do it by-the-numbers. Now you can. When you select a rectangle or square a new button – Different radius for each corner - appears in the Appearance area of the Properties Panel.

As well four input boxes appear when you click on it. Each box relates to a corner of the object The first two boxes control the Upper Left and Right corners and the other two control the Bottom Right and Bottom left corners respectively.

Another little treat is the ability to marquee the corner points which make the quick selection of these points a lot more efficient. Then it gets better. One of my “pet peeves” involved the UI kits. To grab an item from a UI Kit  you had to open a new document, open the kit, copy the item and then return to the working document to paste it in.  No longer! The File menu now sports a new item named “Open UI Kit”. You can choose the kit you want, it opens, you grab what you need and then close the kit to return back to your working document.

One final design improvement is a complete surprise.

You now have the ability to to open a web page in XD and, if you see an image that fits the design, drag and drop it directly from the web page into XD. This is especially useful for those circumstances where the prototype requires an image from a web page where the asset simply isn’t available.

There is a lot more to this update but I have covered off the major points. For a full run down of all of the changes check out the April Update of Adobe Experience Design CC.