New styling tools in Adobe XD: Inner Shadow, Outline Stroke, and Angular Gradient

You asked. We delivered. Today, we’re introducing a few new styling tools that will help you create beautiful and more complex designs and explore new trends in UI design.

To get the new tools, you can update to the latest version of XD in the Creative Cloud application or you can try Adobe XD for free if you don’t already have it.

All of the new features shipping in today’s release come by request from you — our beloved community of designers around the world — and address a few of our top-requested items on the Adobe XD UserVoice. Our team is always looking for new ideas and feedback from the community and we’re working hard to deliver on even more requests in upcoming releases — stay tuned!

Inner Shadow

Inner shadows help you bring a sense of depth to your designs. The Inner Shadow tool, as the name suggests, applies a shadow on the inside of the selected object. When you select an object in XD, you’ll now see the new “Inner Shadow” property under the Effects section of the Properties Inspector on the right side of your screen. Inner shadows can be applied to shapes, text, images, and boolean groups in your designs and are supported when you import designs from other tools like Photoshop or Sketch.

With inner shadows, you can make objects appear as though they’re depressed into the canvas — this differs from drop shadows, which make objects appear to be floating above other layers on the canvas. Inner shadows help you create more realistic lighting effects in your designs and explore new trends in UI design, like 3D components and neomorphism.

Outline Stroke

The Outline Stroke feature lets you turn a stroke (a line or a border) into its own shape. Once you convert a stroke into a shape, you can edit it like any other object on the canvas — change the shape and size, apply gradients, shadows, or blend modes, and much more. The ability to convert a stroke into its own path opens up new possibilities for vector drawing in XD, creating custom shapes and text styles.

Outline Stroke is particularly useful when preparing SVG assets for export. Strokes that have been converted to shapes will replicate identically when you export to SVG, scale much better than strokes, and render seamlessly in different browsers and device types — no more jumping back and forth between XD and Illustrator for preparing SVGs.

Angular Gradient

Gradients are becoming increasingly popular in UI design for creating beautiful color effects. Up until now, you’ve been able to create linear and radial gradients in XD, and today we’re adding support for angular gradients. Angular or conical gradients apply a fill with color gradients that sweep around a shape from the center of a circle.

Angular gradients work like any other kind of gradients in XD where you can move or rotate the gradient fill and add additional color stops for unique styles. Angular gradients let you bring new styles to components in your designs, like circular progress spinners, pie charts, color wheels, speedometers, and more.

Featured Plugin: Create easily and present beautifully with Presentation

Your design has a story to tell. But as any designer knows, presentation tools have never made life easy for designers. Exporting artifacts, designing attractive slides, searching for graphics, and the endless back and forth to add the latest design iterations — these are just a few of the challenges that Presentation for Adobe XD was created to solve.

Presentation is a powerful new plugin for Adobe XD that makes presenting design work easy and beautiful, all within a design tool. Simply launch the plugin and pick from professionally designed themes, slides, and elements right within XD. Presentation and XD make it easy to stay on-brand by simply changing fonts and colors in the Assets panel. Presentation comes with elegant vector-based icons, shapes, photography, illustrations, and charts so you’ll never have to hunt around for visuals again.

You can download the plugin for free here and learn more about Presentation on the Adobe Blog.