All Collections
Other
▶️ Getting Started with Judo
▶️ Getting Started with Judo

New to Judo? Here's a quick overview, so you can get started building right away.

Updated over a week ago

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.

★ Pro Tip

If you haven’t already, download the Judo Mac app from the App Store.

Where to Start

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:

  1. One of the example files

  2. One of the templates on the left-hand side

  3. A recently created file

  4. A whole new file

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

Let’s open up the List View template.

The Mac App

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.

SwiftUI Modifiers

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.

★ Pro Tip

If you have any questions about what each layer or modifier does as you design in Judo, you can click on the info icon to access our documentation.

The Code Inspector

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.

Building in Judo

Adaptive Layouts

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

➡ Check out this tutorial for a complete breakdown of SwiftUI Stacks and Spacers.

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.

Navigating Between Screens

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 learn more about Navigation, check out this tutorial.

Components and Instances

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.

Create Your First Component

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.

Insert a Text Layer

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.

Customize the Text Layer

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.

Turn the Text Layer into a Component

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:

  • Right-click to make the context menu appear and then click on Create Component

  • Use the keyboard shortcut ⌥⌘K

  • From the menu bar, click on Layer to turn the selected layer into a Component

  • Click on the Create Component button in the toolbar

Let’s name it Tag.

Create & Bind a Text Property

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.

⬇ Note

An alternate way of creating a Property is to do so directly from the Property Ring Attachment menu.

Insert & Configure Component Instances

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.

Previewing Your Design

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.

➡ Click, here, to download the iOS 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.

Exporting to Xcode

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.

➡ Check out this tutorial on custom views.

Did this answer your question?