By Howard Pinsky
Designing using border-based icons certainly has its benefits — like being able to dial in the perfect stroke width — but at some point in the process, you may want to lock it in and convert your icons to solid shapes. This is especially useful when designing for various screen sizes, since borders remain consistent when resizing elements like this navigation bar, your icons may end up appearing too thin.
Under the Object > Path menu, you can outline the strokes of individual or multiple layers that contain borders. And each element will be converted into a solid vector shape. And if any layer contain both a fill and a border, they'll automatically be separated.
You can now proceed with resizing, and the weight of your icons will look consistent across all of your devices. Lastly, if you prefer to keep your layers as they are while designing, the option to outline their strokes is available when exporting assets as SVGs.
[Insert cheering of developers here.]
Was I supposed to read that part?
Create vector art for responsive layouts that resizes to fit any screen while maintaining a consistent stroke weight. In this tutorial, you’ll see how to apply the Outline Stroke feature in Adobe XD to your design elements. Choose Object > Path > Outline Stroke to convert selected icons and strokes into solid, resizable vector shapes. Separate shapes and paths automatically by applying Outline Stroke to filled shapes with borders. When you're ready to handoff your assets to developers, enable the Outline Stroke option and output your vector graphics as SVG files.
