Adobe Experience Design CC (Preview) First Impressions
The day has finally arrived where it *seems* Adobe has released a prototyping tool to stick around:
“…we are releasing this Preview to invite the full design community to join the thousands of existing pre-release customers to share their feedback, ensuring that designers give critical input into the evolving product features.”
Adobe is smart to invite the design community to offer up their own experiences while testing Xd. Google did it with Material Design, and the outcome has been a series of exceptional improvements since its release.
Adobe Xd currently supports the following file formats: JPG, GIF, PNG, TIFF, and SVG. Users are able to import these file formats, but also have the ability to copy+paste objects in from Adobe Illustrator (vector) and Photoshop (bitmap). Users can copy+paste images from the browser (drag+drop to come) and drag in photos from Finder as well.
Designing Within the Program
Copy+paste in Place on Artboard
Everyone knows that each Adobe program has a different shortcut command to copy+paste in place (Photoshop = cmnd+j, Illustrator = cmnd+shift+v, InDesign = cmnd+shift+opt+v, etc. etc.).
Behold, in Adobe Xd, one does not have to use an entire hand of fingers to copy+paste an object into place on an artboard. Simply click on the artboard, give the keyboard the ol’ cmnd+v, and voilà! There it is: ingenious, uncomplicated, and logical.
The repeat grid feature is designed to be a major time-saver, and once all the kinks are worked out (see dissenting criticism further down), I foresee this tool being one of the most important hallmarks of Xd.
There are a couple of options to do this, but both are quick & a breeze. The user can select the artboard (by clicking on the artboard title) and opt+drag—fairly standard. However, once the artboard is selected, a simple copy+paste will duplicate the artboard directly to the right of the native board.
I don’t think I have to make a case for smart/snap to guides. Although for those of you that don’t like to use them, I haven’t found a way to turn them off—sorry!
The guides in Xd are a cut above the rest, because not only do they appear as color-coded helpers, but they also include pixel dimensions, allowing for a better, faster, stronger design workflow.
Hiding Unnecessary Information
Another great feature in terms of design workflow is the concealment of elements that fall off of the artboard. No longer does a user have to create a mask to contain all of the elements within the artboard—Xd does it for you! It eliminates an extra step, in addition to the extra clicks one must take in order to get back into a layer mask to edit internal elements, saving not only time, but also performance within the program.
Incongruities & Glitches
Masking photos: dragging into shapes vs. masking with shape
The options to mask a photo inside of a shape seem to produce an identical result (see below)…however, they do not.
As we dive under the surface, we can see that there is a major difference between the two masked photos. The first photo, the one in which I dragged the file into the circle from Finder, is not editable. A user is able to edit the circle, while in turn warping the photo. The second option, in which the photo is masked with the shape (select both objects, shift+cmnd+M), produces a result in which the original photo can be resized, transformed, rotated, etc.
Repeat Grid (padding, adding more photos)
The repeat grid feature has a lot of potential, as said previously; however, there are some definite issues.
The default padding is a comfortable 25 px (below,left). After reducing the padding to 0px (below, middle), and then continuing to increase the padding back up (below, right), we can see that the numbers corresponding to the photos have changed, and are no longer actual measurements.
Another issue I found with the repeat grid (maybe this is just me being picky—you can roll your eyes at me, Adobe), is the *partial* lack of ability to easily edit the photos within the grid.
The behavior of the repeat grid as it stands right now is:
- The user creates the area of the repeat grid
2. The user inserts photos into the grid (in whichever manner they choose to do so, as there are multiple options)
3. The user extends the grid using the handles
4. The next photo that shows up in the grid extension is a repeat of the first photo in the grid (below).
In this example, I created a grid that contained four separate photos (above). I realized after importing the photos into the grid that I still had some space at the bottom, and needed to extend the grid further in order to convey that the grid continues below the visible screen, and needs to be scrolled in order to see more.
I extended the grid using the handle at the bottom to create another level to the grid. The grid populates a copy of the first photo to place in this new space, and so on… This seems visionary on first glance. The problem arose when I tried to import a new photo into the new section.
Because the new section is a copy of the first, whenever it is edited, the native photo also changes. The only way to change the grid from four distinct photos to five, is to replace all of the photos at the same time.
As of right now, users just need to plan ahead. Import as many photos as your foresee using into the repeat grid (within reason), so when the grid changes or is extended, you won’t have to go back and continually replace the photos to match your liking.
Prototyping Within the Program
There are only a finite number of segues that the user has the option to choose from when transitioning from one artboard to the next: slide left, slide right, slide up, slide down, dissolve (below).
There are pros and cons to having limited choices. On one hand, the paradox of choice is at the forefront of our current societal conversations. Less is more. Turn the penny over, and having more control over animation within a prototype can be remarkably beneficial while conveying a concept accurately to clients.
Fast & efficient
Adobe has created a prototyping tool that marries clean, relatively easy-to-follow design with an urgency many of us have when we want to see what a static design would actually look like (and its capabilities) when realistically applied to a user and a screen.
Right now, the learning curve for the program is similar to a 100 meter sprint. It takes a little time at the beginning to prepare and become familiar with the program, but once you get it, you are unstoppable—and the entire process doesn’t take very long.
The tools within the program reflect similar styles to other programs created by Adobe (Illustrator, Photoshop, InDesign), so for anyone that has used these other tools already, it is reasonably painless to catch on.
Sharing is effortless
Something to keep in mind when creating a prototype is how the final package will be delivered. Luckily, with Xd’s streamlined sharing option, you don’t have to do too much thinking. In the Share Online popover (below), the user has the ability to change the name of the prototype, add a cover thumbnail image, see which artboard the home screen is tied to, update the link (already created and sent out previously), create a new link, or manage existing links.
Tentacle connections are a plus
Tentacle connections are an accelerated avenue to visually connect transitions between artboards and the elements on them. Adobe has made them easy to edit, whether it be switching the connection, or altering the minute transitions within each tentacle. When the user clicks on the artboard, all connected tentacles show up on the screen (above), creating a macro view of the prototype, which can be useful.
While testing out Xd on my own terms, I was yearning for the ability to include master elements. I needed a top navigation that wouldn’t slide left in transition. I drooled over scrolling only a portion of the screen, instead of having the single option to transition the entire area. Hopefully this will be an update in the near future, but for now, I will patiently wait. And yes, it would also be helpful to integrate elements from our CC Libraries.
The Icon that is going to throw every designer off when they access Xd via their Dock (because not everyone cmnd+tabs).
Agree or disagree, the uncanny similarity between Adobe Experience Design’s and InDesign’s dock icons trips me up. After first downloading the program, I clicked on my InDesign icon just as much as I clicked on the Xd icon, accidentally, wasting time. Why not keep it blue, similar to Project Comet, one of Xd’s early evolutionary states?
The similar colors and identical “d” are not visually distinct from one another, causing easy confusion when switching programs (above).
Apart from the program itself, I am interested in the effects of the way in which Adobe is releasing Xd.
At first, I was extremely critical of Adobe for releasing such a trivial prototyping program. There are so many other options out there that are much heartier and offer more in terms of a final product.
However, those types of programs are typically catered to a more intermediate/advanced crowd, rather than beginner. With Xd, almost anybody can jump in and begin creating a prototype. The interface is friendly, streamlined, and includes countless avenues for online help. It’s not daunting, and a user doesn’t have to put more than a day’s effort into learning the program.
What is most interesting to me is how this genre of prototyping program evolves into something more technical, and (assuming its users that have been utilizing it from its inception and updating their knowledge in parallel with the monthly updates) how this gradual release of information affects the depth and retainment of knowledge in how to use Xd to its full potential.
Since writing this, Adobe has made significant strides in releasing monthly updates.
Here they are:
Support for Grids : “With this release, we are allowing you to set a custom grid on any artboard. The option to add a grid was one of the top voted features on UserVoiceand we used this feedback to prioritize it. The grid allows you to set up standard spacing across your design enabling more precise layout and drawings. When a grid is enabled on an artboard, objects will snap to the grid.”
Text Enhancements : “This build allows you to adjust the line spacing for an area text component using a control in the properties inspector. Many customers gave us the feedback that this was essential for design. Over the next few updates, we will continue enhancing our text properties to provide additional controls over its appearance.”
Design Enhancements : “In the first preview, you could edit the radius of the four corners of a rectangle. You could also edit individual corners via a “alt” modifier. The update now includes the ability to change the corners in the property inspector. To do this, click on this button, in the Appearance pane. This will bring up four fields that you can edit individually giving you a more discoverable way to edit individual corners.
Another productivity feature added in this build is the ability to quickly select anchor points for any path using marquee selection.
You can also access UI Kits from the File menu now! Just go to File -> Open UI Kit.”
Drag & Drop Assets : “In this build we added the ability to drag and drop images from the browser into your XD design. This should help you get assets onto your canvas more quickly.
Further, you can drag plain text files into XD designs to immediately create an area text or populate the text controls of a Repeat Grid. This method of adding custom text to a Repeat Grid should save a lot of time and maintenance of content.”
Support for Embedded Images : “If you copy/paste from Adobe Illustrator or import SVG, we will now bring in embedded images. This should increase the fidelity of artwork brought into XD from other sources.
In addition, we have added an option to embed or link images when you choose to export SVG.”
Sharing Improvements : “With this update, we now offer you a way to share multiple versions of a prototype with a stakeholder. To do this, you can:
- Click on the Share Online icon.
- Create a link by clicking the “Create Link” button.
- Make modifications to your design for a second version.
- Click on the Share Online icon again.
- Choose “New URL” to create a new public URL.
Now, you will have two public URLs each with a different version of your design.”
Color Picker with Swatches : Building any application from scratch involves building a solid foundation, followed by all the basic tools. And that takes time! Not only implementation time, but a lot of work before that: research, empathy, brainstorming, prototyping, testing and validating, and iteratively. So after iterating on this process, we are happy to present our brand new color picker with swatches. To use it, just select a vector shape, click on the color box and pick a color. You can use HSB (Hue, Saturation, Brightness) values or the sliders to adjust color ranges and transparency (alpha channel), as well as save your favorite swatches by clicking on the plus icon. To remove a swatch, just drag it out of the panel. Gradients will be added soon, but in the meantime, you can copy vectors with gradients from Illustrator and paste into XD.
Text Improvements: Sub-Range Styling: As part of the improvements to the brand new text engine, you can now select a portion of text and change its font, size and character spacing. Just select the range of your text and use the Property Inspector to change its properties. Changing the color of sub-ranges of text is coming soon.
Selecting Multiple Artboards & Grids: As part of the work on Artboards, you can now marque select multiple artboards or click on their titles holding the shift key, then activate and edit the Grids using the Property Inspector on the right.
Aligning Objects or Groups to Artboards: In previous releases of Adobe XD, you could use alignment tools to align objects in relation to each other. Now, if you select one object or a group of objects, you can use the same alignment tools to align it to its artboard. If you select multiple artboards, you can align and distribute them.
Scrolling: Scrollable Area is the most requested feature on User Voice, and we heard you! As a first step towards enabling the creation of scrollable content within prototypes, you can now scroll long artboards. To use this feature, just create an artboard using a preset template (such as iPhone 6, iPad or Web 1920, either from the start screen or from the list presented when using the artboard tool) and extend its height. You will then see a dashed line representing the fold. If you test your prototype using the Preview window or the Web prototype, you will be able to scroll. Adjusting the fold, fixed elements and horizontal scrolling are in the works via scrollable viewports. Stay tuned!
Fullscreen for Web Prototypes: Sometimes you need to present or test your prototypes without distractions. For that, we now have full screen for the Web prototype. To enable it, just click on the full screen icon on the top right. To exit, just press the escape key (Esc).
June 2016 (Now available in French, German, and Japanese!):
Measurements: We’ve been hearing from the community that handing off assets to developers is a critical part of your workflow. We began with generating production-ready assets for your mobile and web workflows, and now we’re providing the first in a series of features aimed at giving developers the information they need to implement the designs pixel-perfect (or, dare I say, “point-perfect”).
Measurements work like a physical ruler on a desk. Select any objects on the canvas, and it will provide you horizontal and vertical distances between them, no matter where the objects are in the hierarchy.
- Hit Alt/Option with any object selected. XD will display a distance from the object’s edges in relation to the artboard. This is very useful if you are setting up constraints or positioning the object relatively based on a different edge, like bottom/right.
- Select an object, hold Alt/Option and roll over another one. XD will display measurements in relation to the second object.
- XD supports measurements relative to a container if the object is contained visually within another.
- When objects don’t intersect on the same axis, we show helper guides and distances relative to them.
- When object is rotated, we calculate the distance from the rectangular bounding box and display it around the object.
- You can also see the measurements while nudging. Just hold Alt/Option and nudge at the same time. Position the mouse on the objects towards you want to see the measurement.
Background Object Blur: We’ve been hearing from the community that handing off assets to developers is a critical part of your workflow. We began with generating production-ready assets for your mobile and web workflows, and now we’re providing the first in a series of features aimed at giving developers the information they need to implement the designs pixel-perfect (or, dare I say, “point-perfect”).
With this release of XD, you can now apply blur effects to any shape or text.
XD supports two kinds of blurs:
- Object blur, which blurs the object itself
- Background blur, which blurs everything below the object
Object blur applies a blur directly to the selected object. You can control the blur amount with the slider.
Background blur helps you highlight a specific part of the UI while keeping the focus in the same visual context. This effect is commonly used on iOS, macOS and Windows.
Background blur offers three different settings:
- Blur amount
- Brightness (from dark to light)
- Opacity (additive to the element’s fill opacity)
Embedding Prototypes into a Website: In addition to sharing links, you can now embed your prototypes within a website. This also allows you add your prototype to Behance so that anyone can experience them in the context of your project.
As soon as you switch from Link -> Embed, XD will provide you an iframe HTML snippet.