Welcome to Judo! Let's go over some of the main features of the app and then dive into parts of an example Judo file.

Every time you open Judo, you’ll be greeted with the Welcome Screen, which offers you a few different ways to get started. You can start building with:

On the left, you’ll also find a collection of resources. Click on:

Let’s open up the List View template.

Judo is a visual design tool, so it looks and feels like many design tools that you’ve worked with. If you’re a designer, you’re going to love the Figma-like feel it. To start, you’ll find a panel of all of the layers in your project on the left, the canvas in the centre, and the Inspector panel on the right, which will allow you to customize your layers.

If you’re a developer that understands SwiftUI, you’ll also feel right at home as you’ll find many of the modifiers that you’ve come to love in Judo.

Judo surfaces SwiftUI in a visual canvas, and everything that you create on the canvas translates 1:1 in the Code Inspector. Since SwiftUI is a fundamental part of Judo, the quality of the code is better than what other design tools are capable of, meeting the expectations of discerning developers.

For instance, notice how when we change the Navigation Title to “Solar Eclipses”, and apply the Toolbar Background Visibility and Toolbar Background Color modifiers, the changes automatically appear in the Code Inspector.

Let’s take a closer look at one of the Components.

Stacks and Spacers are the foundational elements of all layouts in SwiftUI as they organize content horizontally, vertically, or on top of one another.

Take, for example, this Row Component. It's made up of a VStack, which is a container that organizes layers vertically. In this case, it vertically stacks layers embedded in a Navigation Link and a Divider.

Within the Label of the Navigation Link, you’ll find a horizontal stack, or an HStack, which horizontally combines an Image layer, another VStack which vertically combines two Text layers, a Spacer, and another Image layer.

Stacks and Spacers are flexible, so they automatically adjust to varying screen dimensions and user device settings.

In Judo, you will use Navigation Links and Navigation Stacks to build interactive, multi-screen user flows.

A Navigation Link comes with two parameters: Label and Destination. Layers that you place in the Label parameter indicate what a user can click on to navigate to the next screen.

The Destination parameter sets the screen that a user will navigate to upon interaction with the Label.

In this example, the HStack in the Row will take a user to the Detail screen. This interaction is activated by the Navigation Stack placed on the root screen.

To edit a layer, you can expand the layers from the Layers panel until you find the one you want to edit, or you can select the layer directly on the canvas. Let’s apply the Foreground Color modifier to this Text layer to make it blue.

Notice how after we edited the Text layer, the other Text layers changed as well. This is because this Row is a Component, which is an element that you can reuse in your design.

For instance, if you take a look at a different Component labeled List, you’ll find Instances of that Row Component in it.

In each Instance, you may also find a set of Properties. These are parameters that you create in a Component, which you can then edit in each Instance.

For example, in the Main Row Component, we have a Title, Image, and Subtitle Property with default values. When we select an Instance, we can change the default values. Since we’re building a list of solar eclipses, let’s upload an Image of an eclipse, change the Title to a date, and add the type of eclipse for the Subtitle.

Let’s create a simple Component together to get comfortable working with Judo. This Component will consist of a simple Text layer with a Background and we'll bind the Text layer to a Property, so that we can alter the text in Instances of the Component.

Let’s start from the Insert menu. Here you’ll find a variety of SwiftUI layers, containers, and controls that you can add to your project. Let’s insert a Text layer to the canvas.

To customize it, let’s apply the Font Modifier and set the Style to Caption. Let’s also apply the Background modifier to add a Rounded Rectangle behind it, and some Padding, to give the text some space to breathe.

To change the color of the Background, click on the Rounded Rectangle in the Layers panel and select a new color from the Inspector panel.

To make the text editable, let’s turn this layer into a Component. No matter which way you work, you can find the actions that you need from any location on the app. For instance:

Let’s name it Tag.

To create a Text Property, select the Component and then click on the plus (+) icon in the top-right corner of the Properties section in the Inspector panel. Let's call it Text and give it a default value of Learn More.

To bind the Text Property to a Text layer, select the Text layer, hover over the text box in the Inspector panel, click on the Property Ring Attachment, and select the Property labeled Text.

To insert an Instance of the Tag component, select the layer that you'd like to place it after in the Layers panel and then from the Insert menu, insert an Instance of the Tag Component.

Alternatively, you can right-click to Copy the Tag Component and then use the keyboard shortcut ⌘V to paste in an Instance.

You can change the text displayed in the Component Instance by replacing the default value of the Text Property in the Properties section of the Inspector panel.

To preview how your screen will look and behave in real-time, you can send the file to your mobile device and preview it using the Judo mobile app.

To make sure that the preview begins on the correct screen, check the box Use as prototype start point in the Inspector panel.

In the preview, you can scroll through the list of solar eclipses. When you click on one, the Detail screen appears, complete with a Back button so you can easily go back to the Main screen.

Judo is also designed to fit right in your Xcode project, so your design is always ready for handoff. With just a few clicks to export your file to Xcode, developers can immediately begin working with your design. The best part? Any adjustments made to the embedded Judo file in Xcode will automatically update in the project.