Adobe Creative Cloud

June 13, 2017 /UX/UI Design /

June Update of Adobe XD

Header image includes work by Norah Park, created using Adobe XD

Summer is here! While taking time off from work to enjoy the warmer weather is always recommended, we know that good design never takes a vacation. That’s why we’re thrilled to bring you several new ways to speed up your design workflow on both macOS & Windows 10.

New on Mac and Windows

Symbol Overrides and Update All

As a UX designer, you build buttons, navbars, sliders, and many other types of components that are repeated throughout your design. Yet, your designs can change on a dime. Symbols save you time and help you stay nimble. With the June release of XD, you can now customize the text and bitmaps for individual symbol instances – giving you greater design flexibility. If the individual change you made should be applied to all instances of that symbol, you can select “Update All Symbols” from the context menu to make that change. For a quick overview of how Symbols overrides work, check out our tutorials (Go to 01:49 on the Mac tutorial, and 09:37 on the Windows tutorial).

New on Windows

Symbols (Including Overrides and Update All)

We’re excited to introduce Symbols on Windows 10. Access the Symbols panel by clicking on the icon in the lower left-hand corner of the application window or via shortcut keys (Shift+Ctrl+Y). To create a symbol, select an object on the canvas and click on the “+” in the panel, press Ctrl+K, or select “Make Symbol” from the context menu. The object’s highlight color will switch from blue to green, and the object can now be duplicated on canvas or dragged from the panel to create linked instances. Editing the shape, position, or style/properties of one instance updates all instances immediately. For more information on how Symbols work, go to 09:37 on the Windows tutorial.

Linear Gradients

With this release, you can now create and edit linear gradients within vector objects in XD. What’s more: you can easily bring in existing gradients from Illustrator with simple copy/paste commands, color stops and all. To create a linear gradient, select the object you want to apply the gradient to, open up the color picker, and select “gradient” as the fill type. A gradient will appear, based on the existing color of the object. You can add, select, move, and delete color stops on the bar at the top of the pop-up to customize your gradient. Modify each stop color and transparency using the familiar color picker and appearance controls.

Another way to work with gradients is directly on canvas. When you create a gradient by changing a vector object’s fill from solid to gradient, you’ll notice that a control line appears within the shape itself (on canvas). This control line allows you to position the gradient’s endpoints and angle. You can also add new color stops and reposition them by sliding them along the control line.

Have a great time building beautiful gradients, and share your work with us by tagging it with #MadeWithAdobeXD!

Layers Drag and Drop

We introduced layers on Windows last month, and are excited to introduce a follow-up enhancement that will extend the usefulness of the Layers panel: drag and drop. You can now change the z-order of the objects on an artboard from within the Layer panel. Simply drag and drop layers within the panel, and they will reorder directly on the canvas. The drag and drop feature is also a great way of adding new elements into an existing group (shown at 04:42 in our Windows tutorial). Let us know what you think of layers and what we can do to make them even more useful by visiting UserVoice.

Text Range Styling

With the June release, you can now create different text styles within both area and point text. Simply select the portion of text that you want to style differently and then use the property inspector to customize the typeface, size, character spacing, and color of the selected text.

Copy Bitmap to Clipboard

You can now copy from XD and paste into different applications. Select an artboard, an element, or group and XD will store it in your system clipboard as a bitmap for use in a host of other applications.

Every month means something new on XD, and we’ve got even more great stuff coming. Stay tuned, and keep building XD with us by telling us what you think on UserVoice, Facebook, or Twitter.

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 Experience Design 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 Gregory Bass - 7:27 AM on June 13, 2017  

    Cool! I’m looking forward to Grid System!

  • By Tommy - 7:39 AM on June 13, 2017  

    Great update guys, looks like Windows has finally caught up with Mac!
    Bring on new features!

  • By Antonio - 11:08 AM on June 13, 2017  

    As always, awesome progress the one you are making with Adobe XD month after month. Thank you very much for your efforts!

  • By Shian - 11:35 AM on June 13, 2017  

    No scrolling containers, no use 🙁

  • By Souheil Mechlawi - 11:40 AM on June 13, 2017  

    The “Update All Symbols” feature is getting confusing for me. Let’s say I used a Symbol on 4 artboards and then I modified the text in the symbol on one of the 4 artboards. Later I found that the original symbol needed to say something else so I made the change and hit “Update All Symbols”. Now the change I made earlier to the symbol on one of those 4 artboards will be replaced with the new text.

    I feel this is going to become a problem when my prototype gets a little big.

    Also having to remember to select “Update All Symbols” each time you make a change. I would have preferred to see the symbols automatically update unless you tell it not to?

    Have you considered to make the “Update All Symbols” only apply to symbols that have not been edited?

    • By Jonathan Pimento - 10:32 AM on June 15, 2017  

      Hi,

      Currently the default behavior for Symbol editing is overrides. Based on your workflow I understand that you like to have text and bitmap linked and make overrides explicit. I would recommend submitting this as a feature request on adobexd.uservoice.com

      Jonathan
      Product Manager – Adobe XD

  • By Arvid - 1:54 PM on June 13, 2017  

    Awesome stuff! Can’t wait for the next update 🙂

  • By Anders - 1:13 AM on June 14, 2017  

    Hi

    When can we expect horizotal Scrolling in XD? (Like on Netflix mobile)

    A

  • By Zohar - 5:21 AM on June 14, 2017  

    Nice!
    But you can only override the text and bitmaps, but what about style? if i want to build a flow showing hover states i have to create a new symbol for each without an easy way to replace a symbol with another maintaining it’s position.

    And we are all waiting on development tab, the new “Extract, it should be the number one feature, really all the rest are nice to have, without this i can’t work with developers and this is useless.

    Hope one day i can use XD…..

    But seriously Keep up the great work! 🙂

  • By Sadegh - 6:33 AM on June 14, 2017  

    Awesome… But don’t support RTL…

  • By alex - 8:45 AM on June 14, 2017  

    what about the code for the developers? This is an amazing application, but we can’t use it right now because the developers need a tool like avocode. I’ve heard that you guys are planing an integration with avocode, is it true?

  • By Eli - 10:27 AM on June 14, 2017  

    WOW, Sympols Finally on Windows 10

  • By Ralev.com - 8:36 PM on June 14, 2017  

    Thanks for all the progress and updates!
    I love Adobe XD.
    It’s just that we need gradients in Mac, too 🙂
    Also some kind of element animation in the prototype tab / preview.
    The biggest issues is with the export.
    Developers want PSD…

  • By Kowalski - 3:14 AM on June 15, 2017  

    Thank you so very much! Now I don’t have to carry my mac to work every day 😀

  • By restalize - 3:49 AM on June 15, 2017  

    we want compatibility with zeplin!
    btw for those who want to send guidelines to devs one trick i do is, export from XD artboards via SVG . then import the svg to sketch and send it to zeplin. svg can read nearly 90% of ui depending of what you used to create. all flats/colors/layout/fonts etc can read them , but some gradients etc isnt so precise.

  • By James - 3:55 AM on June 15, 2017  

    You can now add links in symbols which you couldn’t last month or ever before. This should be highlighted but what would be even better would be if when you linked something with a symbol, every symbol instance would have the same link. That would be a majorly good feature and until you can figure out how to do indidiual overides for links we could use transparent rectangles over the top as we have to do for text linking(?!).

  • By James - 4:52 AM on June 15, 2017  

    Text update is ok but a bit pointless if you can;t have differing leading for each of the text elements within one text area…?

  • By Daniel - 8:09 AM on June 15, 2017  

    Understandable that Adobe wants Windows 10 to match functionality with OSX. However, Adobe has spent most of 2017 on Windows 10, without significant feature/functionality updates to OSX. Your competition is rapidly catching up, and Adobe is losing ground to Sketch. Isn’t it time this year to dedicate more development efforts to major new functionality in XD?

  • By Anthony Delserro Jr - 9:40 AM on June 15, 2017  

    We need Fixed Nav – both horizontal and vertical. We’re also waiting for sticky spots to create better modern navigational functionality during prototyping.

    would love more than a few mobile slide actions if possible – Hover states, several animations for micro interactions.

    A way to integrate with dev would be great. I heard something about you guys teaming up with Avocadode. What about InVision? InVision lets you currently upload layered PSD files.. I would love to be able to do extensive prototyping elsewhere by uploading the XD file and getting the same layered treatment.

    Also – we want to be able to gradient text.

    One major problem I’m seeing when distributing UI design to my dev team, is that your Background Blur (or Frosted glass effect) is not conduscive to the coding environment CSS. Code needs to blur an image itself an object – its not possible to just blur everything behind an object in code (i.e. a background homepage which includes text – and a pop up overlay menu that has the “background blur” affect to keep that area masked. There’s no way to do that in code from what I understand, without flattening the image behind it and blurring the actual image. Tell me if I’m wrong but is this something that can be done in Swift? A lot of browsers are not supporting this feature yet.

    I’m having my entire team work on XD instead of Sketch because my faith is with Adobe that you guys will get this going quicker to meet UX design needs and criteria. I rather wait than go to Sketch which is built on third party plugins. Please make updates soon! <3

    • By Juan - 9:37 PM on June 22, 2017  

      totally agree!! we need fixed elements and hover actions

  • By Dave - 12:48 PM on June 15, 2017  

    This is great stuff! Still waiting to be able to underline text – having to create a vector line to represent links and change its’ placement any time the text size/content/weight is changed is the bane of my existence when using XD still.

    It’s starting to shape up to be a great product though!

  • By Nussi Einhorn - 5:32 PM on June 15, 2017  

    Looks like there is some new manager. Is that true?

  • By Designer and developer - 12:16 AM on June 17, 2017  

    Is there any export My work in html, CSS and JavaScript so i can continue developing the app i designed in Adobe xd? I dont whant to remake eveything again in coding waist of time.

    Let me know what is the plan?

  • By ml.wang - 7:23 PM on June 18, 2017  

    Urgent need mobile preview, my device is iphone6 device

  • By Chad - 6:55 AM on June 19, 2017  

    Now that you’ve caught Windows up to the party, can we start getting some of the high-demand features going? Some have been in-progress for a year now. I’m just anxious to get this on to the next level! 🙂

  • By shlomi taboch - 1:22 AM on June 20, 2017  

    very hot , but pls add rtl support

  • By Tomas Tarshis - 3:51 AM on June 20, 2017  

    Please tell, how many months more it will take for Windows version 2 become fully in sync with Mac, so we can finally c the in-container scrolling.

  • By Hugo Tognolo - 8:42 AM on June 20, 2017  

    Hey guys!
    What happened to the exporting feature? After this updated my artboards are getting renamed with numbers when I export them, why did you add a limit there?
    This is a huge step back, every designer uses the artboard names to organize the wireframes folders, we need to export the files as we name them on the software.
    That’s not a good user experience =/

  • By Michael - 11:19 AM on June 20, 2017  

    Gradient support on Windows… THANK YOU!

  • By jatinder - 10:10 PM on June 23, 2017  

    Please provide the ruler option.

  • By Holm - 1:37 AM on July 3, 2017  

    No file history anymore!!

    Hello since that last update the file history fails completely on MacOS. Is this a bug or a feature?

  • By Emanuele Sabetta - 9:22 PM on July 3, 2017  

    Still no option to preserve element names as xml attributes in the exported svg file! Why? The biggest strenght of AdobeXD is in the SVG output. I can design a website and use the svg assets directly in my project as UI elements. The only problem is that it lacks an option to name elements and symbols and to preserve those names as xml attributes in the exported svg file. Selecting those manually every time is a waste of time. Using names would allow to update assets in projects automatically when you edit those in AdobeXD.

  • By Alex - 7:13 AM on July 10, 2017  

    That’s great!! The only reason we are not using adobe XD at work is due to the lack of password protecting the shared document (the most important feature). will this be coming anytime soon? At the moment we are using Invision and we really want to switch to Xd. I am guessing that this feature is highly requested, so any update on this matter?

  • By Alamin Hossain - 10:51 PM on July 10, 2017  

    I’m feeling the need for stroke and text gradient.

  • By Rodion - 5:59 AM on July 13, 2017  

    My colleagues and I looking forward to grid system and code workflow.