Overview
A Component defines the layout, style, and properties of a screen or interface element. Components are useful for a whole range of things like reusable screens, buttons, rows, cards and more.
★ Pro Tip
To make it easy to reuse a Component, from the Inspector panel, check the box Show in Insert Menu, so that when you want to insert an Instance, or a copy of a Component, you can easily do so from the menu.
Turning an Artboard into a Component
All designs begin as an Artboard, but you can turn them into a Component in one of three ways:
Right-click on the Artboard in the Layers panel or on the canvas and click on Create Component
With the Artboard selected, click on the Create Component button in the toolbar
With the Artboard selected, use the keyboard shortcut ⌥⌘K
Creating Components from Layers
Create Components from a selection of layers by selecting the layer(s) you want to include from the Layers panel or directly on the canvas. Then right-click on your selection, choose Create Component, and give your Component a name.
★ Pro Tip
With the layers selected, you can use the keyboard shortcut ⌥⌘K to create a Component.
Set a Component as the Starting Point
If you’d like your app to start with a specific Component when previewing the design on the Judo mobile app, select the Component and either right-click it or head to the Inspector panel to select Use as Prototype Start Point.
The prototype starting point will have a flag icon before the name of the Component. There’s no need to rearrange the order of your layers in the Layers panel.
Properties
Properties provide a way to customize the Instances, or copies of Components. You can define which parts of a Component can be customized by attaching layers to different kinds of Properties. This allows Instances to be customized in different ways:
The Properties defined on a Component are presented as a set of controls in the Inspector panel when an Instance is selected. You can use these controls to understand what is editable to customize the Component Instance.
Property Types
Properties come in different types:
Text - Makes text content in Text layers and modifier labels customizable.
Number - Used in conjunction with the Conditional layer to hide or show different layers within the Component based on numeric comparisons such as Equals or Does Not Equal or Is Greater Than or Less Than. Can also be used in Text layers and modifier labels where it will be displayed as a formatted number.
Boolean - Used in conjunction with the Conditional layer to hide or show different layers within the Component depending on whether the Property is True or False.
Image - Sets a default image for an Image layer, making the asset customizable.
Video - Sets a default video for a Video Player layer, making the asset customizable.
Component - Sets a default Component that you can then swap out for another Component.
Computed Property - Creates a Number Property that contains simple arithmetic expressions, which can be combined with other Properties, too.
How to Create & Edit Properties
Create a Property
With a Component selected in the Layers panel, you can create a new Property by clicking on the plus (+) icon in the Properties section of the Inspector panel.
Type a Name for your Property and enter a Value. This value will be used by default. Instances of the Component can be customized by changing the value to something else.
Create a Computed Property
With a Component selected in the Layers panel, you can create a new Property by clicking on the plus (+) icon in the Computed Properties section of the Inspector panel.
An Expression consists of Numbers and Number Properties, combined with any of the following operations: addition, subtraction, multiplication, or division. The Number Properties available will appear as you begin to type your Expression.
⬇ Note
Computed Properties cannot be overriden in an Instance.
Edit a Property
With a Component selected in the Layers panel, click on the Property name in the Inspector panel to adjust the Name or Value.
Delete a Property
With a Component selected in the Layers panel, hover over the Property and click on the trash can icon that appears in the Inspector panel to delete a Property.
How to Attach Properties
All 7 Properties—Text, Number, Boolean, Image, Video, Component, and Computed—can be attached to different types of layer and modifier values.
Attaching a Text Value
Certain layers and modifiers have text values that can be attached to Properties, such as the contents of a Text layer or the title of a Navigation Title modifier. Text values only accept Text or Number Properties.
To attach a text value to a Property, select the applicable layer from the Layers panel, hover over the text field in the Inspector panel, click the Property Attachment Ring, and select one of the Properties.
If a suitable Property doesn't already exist, you can create the Property directly from the Property Attachment Ring.
⬇ Note
If you don't see the Property Attachment Ring when you hover over a text field, make sure the layer you have selected is part of a Component.
Attaching a Conditional Value
Number and Boolean Properties are often attached to Conditional layers to hide or show different layers within the Component, depending on the Condition of the Property. You can choose from 8 Conditions: Equals, Does Not Equal, Is Greater Than, Is Less Than, Is Set, Is Not Set, Is True, Is False.
To attach a Boolean Property to a Conditional layer, select the layer from the Layers panel and from the Inspector panel, click the plus (+) icon to add a Condition, choose a Boolean Property from the Key Path section, and select the Is True or Is False Condition from the list.
Attaching an Image Value
Image layers have image values that can be attached to the Image Property. To attach an image value to a Property, select the applicable layer from the Layers panel, click on the Image drop-down in the Inspector panel, hover over Properties, and select one of the Properties.
If a suitable Property doesn't already exist, you can create one directly from the Properties section in the Image drop-down.
Attaching a Video Value
Video Player layers have video values that can be attached to the Video Property. To attach a video value to a Property, select the applicable layer from the Layers panel, click the Property Ring Attachment, and select one of the Properties.
If a suitable Property doesn't already exist, you can create one directly from the Video section drop-down.
Attaching a Component Value
Component Instances can be bound to Component Properties by clicking on the name of the Instance in the Inspector panel and hovering over Attach Property at the bottom of the drop-down menu to select a Property.
If a suitable Property doesn’t already exist, you can create one when you hover over Attach Property and select Create Property…
Attaching a Computed Property
Most layers that accept text or number values can be attached to a Computed Property. To bind a value to a Computed Property, select an applicable layer from the Layers panel, click the Property Attachment Ring in the Inspector panel, and select one of the Computed Properties available.
If a suitable Property doesn't already exist, you can create one directly from the Property Attachment Ring by clicking on Create computed property…
