Adding a Shape to your page is a simple yet effective way to make a visual statement and add interest and contrast. With a wide range of shapes and settings, it's easy to create a unique design that fits your page perfectly.

Where to find the Shape panel

Navigate to a Document.
Select ‘Design’ for the Version of the Document that you want to work on.

The Version will then open in Design mode and the Panel palette (one of the most important features of TigerDesigner!) can be found to the right of your page design.

How to add a Shape panel

Select the ‘Shape’ panel type from the Panel palette.
Click and drag out an area on the page.

The shape will default to a black rectangle, but there over 20 different shapes that it can be altered to, including hexagon, speech box and arrow.

Shape panel Settings

When a panel is selected, the Settings palette will become active ready for you to choose settings, such as the shape type and colour. There are 3 main sections in this area, Name, Shape and Panel.

1. Name

Name

The 'Name' field is set default, but it's important to update it to something unique that reflects the content - for example, 'Red Circle'. Descriptive names make it easier to identify the panels in your design, which is particularly helpful if you're using lots of the same panel type.

2. Shape

Filled/Customisable/Present

Choose from the range of shapes available - simply click on the shape type and the panel will update.

💡 Think about the type of shape you wish to use - it may be related to your brand, used to emphasise an area of interest, or help connect information on the page making it easier to understand.

Maintain Ratio (selected shapes only)

Use this option to maintain the aspect ratio of the shape, which will prevent skewing when it is rotated or resized.

Points (selected shapes only)

Use this option to adjust the number of points the shape will have. The higher the number, the more points.

Star Inset (star shape only)

Use this option to adjust the percentage depth of the star. A lower value will create a chunkier star, whereas a higher value will create a spikier look.

Rotation (selected shapes only)

Use this option to adjust the degree of clockwise rotation for the shape.

3. Panel

This section is used to customise the appearance of the panel - for example, add a keyline or set opacity.

Keyline Colour

A keyline adds a border/boundary line around your panel. Use the 'Keyline Colour' field to specify the colour that you wish to set for the border around the edge of the panel.

Keyline Width

Use the 'Keyline Width' to specify the width of the border around the edge of the panel. Enter a numerical value to set the keyline width- the higher the value, the thicker the keyline.

Back Colour

Use this option to set the colour of the shape - select from the colour picker, enter a HEX code, or choose from your brand colours. Think about the choice of colour - it can reflect your brand personality, as well as evoke emotions or draw attention to content.

Opacity

Enter a numerical value between 0 - 100 to set the opacity of the shape - the higher the value, the more opaque the shape will be.

Corner Radius

Use the 'Corner Radius' to specify the roundness of the corners of the panel. Enter a numerical value to set the corner radius - the higher the value, the rounder the corner.