February 2018 Update of Adobe XD
We want XD to help you design at the speed of thought, which is why we added a performance boost to zooming, as well as enhancements to color and export capabilities last month. We also made it easy for you to integrate workflows with 3rd party integrations that you depend on to get the job done.
This month, our release delivers streamlined vector workflows between Adobe Illustrator and XD along with a new way to express creativity on Windows using pen and touch.
Do you use Illustrator to design icons and vector artwork? We made working with Illustrator and XD a lot easier with linked vector graphics. Linked vector graphics enable you to bring in vector content from Illustrator into XD. Make edits to your work in Illustrator and have them seamlessly update in XD.
It doesn’t stop there. One of XD’s core principles is build on the latest platform and leverage technological advances that hardware can offer. On Windows, we are thrilled to announce that XD now supports basic pen and touch gestures.
We are always looking for ways to improve the features we’ve shipped. This month, we made enhancements to the eye dropper and scrolling.
Vector Graphics in CC Libraries
The promise of Creative Cloud is to enable you and your team to work efficiently between different CC applications. You often have assets like icons, illustrations and other vector artwork that you create in Illustrator but wish to reuse across applications like XD. Using vector graphics you can now reuse vector content from Illustrator and Adobe Stock with XD.
Inserting linked vector graphics
You can drag and drop a vector graphic from the CC Library window onto the canvas to place it as a linked vector graphic. Once you drop the graphic, you see a blurred preview with a spinner while XD performs a little magic trick to convert it to a fully scalable linked vector. Once that is complete, you will see the graphic which can be resized and rotated.
Updating linked vector graphics
The key value of using a linked vector graphic is to reduce the overhead in making edits in Illustrator and then re-importing the graphic in XD. With linked graphics, you can right click on the thumbnail in the CC Library window and select edit in the context menu. This will open the graphic in Illustrator and allow you to make edits to the graphic. Once you’ve completed editing your graphic hit save in Illustrator and watch those changes magically apply to the graphic in XD. This is a huge time saver while working between Illustrator and XD.
Unlinking and editing vector graphics
There might be instances where you would prefer that the linked graphic no longer get any updates from Illustrator. To unlink it, click the unlink icon in the top left corner of the graphic or use the unlink option in the context menu. Once unlinked, you can edit different properties like the fill, stroke, and path in XD.
Tip: Did you know that you can use your mobile device to create vector shapes to use XD? Learn more about Adobe Capture.
Preserve Scroll Position
You now have a simple way to communicate a change to a specific area of a screen for which you earlier had to scroll to view.
Prior to this release, if you scrolled through a screen and clicked on a wired object, the prototype moved you to the top of the next screen, instead of maintaining your scroll position on the previous screen.
While wiring objects in the prototype mode, you can now choose to preserve scroll position, which allows the prototype to transition to the next screen while maintaining the position from the previous screen.
Pen & Touch on Windows
As the design industry evolves, the needs of designers and the platforms they work on evolves as well. We’re committed to being a good citizen on each platform: leveraging unique capabilities in order to use the latest technologies. With this release, we have enabled basic pen and touch support for XD on Windows 10 as a companion to the mouse and keyboard.
You can use the pen or touch surface to interact with XD’s tools, create artwork on canvas, navigate through layers, interact with symbols, wire prototypes, edit properties, scroll through the preview window and so much more.
Small tweaks on the go have never been easier in XD. You can use the pen to input values in the property inspector or even better, tap and hold down on a numeric field to scrub through values.
With touch-enabled, you can draw on the canvas, resize objects and repeat grids, drag and drop images and even pick color values using the eyedropper.
This is just the beginning, and we look forward to receiving your feedback.
Enhancement to Design Specs (Beta)
Design Specs (Beta) is the bridge to your development team. It enables your developer preview your designs in the browser and gather relevant information like color values, measurements and styles. We’ve now added support for displaying layout grids in Design Specs(Beta). This enables your developer to view and understand the structure and framework that you’ve chosen.
If you’ve enabled a layout grid for any of your artboards in the design mode, the developer can toggle the layout grids in Design Specs(Beta)to see it. It is present only in the artboards in which the designer enabled it and also turned on by default. The developer can choose to toggle it off once they have seen it.
Eye Dropper in Properties Inspector
When we first shipped the color picker in XD, we received feedback around support for an eye dropper inside it. In December, we moved the eyedropper from the property inspector to the color picker.
We thought we made life easy. We heard your feedback and realized how many unnecessary clicks you had to go through in order to pick a color after we moved the eyedropper inside the color picker. We also heard how easy it was now to pick colors for gradients after we moved the eyedropper inside.
We clearly understand that having access to the eyedropper both in the property inspector and color picker is absolutely essential to work quickly. With this release, we are reintroducing the eyedropper in the property inspector as well.
Enhancement to Commenting
We are always looking for ways to improve the features we’ve shipped. This month, we made a few enhancements to commenting on prototypes, which makes it easier to add comments and pin them to a specific part of the design.
Reading this in the future? Check out all of the major updates to Adobe XD in 2018.
Download Five free UI Kits published exclusively for Adobe XD by five talented designers to help you kickstart your projects.
Let’s keep the conversation going! You can follow our handle @AdobeXD for updates or reach the team on Twitter using the #AdobeXD. You can also chat with us on Facebook, where we share videos and updates as well as answer questions during live sessions.
For UX insights sent straight to your inbox, sign up for Adobe’s experience design newsletter!
While sharing your prototypes on Behance, don’t forget to tag them with #MadeWithAdobeXDand select Adobe XD under “Tools Used” for the opportunity to be featured in the Adobe XD Newsletter