Creative Connection

February 13, 2018 /UX/UI Design /

February 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 colour 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.   

Want to see this update and more in action? Check out Adobe Live from Feb. 13-1to see top UX designers using the latest features in Adobe XD.  

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.  To celebrate this feature we recently released 3 exclusive Icon Kits designed by Anton & Irene, Büro Destruct and Lance Wyman. Read the blog and download them for free.

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 eyedropper and the 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 resised 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.   

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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 colour 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 colour 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 colour 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 colour picker.  

We thought we made life easy.  We heard your feedback and realised how many unnecessary clicks you had to go through in order to pick a colour after we moved the eyedropper inside the colour picker. We also heard how easy it was now to pick colours for gradients after we moved the eyedropper inside.  

We clearly understand that having access to the eyedropper both in the property inspector and colour 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.  

**** 

Resources.

Download Five free UI Kits published exclusively for Adobe XD by five talented designers to help you kickstart your projects. 

Icons kits.

At Awwwards 2018 we’ve released an exclusive set of icon kits for use in Adobe XD. Created by three world-renowned designers, they celebrate UX design excellence and underscore the importance of icons to storytelling. Learn more about the kits by Lance Wyman, Anton & Irene and Büro Destruct in our blog post here. Beginner or pro, this little gift from Adobe will make your next project quicker, simpler and ultimately better for your users. Download the kits for free here.

UX community. 

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.

UX/UI Design

Join the discussion