October and November 2017 releases of Adobe XD
xd-mnemonic

Adobe XD is a vector-based tool for designing and prototyping user experiences for web and mobile apps. Switch easily from wire framing, visual design, interaction design, prototyping, previewing, and sharing, all in one powerful tool.

XD is made for all types of creators - UX/UI designers, interaction designers, experience designers, product designers, web designers, app designers, visual designers, entrepreneurs, and more.


New features in November 2017 (version 2.0) release

The November 2017 release of XD has some exciting new features. Read on to learn more:

Design Specs (Beta)

Designers can now share design properties of their files automatically. By publishing design specs, designers can provide developers key information like element height, width, size, alignment, relative spacing between two icons/elements, colors, and typography.

For more information, see Publish design specs for developers.

Developers can view the sequence and flow of artboards in addition to detailed specs for each artboard, complete with measurements, colors, and character styles.  

For more information on using design specs, see Use design specs published from Adobe XD.

Design Specs (Beta) in XD
Design Specs (Beta) in XD

Note:

Design Specs is currently a Beta feature. A feature labeled Beta means that:

  • The feature addresses a subset of use cases within a larger workflow (that is, designers handing off designs to developers).
  • We expect requests for additional depth and breadth in functionality which we’ll look to tackle before removing the Beta label.
  • The feature’s availability and delivery are subject to change.
  • You can expect the same quality and performance as you would of any other feature we deliver.

Layout grids

You can now define and use layout grids to help create a consistent, organized look within your design. Layout grids help you to manage relationship and proportion between elements. You can use them to define the underlying structure of a design and how each component in it responds to different breakpoints.

Layout grids in XD
Layout grids in XD

For more information, see Position elements on artboards using grids.

Export assets as JPG

You can now export assets and artboards to JPG using the File /Hamburger menu or the keyboard shortcuts Cmd+E or Ctrl+E. You also have the ability to control the export quality level (1-100%).

For more information, see Export to JPG.

Switch between point and area text

You can now switch a text object from point text to area text or the other way around with a click of a button in the Property Inspector. You can also toggle between point text and area text even if you have already created a text object. 

For more information, see Switch between point and area text.

Enhancements for XD on Windows

The following enhancements have been made to XD on Windows:

Pan and zoom with touch

You can now use two finger touch to pan and zoom the XD canvas on touch-enabled Windows 10 devices. This works in both Design and Prototype mode.

Copy and paste from InDesign

You can now copy and paste design elements from InDesign into XD on Windows 10.

Import SVG files with external linked images

You can now import SVG files with external linked files (either images or CSS files used to style the SVG) into XD on Windows.

Other enhancements

  • There are workflow changes to publishing prototypes, and embedding them in websites. For more information, see Publish Prototypes.
  • The eyedropper now appears inside the color picker. This includes all color pickers on the Property Inspector (fill, border, shadow, and grid ) as well as the picker that appears when you right-click to edit a color swatch in the Assets Panel. For more information, see Set stroke, fill, and drop shadow for objects.
  • XD now remembers the last used text properties such as character styles, alignment, and spacing. 
  • If any object in multiple copied objects fall out of the artboard when pasted, XD groups them before pasting to maintain the relationship between the objects.

October 2017 XD (version 1.0) feature summary

Design

Draw, reuse, and remix design elements faster with snap-to, measuring and positioning tools, typography, and masking tools that work the way designers think.

If you have Photoshop or Illustrator assets you can bring them into XD. You can also bring in raster graphics, colors, or character styles stored in your Creative Cloud Libraries.

You can also use design elements from UI kits that are linked from the product.

Design in XD
Design in XD

Here is a summary of XD's design features.

Fast, flexible, scrollable artboards

Lay out your designs for different screens and devices using artboards. You can choose from the available preset sizes or define your own artboard size.

Once you have created your artboards, you can populate them with your design objects. 

Align objects relative to their artboards, or align multiple artboards with each other, and distribute them across your canvas. You can also align objects to the grid.

Get pixel-perfect measurements between objects for accurate alignment of objects on the artboard.

Zoom in and out of objects in an artboard. XD offers multiple ways to zoom, and when combined with panning, you can quickly find what you need.

For more information, see Working with artboards and grids.

Design and edit objects

You can design and edit objects by combining shapes, masking, moving, resizing, rotating, arranging, aligning, distributing objects, and more.

Read on for more information.

Drawing tools

Create your designs using the Select, Rectangle, Ellipse, Line, and Pen tools. Use the Property Inspector to enhance your shapes. Choose border color and thickness, add fill colors, apply shadows, adjust transparency, and rotate.

For more information, see Drawing and text tools.

Boolean group editing

Create complex shapes by combining groups of objects using Boolean operators. For more information, see Combine objects.

Background and object blur

Quickly blur a specific object or an entire background to change the focal point of your design, giving it depth and dimension. For more information, see Add blur effects.

Color tools

Pick a color using hue, saturation, brightness sliders, entering the exact values, or sampling colors with the Eyedropper tool. You can also create and save color swatches to use in your designs.

Save time by using shortcuts for hexadecimal codes in the color picker. For example, typing #AB results in #ABABAB. For more information, see Set stroke, fill, and drop shadow for objects.

Text tools

Build your designs with effective typography to convey your message and improve readability. Easily adjust typographical elements such as font, alignment, character spacing, and line spacing with precise controls. You can also change the appearance of your text the same way you change other elements in XD (opacity, fill, border, background, and blur effects). 

For more information, see Text tools.

Copy/paste styles

Copy styles from one object and paste it onto another to apply all your appearance properties, including transparency, fill, border, shadow, and blur.

Bring in assets from other applications such as Photoshop or Illustrator

You can bring in assets from other applications in multiple ways:

  • Copy and paste artwork from other design tools such as Photoshop, Illustrator, or InDesign into XD. You can also bring in assets from web browsers. For more information, see Working with external assets
  • If you have assets stored in Creative Cloud Libraries, then you can bring those assets into XD as well. For more information, see Adobe XD and Creative Cloud Libraries.

Repeat grids

Select items in your design, such as a contact list or photo gallery, and replicate them horizontally or vertically — all your styles and spacing stay intact. Update once and changes are reflected everywhere. For more information, see Create repeating elements.

Manage assets and symbols

The Assets panel makes it easy to view, edit, and reuse assets across your design without having to manually hunt for them. Store all the colors and text styles used in your document in the Assets panel. 

You can also save and reuse objects by making the object a symbol. All symbols you create are saved in the Assets panel. Any change to a symbol gets automatically updated across all instances of the symbol in your design. 

For more information on symbols and the Assets panel, see Manage assets and symbols.

Linear gradients

Give your designs a more polished appearance using linear gradients. Linear gradients offer simple yet precise visual controls directly within the color picker. You can also import gradients you’ve created in Photoshop or Illustrator.

For more information, see Linear gradients.

Layers

Work faster and stay organized with a modern, contextual Layers panel that only displays layers for the part of the document you’re working on. You can also hide and lock elements quickly using the Layers panel.

For more information, see Work with layers

Export artwork, assets, or artboards

Export images and designs in PNG and SVG formats for iOS, Android, web, or Design. You can choose to export an artboard or individual elements. You can also share assets and artboards by exporting them as individual PDF files or as a single PDF file.

For more information, see Export design assets.

UI kits for specific devices

XD references high-quality interface elements to help you quickly design for iOS, Google Material Design, and Microsoft Windows devices. For more information, see Workspace basics.

Prototype

Adding interactions with intuitive visual controls allows you to test and validate how users experience your multiscreen designs. 

Create interactive prototypes in XD
Create interactive prototypes in XD

Create interactive prototypes

Add interactions, and animations to accurately test how users experience your design. Switch easily between design and prototype without leaving the app.  

Connect Repeat Grid cells from one artboard to another or even individual cells to different artboards.

For more information, see:

Preview and record interactions as movies

Record an MP4 file as you click through your preview to share with your team or stakeholders. You can also generate a link to your prototype to share.

For more information, see Preview and record interactions.

Note:

Recording prototypes is not supported in Adobe XD on Windows. However, there's a workaround. Press the Windows + G keys and use the native recorder to record the Preview window.

Share

Share and get feedback on your interactive prototypes in a single click by creating a web link and sending it to stakeholders for comments. Reviewers can view prototypes in desktop or mobile browsers, and log in their comments. You can also create multiple URLs from the same file to share different versions of your prototype with stakeholders.  

Share prototypes with others and get feedback
Share prototypes with others and get feedback

You can then close the loop on comments without deleting them by marking them as “resolved” to let reviewers know that their comment is addressed. 

You can also generate an embed code in XD to share your interactive prototypes on Behance, dribbble, or any other website.

For more information, see Share designs and prototypes.

Adobe XD and Creative Cloud Libraries

Adobe XD and Creative Cloud Libraries
Adobe XD and Creative Cloud Libraries

Apply design elements such as graphics, colors, and character styles from apps such as Photoshop CC and Illustrator CC with Creative Cloud Libraries integration. Libraries make it easier than ever to manage your projects.

In XD, Libraries are accessible from an independent, resizable window for quick browsing that doesn’t get in the way of your design surface.

For more information, see Creative Cloud Libraries in Adobe XD.

Adobe XD on mobile

Preview prototypes on mobile devices
Preview prototypes on mobile devices

Preview prototypes on the actual screens you’re designing for to ensure that your designs appear and feel the way you intended. Iterate and edit your design on the desktop and see them reflect on your device in real time.

XD mobile app users can also quickly access prototypes that have been created using XD on the desktop and saved in the Creative Cloud.

For more information, see Load and preview on mobile devices.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy