Custom Symbols

Many use-case scenarios require you to implement custom components in the web application.

In Unite UX Sketch, the equivalent of a custom component is a master symbol. You can draw different stages of a custom components by using different master symbols and associating them with that custom component.

Associating Master Symbols

To associate a master symbol with a custom component or with an already existing build in a Kendo UI component:

  1. Navigate to the Component section in the Unite UX Sketch plugin.
  2. From the Select a type drop-down, relate the currently selected Master Symbol to the type of the custom component. As a result, the values of the Select a type drop-down are populated with all component schema builds and include the schemas of all custom components.

    The Select a type drop-down is active only if a master symbol is selected.

    Sketch Component

Configuring the Initial Settings

Custom components can contain different properties which control the visual rendering of the component. By default, when a custom component type is selected, the default property values are added as initial settings which are taken from the default values in the schema of the component.

To see all initial settings of the corresponding components, expand the INITIAL SETTINGS panel. If you draw different stages of the component, change the default value of a property which controls the presentation to correctly transfer the metadata of the component.

You can display different stages of the same custom component by drawing different master symbols with different initial values which are associated with same custom component.

Initial Settings

Overriding Properties

When you design a custom component, you may need to visually change the instance symbol that is created from the master symbol. When you create the symbol from the custom component, you can add various symbol overrides.

Master Symbol Overrides

The symbol overrides in the instance symbols that are used in a particular design can be later on further modified through the build in the Sketch Overrides menu.

Overrides

To transfer the override values as property values in the metadata of the custom components, associate a property of the schema of the custom components to a particular override.

Overrides Association

To list a property as an overridable property, mark it in the designOptions of the schema as overridable:true.

  ...
   "content": {
      "type": "string",
      "title": "Text",
      "default": "Button",
      "order": 2,
      "designOptions": {
        "name": "content",
        "overridable": true
      }
    },
  ...
In this article
Not finding the help you need?