> For the complete documentation index, see [llms.txt](https://docs.scaleflex.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.scaleflex.com/studio/template-builder/building-a-template/shape-layers.md).

# Shape layers

Shapes are the badges, rules, buttons and color blocks a design needs: a discount roundel, a divider under a headline, a filled panel behind a price.

### Adding a shape

1. Click the shape tool in the toolbar under the canvas.
2. Choose **Line**, **Oval** or **Polygon**.
3. Drag on the canvas to draw it.

### Shape properties

Select a shape and the properties panel shows a **Shape** section.

| Property            | Applies to    | What it does                                                                                                                                       |
| ------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Type**            | all           | Switches between line, oval and polygon                                                                                                            |
| **Sides**           | polygon       | Number of sides, 3 to 10. Three gives a triangle, eight an octagon; four gives a rectangle or a square, depending on the shape of the box you drew |
| **Corner radius**   | polygon       | Rounds the corners, in pixels                                                                                                                      |
| **Fill**            | oval, polygon | Interior color. Choosing the transparent swatch leaves the shape unfilled                                                                          |
| **Fill opacity**    | oval, polygon | Opacity of the fill, 0 to 100 percent. Hidden when there is no fill                                                                                |
| **Stroke**          | all           | Outline color                                                                                                                                      |
| **Thickness**       | all           | Outline width in pixels. 0 removes the outline                                                                                                     |
| **Stroke position** | oval, polygon | Whether the outline sits **Inside**, **Middle** or **Outside** the shape's edge                                                                    |

A shape with no fill and no stroke thickness renders as nothing - worth checking if a shape seems to vanish.

<div align="left"><figure><img src="https://2536208400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqsq2dR7Fjagf5eTifWZx%2Fuploads%2FzipkjUz5Srq6hg8pam7Q%2F16-shape-section-polygon.png?alt=media&amp;token=563997e8-07b2-456b-8b9e-8a80ded1f0d7" alt="" width="271"><figcaption></figcaption></figure></div>

### Text inside a shape

A shape can carry text set inside it, which is how you make a badge whose label travels with the badge.

There are two ways in:

* **Double-click the shape** on the canvas to type into it directly.
* **Open the shape's menu** in the **Layers** panel and choose **Add variable** to bind the inscribed text to a variable instead.

The inscribed text takes the full set of type controls - a **Typography** and a **Paragraph** section appear under the shape's own properties - but not its own position and size. It follows the shape, so moving or resizing the shape carries the text with it.

Lines have no interior, so they cannot hold text.

<figure><img src="https://2536208400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqsq2dR7Fjagf5eTifWZx%2Fuploads%2FDEy8vnEXor9zt2aAItkt%2F17-polygon-layers-and-properties.png?alt=media&amp;token=2a36dd17-e91e-4f17-8fde-c994bfbbc661" alt=""><figcaption></figcaption></figure>

### Where to go next

* [Text layers](/studio/template-builder/building-a-template/text-layers.md) for the type controls in detail.
* [Variables](/studio/template-builder/variables.md) to make a badge's label change per image.
