By Dani Beaumont
The polygon tool in Adobe XD now includes native support for creating star shapes. Making it just a bit easier to create a variety of native shapes right here on the design canvas. All of the shapes that I have here are variations of the star shape. Let me show you how I went about creating some of them.
I'll begin by selecting the polygon tool. I can do this by either clicking on the tool here in the tool panel on the left hand side or just typing the letter y on the keyboard. Now as I press and drag to define the height and width of the shape. I can also use my keyboard up arrow key to add sides to the polygon. I'll keep adding sides until I get five of them.
When I click off I can confirm what I've done here in the appearance area of the Properties inspector I can continue to work visually on the canvas.
When I roll over the shape I have the ability to set the rounded corner of each of the polygon sides. This is something we've had in the past. I also have a second handle that allows me to define the ratio or the distance between the polygon core and an inner circle. So if I press and drag here this allows me to start to get that star shape.
Once again I can confirm the properties that I've set here in the properties inspector. I now have a polygon with five sides a corner radius of one and a ratio of 59%. Clicking into any one of these fields I can use the up and down arrows to continue to refine what I'm doing. Hitting the tab key I can come in and start to play with additional ratios. Holding the shift key and then the tab key can take me back where I can start to play with more or less sides to my shape and continue to iterate from there.
If I bring up the layers panel you can see that all of these objects on this artboard are still polygon shapes. So I can easily apply a fill or a stroke. Combine them with other objects to create a boolean group or a custom mask. Because these are a shape I can always come back later and change the properties in the properties inspector. Or, even apply some really interesting auto anime transitions between states or artboards as I change out those attributes.
Double-clicking on the shape will convert it to a path and I can see that it's now a path here in the layers panel. This makes it easier for me to make further edits to do things like let's say a custom logo here. But, like any other path I'll have lost my shape controls. I can always undo that change and continue to make my global updates if I do want to retain that capability.
Well that's about it, you now have another tool in your arsenal of native controls within the Adobe XD application making productivity just that much easier.
Be the star of the show with the polygon tool in Adobe XD. Using the polygon tool it is easy to create a variety of shapes from basic triangles to stars and even hearts. This tutorial will walk through how to use this polygon tool to create fully editable vector based polygon shapes within your Adobe XD projects.
