Don’t be fooled by this example Payment Calculator—it may appear to be a simple prototype, but it’s actually equipped with a variety of Controls, Properties, and Conditionals that form real, interactive elements in your design. Throughout this tutorial, you'll also have the opportunity to work with Computed Properties and Combined Text layers, making this a great way to learn about integrating arithmetic expressions and stylized text into your app design.

This starter Judo file includes 1 Component labeled Calculator.

The goal is to make a Payment Calculator complete with the following:

Let’s begin by creating a Slider, or a track with a “thumb” image that a user moves between a minimum and maximum value. Since we want the Slider to be positioned under the “How much do you plan to spend?” Text layer, let’s select the Text layer and from the Insert (+) menu, insert a Slider control.

The first parameter that we’ll set up in the Inspector panel is the Value, as our Slider will not work unless it is bound to a Number Property. To do so, hover over the Value parameter and click on the Property Attachment Ring. Let’s call it spend and give it a default value of 0.

Now, let’s configure the rest of the Slider parameters:

Next, let’s create a Picker that will allow users to choose whether they want to pay over days, weeks, or months. To place it to the right of the “In what time interval?” Text layer, let’s expand the HStack labeled Intervals in the Layers panel, and select the Spacer, so that when we insert the Picker, it will get placed after the Spacer. From the Insert (+) menu, insert the Picker control.

Similar to the Slider, the Picker control won’t work unless we bind the Selection parameter to a Text or Number Property. So, hover over the Selection parameter and click on the Property Attachment Ring. Let’s create a Text Property called interval and give it a default value of day.

From the Inspector panel, you can customize the amount of options and the type of options available. We need 3 for this example—day, week, month—so let’s simply click on each option to edit their Title and Value. You can add an Image if you’d like, but we’ll keep it simple in this example by not adding any.

The Title is the label that will be visible in the Picker for each option and the Value corresponds to the interval Text Property value options. So, let’s change each option to the following:

Since we had set the default value of interval to day, the Title Days of the day Value option appears first in the Picker.

Wouldn’t it be nice for “days” in the “In how many days?” Text layer reflected the interval Text Property value chosen by a user? For instance, if a user chooses “Weeks” in the Picker, the Text layer would change to “In how many weeks?”

We can accomplish the following by creating a Combined Text layer that concatenates several Text layers and binding one of the Text layers t o the interval Text Property.

Our Combined Text layer will be made up of the following: “In how many ” + “interval value” +”s?”.

To build this Combined Text layer, let’s first select the “In how many days?” Text layer to insert 2 more Text layers underneath. You can insert a Text layer from the Insert (+) menu, or by simply typing t on your keyboard.

Next, edit each Text layer from the Inspector panel.

Then, select all 3 Text layers in the Layers panel and right-click to open the context menu and click on Combine Text.

Since, in this example, all of the Text layers in the Combined Text layer should look the same, drag and drop the modifiers around in the Layers panel to make sure they all get applied to the entire Combined Text layer.

Can you spot any other Combined Text layers on the screen? If you take a closer look at the final sentence on the screen, you’ll see that it’s made up of the following Text layers: “Do you understand that this ” + “will” + “ impact your credit score?”

As you can see, combining Text layers is useful for applying text formatting to one or more words within a sentence, all while maintaining natural spacing and text wrapping. This would be impossible to achieve by simply embedding layers within an HStack.

Now, let’s insert a Stepper to the right of the Combined Text layer, allowing users to select the number of installments for paying off their purchase. We’ll set a maximum value of 10 payments.

To start, select the Combined Text layer so that the Stepper gets inserted next to it. From the Insert (+) menu, insert the Stepper control.

Similar to the other two controls, let’s first bind a Number Property to the Value parameter to activate our Stepper control. From the Inspector panel, hover over the Value parameter and click on the Property Attachment Ring. Let’s name the Number Property installment and give it a default value of 1.

Next, let’s configure the rest of the Stepper parameters in the Inspector panel:

Then, to adjust the formatting, let’s remove the Spacer in the HStack as the Stepper now pushes the Combined Text layer to the Leading edge and we want the Stepper to be flush with the Trailing edge. Then, with the HStack labeled Payments selected in the Layers panel (it contains both the Combined Text and Stepper layer), we can increase the Spacing to 80 points in the Inspector panel to push the Stepper Label closer to the Stepper.

A user can use the Slider to set up the amount they spent and a Stepper to set the number of payment installments. To visualize how much they owe per each installment, we first need to create a Computed Property.

A Computed Property is a Number Property that contains simple arithmetic expressions, such as spend / 2. It can be combined with other Number Properties, too. For instance, to calculate the amount due per each installment, we’d need to create the following expression: spend / installment.

To create a Computed Property, select the Calculator Component and then click on the plus (+) icon in the top-right corner of the Computed Properties section of the Inspector panel. Let’s name it payment and set the expression to spend / installment.

Next, let’s bind the payment Computed Property to the $0 Combined Text layer, so that the amount changes based on the amount a user spends and the payment plan that they choose. To edit the Text layer labeled 0, expand the Combined Text layer labeled Amount in the Layers panel and from the text box in the Inspector panel, click on the Property Attachment Ring, to bind the Text layer to the payment Computed Property.

If you’re following along with the starter Judo file, then you may have noticed that additional payment blocks now show up underneath. That’s because this starter file comes with several pre-built Conditional layers. Let’s break them down.

Conditional layers are used to hide or show parts of your design based on a set of conditions. When you expand the HStack labeled Plan in the Calculator Component, you’ll find 9 pre-built Conditional layers, one for each possible payment plan (2-10 installments). Before we build the first one together, let’s first break down what goes in each Conditional.

The layers within each Conditional only appear when their installment Condition is met. For example, if you click on the the Conditional labeled In 4, you’ll find that the layers within will only appear if the installment Number Property equals 4. Since the default is 1, we can’t currently see the layers that make up this Conditional.

From the Inspector panel, let’s change the default value of the installment Number Property to 4 in the Calculator Component. Four new blocks will appear underneath—1 block per payment. If you expand the VStack in the In 4 Conditional, you’ll find two HStacks labeled Row 1 and Row 2. Each row consists of 3 VStacks—one for each payment block.

A payment block consists of 2 layers:

While the In 4 Conditional technically consists of 6 payment blocks, the last two are hidden with a Rounded Rectangle Overlay. Therefore, only 4 blocks appear.

The first payment block hasn't been wrapped in a Conditional yet. We saved that for this tutorial. As you can see, it appears as part of all payment plans, so let’s fix that so it only appears when the user chooses to pay in one time. To start, select the VStack in the Layers panel or on the canvas and from the toolbar, click on the Conditional button.

Then, from the Inspector panel, let’s create a Condition where the installment Property must Equal 1 in order for the VStack to appear. Since we had just set the default value to 4, the VStack will disappear.

Don’t forget to go back and change the default value of the installment Number Property in the Calculator Component to 1.

Next, let’s create Toggle that will allow users to confirm whether or not they’ve understood the following question: “Do you understand that this will impact your credit score?”

To place the Toggle underneath the question, start by selecting the Combined Text layer from the Layers panel or on the canvas. Then, from the Insert (+) menu, insert the Toggle control.

Similar to the other controls, the Toggle control won’t work unless we bind the Is On parameter to a Property. So, click on the Is On parameter and then on Create Property… Let’s create a Boolean Property called understand and give it a default value of False.

Let’s format the Toggle by changing the Label to No from the Inspector panel and applying some Padding to the Leading and Trailing edges.

Now, we need to create two states for the Toggle: Off and On. When the understand Boolean Property is set to False, the Toggle will be off. When it’s True, the Toggle will turn on. To accomplish this, we’ll need to create two Conditional layers.

Let’s first create the off state since the Toggle layer is labeled “No”. To do so, start by right-clicking on the Toggle layer to click on Make Conditional from the context menu. Then, create a Condition where the understand Property must be False. Since the default value of this Boolean Property is False, the Toggle layer will remain on the screen.

Now we need to create another Conditional where, when a user toggles the control on, the Label will turn to Yes. Let’s begin by right-clicking on the Conditional layer we just created to Duplicate it. Then, expand the Conditional layer to select the new Toggle layer. From the Inspector panel, change the Label to Yes.

Now, let’s go back to the Conditional layer to change the Condition. Since we changed the Label to Yes, this Toggle layer should only appear when the understand Property Is True. Since the default value of this Boolean Property is False, the Toggle layer will disappear from the screen.

To make it easier to sort through the layers in the Layers panel, let’s change the names of the Conditional layers to Off and On.

The last thing that we need to do is create two states for the Close Button: Disabled and Active. Our Close Button already looks disabled, so let’s start by duplicating it to create an active Close Button.

Start by right-clicking on the Button to copy it and then use the keyboard shortcut ⌘V to paste. Then, rename one layer to Disabled and and the other to Active for clarity.

With the layer labeled Active selected, remove the Opacity modifier from both the Text layer and the Rounded Rectangle in the Background modifier.

Even though the Active Close Button looks clickable, it will not actually be interactive unless we turn it into a Button and assign it an Action. To do so, right-click on the Active Close Button layer and then on Make Button from the context menu.

From the Inspector panel, click on the plus (+) icon in the top-right corner of the Actions section to add an Action. By default, it will create a Dismiss action. Since, in this example, we want the Close Button to close the Payment Calculator, we can keep the default Action as is.

Since the Button should look disabled when the understand Boolean Property is False and active when the understand Property is True, all that’s left is to drag the Disabled Close Button to the Off Conditional layer and the Active Button to the On Conditional Layer.

Now, you should only see the Close Button in its disabled state on the screen as the default value of the understand Boolean Property is False.

To preview how this Payment Calculator will look on a mobile device, we can insert an Instance into an Artboard. To start, insert an Artboard from the Insert (+) menu.

Then, with the Artboard selected, insert an Instance of the Payment Calculator from the Components section of the Insert (+) menu.

To preview the Artboard on your mobile device, make sure that you have checked the box Use as prototype start point from the Inspector panel, so that the Judo iOS app opens on the right screen.

The prototype starting point will have a flag icon before the name of the Artboard.

While the Payment Calculator initially seems to look good and work well, the greater the number of installments, the less we’re able to see on the screen and what’s more—we’re not able to scroll through the screen as layers start to hide.

To fix this, let’s right-click on the Calculator Component Instance and click on Embed in Scroll View from the context menu.

Now, when we send the file to our mobile device, the payment plan populates correctly and we can scroll through the screen to access any hidden layers.

Additionally, notice how since the background of the Calculator Component is transparent, we can see the white background of the calculator. When previewing it on a device, the background is no longer visible as it matches the background color of the device.

Let’s fix this by applying a Background modifier to the Scroll View container of the Calculator Component Instance and changing the Color. We can also apply the Ignores Safe Area modifier to the Rounded Rectangle, so that it fills the entire screen.

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 set a different default value for a Property.

For example, let’s first right-click to Duplicate the Artboard we created and then click on the Calculator Component Instance. From the Inspector panel, we can override the default values of all Properties, except Computed Properties.

Additionally, each Artboard has its own Preview Controls, so when you insert a Component Instance into an Artboard, not only can see how your design will adapt to different Property values, but also to different device settings, such as screen size, color scheme, language, and text size.

We can create as many Artboards as we’d like to see how our design looks in multiple scenarios at once. So, let’s Duplicate the new Artboard and configure the Preview Controls from the Inspector panel.

The best part is that any changes that you make to the Calculator Component will be reflected across all Instances.

Take a look at the code.

If you wanted to dig into the SwiftUI code that Judo automatically generated for you as you were building, you can do so easily by opening up the Code Inspector from the top-right corner of the app.