August 2019 Release of Adobe XD: CSS Code Snippets in Design Specs, Improved Integration with Photoshop, and a New Frontier for XD Plugins

Adobe XD is a living, breathing platform for design teams to create amazing experiences, and it’s constantly evolving to support a broad, creative workflow. In this month’s release of Adobe XD, we’re introducing a completely new way to use plugins with the new Plugins Panel, enhancing the integration between XD and Photoshop, and introducing automatically-generated CSS code in Design Specs that developers can copy and paste into their code. We’ve also made some key improvements to Component bounds to help you create experiences faster and more easily.

The Plugins Panel: Plugin functionality right on the design canvas

Plugins are an important part of the XD platform and help designers extend the functionality of XD; they add new features, connect XD to other applications, and make your overall workflow in XD faster and more efficient. There are now nearly 200 plugins available in the XD Plugin Manager, and thanks to the new Plugins Panel, it’s easier than ever to harness their power. The Plugins Panel is a new surface in the XD experience where you can launch and use your favorite plugins without ever leaving the design canvas.

We’ve been working closely with the XD plugin developer community to update for the new Plugins Panel and are excited to introduce several new plugins for XD, optimized for the Plugins Panel. You can learn more about the new Panel and see some of these plugins in action in our full post, Put the Power of Plugins at Your Fingertips.

If you’re an XD plugin developer, the Plugins Panel presents a whole new surface area for your plugin unlike any other design platform, where you can offer your plugin’s features and expose new functionality to designers right alongside the design canvas. You can learn more about building plugins on our developer website. You can also check out the beginner’s guide to building XD plugins on our developer blog.

Open and edit images using Photoshop, right from XD

Adobe XD is the only experience design platform that natively integrates with other Creative Cloud apps, and using it alongside Adobe Photoshop makes it easy to create, edit, and import images into your XD prototypes. Now, thanks to an improved integration with Photoshop, you’re able to harness all of the tool’s image editing power easier, right from XD.

As seen in the video above, you’re now able to right-click on an image in your XD design and click Edit in Photoshop. This automatically opens the image layer you’ve clicked on in a new Photoshop document (and if you don’t have Photoshop open, it will open the program for you). This allows you to seamlessly edit and alter the image in Photoshop, then click save to automatically flatten the image and place the edited version back in XD, in real time. Of course, if you change your mind, you can roll back those edits in Photoshop and simply click save to revert the image to its original form.

Copy and paste CSS code snippets in Design Specs

A powerful feature of the Adobe XD workflow is the ability to design and prototype immersive, interactive user experiences and then share them with developers to transform your designs into real products. In this release of XD, we’re enhancing this workflow by automatically generating CSS code snippets for your designs that developers can copy and paste into their code. This will make it easier than ever for developers to build out experiences designed in XD.

You can see exactly what this looks like in the video above. When viewing a Design Spec artifact, you will now see a CSS panel in the bottom-right corner, displaying CSS code snippets for the selected elements on an artboard, and you can copy and paste these snippets. Keep in mind, CSS code is dynamic; if you change the color format in your design, for example, the CSS code will automatically update. So, once all design choices are set, all you’ll have to do is click and drag over the code in the CSS panel to copy it to your clipboard in its final form. The auto-generated CSS code snippets capture properties like color, shadows, and gradients.

Improved bounds for Components

Adobe XD helps designers move faster when creating experiences with Components. Components, introduced in the May 2019 release, are design elements that you can reuse throughout your designs instead of creating the same objects over and over. In the latest release, we’re changing the behavior of components in XD to make using components even easier, both for individual designers or for teams using a design system in XD.

As you can see in the video above, the bounding box of the button component is much larger than the object within it to accommodate the shadow effect. Now, you can right-click a component and select ‘Fit Bounds to Content’ to reset the bounds, effectively solving the problem. You can do this for one instance of a Component, or select it for the master Component to apply the change to all instances in a prototype. For new components created in the latest version of XD, an instance’s bounds will automatically reset when a designer adds or removes content from it.

No more fractional pixels

No one wants to see fractional pixels making their designs distorted or fuzzy, but they can be unavoidable when you are resizing groups of objects or applying image masks. In this release of Adobe XD, we’ve tackled the issue of fractional pixels. This means you can now resize components, repeat grid sets, image masks, and groups of objects and ensure that those elements will always land on a whole pixel value. No need to manually adjust for this.

The above fix means that boolean elements might be fractional, but the overall element will not be. In the case of shapes converted to paths, or elements created with the pen tool, fractional values will be retained (to preserve your original intent).

For any content created before this release, fractional values will be preserved to avoid disturbing your existing work, but we hope this refinement (and the other updates in this release) make working with elements in XD much more enjoyable. For a full list of new features and updates in this latest release of Adobe XD, head over to our What’s New page.

UX Community

We’d love to continue the dialogue! Help us shape the future of Adobe XD by submitting feature requests or file bugs at https://adobexd.uservoice.com. 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.

#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.