Using Symbols

With Symbols, you can easily reuse your drawings across a document. This is especially useful for prototyping entire user interfaces.

For example, you can draw a button in one canvas, then reuse the button on other canvases. You can adjust the original canvas at any time, and all changes will automatically be propagated to all symbols.

Using Symbols

Using symbols is easy. First, draw something on one of your canvases. This can be icon, user interface control or any other drawing you wish to reuse across your document.

Then, select another canvas and click on the new "Symbol" tool in the upper toolbar. A contextual menu with all available symbols / canvases will appear.

Pick the symbol you wish to use. Then, click somewhere on the canvas to place the symbol.

Symbols behave very similarly to other shapes such as rectangles and ovals - you can move them around, resize them, transform them, and so on.

By using the popup button in symbol's Inspector, you can change which canvas is linked with that particular symbol. In the picture below, the symbol is linked with "Chat Icon" canvas:

Symbols are dynamic

You can adjust the original canvas even after you create a symbol that uses it. All canvas changes will be automatically propagated to all symbols that are linked with it.

Parametric & resizable symbols

PaintCode has the best support for symbols of any drawing app on the Mac. Why? Symbols in PaintCode can be resizable and parametric.

If you use a Frame in your canvas, you can use that canvas as a symbol, and the symbol will be resizable, applying all the resizing constraints you specified.

Additionally, all variables used by your symbol canvas will be accessible to you as editable parameters in the symbol's inspector.

You can, for example, create a button that changes its design based on a single "Pressed" variable. When you create a symbol based on this canvas, a checkbox labelled "Pressed" will appear in the symbol inspector:

If you configure your colors, gradients, shadows and images to behave as parameters, these will also become accessible as editable parameters in symbol's inspector. This is a very powerful feature - you can, for example, create an icon, then use it as a symbol several times, each time specifying a different color of the icon.

Finally, symbols can be nested, so you can use symbols inside symbols.

Disallow using canvas as a symbol

By default, all canvases in your document are available to be reused as symbols. This means they all appear in the symbol tool menu.

If you don't want some canvas to be available here, select the canvas by clicking on its title, then uncheck the "Allow canvas to be reused as a Symbol" checkbox in the Inspector on the right.

Code generation considerations

Symbols correspond to method calls in the generated code.

One scenario is unsupported, though: using texts in nested symbols which use canvases with inconsistent Y axis flippness. In such case, the texts may appear upside down when you run the generated code.