Shapes give your design structure. Use them to frame text, add a divider line, point with an arrow, or drop in a star or badge. This guide shows you how to add a shape in the Design Studio and how to set its fill, stroke, corners, and points. It is written for anyone building a product template, no design background needed.
Add a shape
The Shapes catalog lives in the Graphics panel. Six core shapes (Rect, Circle, Line, Arrow, Polygon, and Star) are added as native objects, so the transform handles work right away and the properties match each shape. Beyond those, you get a deeper set of SVG shapes grouped into categories.
Open the Graphics panel and the Shapes tab
In the Design Studio, open the Graphics tile in the Elements panel, then select the Shapes tab. You will see shapes grouped into categories: Lines, Basic, Polygons, Stars, Arrows, Flowchart, Bubbles, Clouds, Hearts, and Banners. To find one fast, type in the search box at the top of the tab to filter across every category.
Click a shape to add it
Click any shape to add it to the center of the canvas. The shape lands selected, so you can drag it into place or resize it with the corner handles straight away. Add as many shapes as your design needs.
Set fill, stroke, and corners
Every shape has its own properties. Select a shape and its settings open in the properties panel. The exact controls depend on which shape you picked.
Select the shape to open its properties
Click the shape on the canvas. Its properties appear in the panel on the right.
Set the fill, stroke, and width
Set the fill color to paint the inside of the shape. Set the stroke color for the outline, and the stroke width to control how thick that outline is. A width of 0 means no outline. For more on color pickers and brand colors, see colors and fills.
Adjust the shape-specific controls
Each shape adds its own settings on top of fill and stroke:
- Rectangle: set the corner radius to round the corners. A higher value gives a softer, pill-like shape.
- Circle: set the radius to change its size.
- Line: set the stroke, stroke width, and line cap. The cap controls how the ends look (butt, round, or square).
- Arrow: set the pointer length and pointer width to size the arrowhead, plus a fill.
- Polygon: set the number of sides (from 3 to 24) and the radius. Three sides gives a triangle; six gives a hexagon.
- Star: set the number of points (from 3 to 24), the inner radius, and the outer radius. The gap between the two radii controls how pointed the star looks.
Common questions
Why does my shape have no outline?
Stroke width is set to 0. Raise the stroke width and pick a stroke color to show the outline.
How do I make a triangle?
Add a Polygon and set its number of sides to 3.
How do I round the corners of a box?
Add a Rectangle and increase its corner radius. A higher value rounds the corners more.
What is the line cap on a line?
It controls how the ends of the line look. Choose butt for flat ends, round for rounded ends, or square for slightly extended flat ends.
Next
Set brand-accurate colors for your shapes in colors and fills.