Adobe Creative Cloud

November 14, 2017 /UX/UI Design /

November Update of Adobe XD

Header image includes work by Boosted Boards, created using Adobe XD

From talking to our users, we’ve heard very clearly that you need more capabilities in XD to turn your ideas into experiences across multiple devices and platforms. That is why we are excited to introduce several top requested features that make it easier to design as well as communicate your ideas faster.

Want to see these updates in action? Check out AdobeLive from Nov. 14-16 to see top UX designers using the latest features in Adobe XD.

Design Specs (Beta)

In conversations with designers around the globe, you’ve reinforced the idea that design is only one part of your process of making an idea become an experience. As seen by your requests in Uservoice, moving from a concept to a design to a prototype to production often requires coordination with different people, including developers. Once you’ve completed your design process, communicating your intent to developers is often slow and manual.

That is why we are introducing a new beta feature, Design Specs (Beta). Now, you can publish a public URL of your experience that your developer can use to inspect flows, grab measurements, and copy styles. You no longer have to spend time authoring specs to communicate positioning, text styles, or fonts to a developer. As always, we’re focused on delivering features that speed up your design process and hope this feature saves you a ton of time.

You might be wondering about why we’re labeling Design Specs as a Beta. This feature is an early look at improving the communication between designers and developers. While Design Specs (Beta) should rapidly improve your workflow, this is only a start. Many of you have already let us know that you need additional functionality, like code snippets and asset extraction, to better support the designer to developer workflow. We are working on enhancing Design Specs and we are eager to receive your feedback.

While we continue this work, we will keep the “Beta” label. Even with the feature being in Beta, you should expect the same quality and performance as you would of any other feature we deliver in XD. For more info on Design Specs (Beta) and how we define a Beta feature, check out this helpful guide.

Design Specs (Beta) is also only available in English, but we are working to make it available in all languages supported by Adobe XD soon.

Layout Grid

Grids and layout systems are part of the heritage of design and are still relevant in the multiple screen world. While Adobe XD already supported a square grid, you told us that what you really need are layout grids with columns, margins and gutters. With our new Layout Grid feature, you can now achieve a consistent, organized design and manage the proportion between elements.

You can turn them on/off using the property inspector or using the keyboards shortcut (Shift+Cmd+’ on Mac and Shift+Ctrl+’ on Windows) and also customise the grid’s color and opacity using the color picker. The margins can be set equally (linked) or defined independently (unlinked). All attributes (number of columns, gutter and column widths, and margins) are automatically updated based on what you enter.

Once the layout grid is set on an artboard, elements you create snap to it (similar to how square grid currently works).

With Layout Grid, we strived to strike the right balance between simplicity and customization. We look forward to hearing your feedback and seeing your experiences come to life.

JPG Export

To achieve your vision, you often need to share your assets in SVG, PNG, and as many of you requested, JPG format. With this release, you can quickly export artboards, elements, and images in JPG, all with the ability to adjust export quality.

Improvements for Windows 10

With contextual layers and smart zooming, you can easily navigate to a specific area in a design. However, sometime you may want to pan and zoom to an area right in front of you. With this release, you can now use two-finger touch to pan and zoom the XD canvas on Windows 10 touch-enabled devices. This works in both design and prototype mode. We hope this feature helps you to design even faster.

Additionally, your workflow may include bringing assets into XD. You can now copy and paste elements from InDesign into your design as well as import SVG files with externally linked files.

Text Enhancements

Adding simple language in your design to communicate to your users can be challenging. We have added two new features that make the process of adding and updating text faster and easier so you can focus on the content.

First, you can easily switch from point text (text that flows as far as text exists) to area text (text that is forced to fit into a specific area), and vice versa, with a simple click in the property inspector.

Second, you can reuse your last used text properties such as font family, size, weight, alignment, and colors on any text elements that you create. Even if you switched to another tool or prototype mode, XD remembers what you had previously selected.

While writing good copy can take several iterations, these two enhancements will help you iterate faster.

Additional customer-driven enhancements

There’s more as well! We are excited to share these latest updates which address some of the features and enhancements requested on UserVoice, social media, and in-person meetings, which include:

Eyedropper available inside the color picker

Now that the eyedropper is in the color picker, you can use it to grab values for gradient color stops and your swatches in the asset panel.

Email notifications on commenting activity

Anyone commenting on a web prototype will now get email notifications when there is activity on threads in which they contributed. Owners of a prototype receive email for all activity. Email settings can be changed to not receive notifications or receive a daily digest, as well.

UX Community

We’d love to continue the dialogue! You can follow our handle @AdobeXD for updates or reach the team on Twitter using the #AdobeXD. You can also talk to us using Facebook, where we share videos and updates as well as answer questions during live sessions.

Meet some UX designers who have used Adobe XD. Learn how they got started in UX design and their creative process; check out some of their work and listen to their favorite tunes.

#MadeWithAdobeXD

While sharing your prototypes on Behance, don’t forget to tag them with #MadeWithAdobeXD and select Adobe XD under “Tools Used” for the opportunity to be featured in the Adobe XD Newsletter.

UX/UI Design

Design. Prototype. Share. All in Adobe XD.

Go from idea to prototype faster with Adobe XD, the first all-in-one tool for creating and sharing website and mobile app designs.

DOWNLOAD

Join the discussion

  • By Lazy Pirate - 9:52 AM on November 14, 2017   Reply

    The new features are really great and I see how you move forward.

    2 Cents on the Grid:
    – Context: I work a lot in Frontend. So how Grids usually work, is on a percentage basis. This is where my requests come from.
    – Percentage based Column widths: Define a max Grid width.
    – Nested Grids: Select a Container and create Grid the same way, as on the Layout. This would enable us to create correct nested Grids

    As reference: I used to work with GuideGuide to accomplish this in the past. You could draw a selection and create the grid with your presets (margins, columns, gutters – leave column width empty) and it would distribute it correctly.

    • By Joe Schmo - 6:02 AM on November 15, 2017   Reply

      I agree with you on these. A few updates that would really be beneficial are:
      – As stated, Define a max grid width, not based on the width of artboard container.
      – Ability to align grid (center).

      Also, rulers with guides.

  • By Twittler - 1:47 PM on November 14, 2017   Reply

    love it

  • By Jaydev Patel - 9:16 PM on November 14, 2017   Reply

    Great to see new Update!
    Extremely waiting for more prototyping features like Invision, Framer & upcoming Invision Studio.

  • By Tyson - 9:43 PM on November 14, 2017   Reply

    This is the absolute best update yet. So amazing. The design specs alone just allowed me to completely eliminate InVision, Sketch and Craft from my workflow. Thank you Adobe!

    • By Harish - 7:49 PM on November 15, 2017   Reply

      So good to hear … Glad about that

  • By Stephan - 9:43 PM on November 14, 2017   Reply

    I was very delighted by the color picker, works better than i expected!

    Biggest win in coming updates would be more text options like underline/all caps. And multiple symbol states, i just love how smart objects and layer comps work in Photoshop. (Already voted for in the forums).

  • By Tomas Tarshis - 1:51 AM on November 15, 2017   Reply

    At this point it is useless 2 write about the most requested features, that r being constantly postponed. Some of the devs here accidentally spilled the truth, by saying that independent blocks with scrollable content inside, is a troublesome to develop feature, because of the render engine that is being used in XD. So I guess that’s it. No more hopes for bright future with XD)). It will be only decorative add-ons and no core functionality updates. It’s a pity.

  • By James - 2:21 AM on November 15, 2017   Reply

    Hi,

    Love the layout grids, they are a little odd as some users have pointed out but functional.

    My problem comes from the process of creating layouts, say, for example i have a gallery with one large image at the top and then a row of square thumbnails below it. The problem is the amount of thumbnails does not necessarily match up with the amount of columns in my layout grid.

    On indesign i would begin drawing a box and then use the arrow keys to create a row with my preset margin between them, now i have to use the repeat grid and it takes a lot of trial and error to get the thumbnails the right size.

    This is probably the last feature that i’m missing before i can make the switch from indesign to XD for prototyping!

    Thanks – James

  • By Josh Mendenhall - 7:40 AM on November 15, 2017   Reply

    thank you, thank you!

  • By Miraze - 8:25 AM on November 15, 2017   Reply

    Great! Finally waiting is over.

  • By Kleberti´o - 9:28 AM on November 15, 2017   Reply

    The Keyboard Shorcuts are not working correctly with german keyboards and language.

    – The shortcut of the new grid feature (ctrl+shift+’) doesn’t work at all.
    – The shortcut of the old raster is on german keyboards (ctrl+ü) instead of (ctrl-‘)
    Please note: Apostroph ‘ is written on german keyboards with shift+#

    And there is a mistake in the german documentation. The new grid feature has there the shortcut Ctrl+Tab?
    https://helpx.adobe.com/de/xd/help/keyboard-shortcuts.html

    When i am switching to american english keyboard layout then i get following result:
    – The shortcut of the new grid feature still not working
    – The shortcut of the old raster is working with ctrl+ä

  • By Pierre - 1:57 AM on November 16, 2017   Reply

    Hello ! Nice update !
    When the feature for import PSD files into XD ?

    Soon I hope !

    Thanks a lot !

  • By Michael - 7:25 AM on November 16, 2017   Reply

    Great update. Still wondering how we don’t have more control over borders yet considering this is for web prototyping. I need to ability to set border left, right, top, and bottom individually.

  • By Weston - 5:22 AM on November 17, 2017   Reply

    The new features are great (especially Design Spec). Two killer features that I feel should be a core focus to solidify XD as a go-to design tool:

    – Hover transitions for Prototype
    – Blocks that can scroll independently of the artboard

Join the discussion