In the properties panel, three sections decide how an element looks: Appearance for outline, corners and opacity, Transforms for rotating, scaling and skewing, and Filters & Effects for shadows, filters and links. How to set colors and gradients is explained in Set colors and gradients.
You see the sections when you select an element on the canvas or in the layers panel. A click on a section title expands or collapses it. Transforms and Filters & Effects start collapsed, and for groups and masks Appearance does too.
Appearance
- Fill Color: fills the element with a color or a gradient. For rectangles, ellipses, paths, texts, groups and masks. Images have no fill; you color them with Color Masking under Filters & Effects.
- Stroke Color: gives the element an outline, in a color or a gradient. For all elements.
- Stroke Width: the width of the outline. When you turn the outline on, it is 5 pixels wide, 2 for texts.
- Stroke Alignment: whether the outline sits inside (Inside), centered on (Center) or outside (Outside) the edge. Center by default. Not available for the outline of a text's letters.
- Dash: a solid, dashed or dotted outline. The menu shows the three lines as a preview. For a dashed or dotted line, Length for the length of the dashes and Gap for the gaps appear.
- Offset: shifts the dashes along the outline.
- Corner Radius: rounds the corners. For rectangles, images, groups and masks. With the button next to it (Individual corners), you set each corner on its own.
- Opacity: from 0 (invisible) to 100 (fully visible).
- Visibility: hides and shows the element with the eye icon. When you connect it to a checkbox input field, users switch the element on and off themselves. See Create a checkbox input field: let users show or hide an element.
Groups and masks also have Background Clip and Padding for their fill, and texts have properties of their own for their background. They are explained in Group elements: move and arrange them together, Mask elements: crop an image to a shape and Text properties.
Transforms
- Translate: moves the element by extra pixels, with X and Y. You set the actual position under Position & Size.
- Scale: stretches or shrinks the element, with X and Y. 1 is the original size, 2 is double.
- Rotate: turns the element by the given degrees. For rectangles and ellipses, the same value also shows as Rotation under Position & Size.
- Skew: slants the element, with X ° and Y °.
Texts have two more settings at the end:
- Rotate Text: Line ° turns each line, Char ° turns each letter on its own.
- Skew Lines: slants each line, with X ° and Y °.
Rotating, scaling and skewing work around the element's Origin. For groups, it is at the top of Transforms; for rectangles, ellipses, paths, texts and images, it is under Position & Size. Masks have no Origin of their own.
You can also rotate right on the canvas: when you move the pointer just outside a corner of the selected element, it turns into a rotate arrow. Dragging then turns the element.
Opacity and the values under Transforms can be animated with keyframes, see Animate a template: make a video with moving elements. Only images can be mirrored, with Flip in the image properties.
Rotated elements and the anchoring tool
The anchoring tool also works with rotated elements, with some limits. This applies as soon as any value under Transforms differs from its default, not only Rotate.
- The tool uses the upright box around the rotated element. While you drag, its label contains
.bbox. - A rotated element connects edge to edge only. Surfaces and the size handles are not available for it.
- A rotated group cannot be connected. The same goes for elements inside a rotated group, and for rotated elements inside a group or mask.
Filters & Effects
Each effect has a checkbox. When you tick it, its settings appear below it. When you untick it, the effect is gone. Which effects you see depends on the element:
- Rectangles, ellipses, paths and texts: Drop Shadow, Invert and Hue Rotate.
- Images, groups and masks: also Blur, Grayscale, Sepia, Filter Opacity, Exposure, Contrast, Saturate, Brightness and Gradient Map.
- Images: also Color Masking.
- All elements: Link at the top of the section.
The effects in the order of the section:
- Link: makes the whole element a clickable link, for example in a PDF export. You type the web address into the field below it.
- Color Masking (images): colors all visible parts of the image in a color or a gradient; transparent parts stay empty. Good for icons and logos with a transparent background. A photo without transparent areas becomes a single-color area. Starts with black.
- Blur: makes the element blurry, with separate values for X and Y. Starts at 0.
- Drop Shadow: a shadow behind the element. You set the angle (°), distance (↘), color, opacity, blur and quality. It starts as a sharp black shadow, 10 pixels below the element.
- Grayscale, Sepia and Invert: the strength goes from 0 to 1. They start at 0, so you only see a change once you raise the value.
- Hue Rotate: shifts all colors around the color wheel, from 0 to 360°. Starts at 0.
- Filter Opacity: an extra transparency from 0 to 1. Starts at 1. For normal transparency, use Opacity under Appearance.
- Exposure, Contrast, Saturate and Brightness: one value each for Red, Green and Blue, from 0 to 1. They start at 0.5.
- Gradient Map: colors the element by brightness. Dark areas take the colors at the start of the gradient under Color Stops, light areas those at the end. It starts with black to white. The plus below the list adds a color.