Judo: Design and Build Apps

ARTBOARDS

Add an Artboard to the canvas to define an area for a specific thing you are designing. Often times they are used for a screen in an app but can also be for smaller interface elements. Each artboard has its own preview settings so you can control the size, device model, orientation, language, color scheme and text size for your artboard to see how your design will adapt.

If you want to reuse the design you’ve created within your artboard, you can convert the artboard into a component by right-clicking or using the Create Component button in the toolbar with the artboard selected.

Another common use of artboards is to preview a component in various scenarios at the same time. Try adding multiple artboards to the canvas and insert an instance of the same component into each one. Now configure the preview settings on each arboard in different ways to see how your component reacts. For example, one artboard could be set to an iPhone 14, with extra-large text and dark mode. Another artboard could be set to an iPad in landscape orientation and the German language. This brings a powerful new workflow for designing components that allows you to see how changes in layout, color and typography react to multiple scenarios all at once.

COMBINED TEXT

SwiftUI has the ability to combine multiple Text views with the + operator. This results in a single Text view that flows naturally and adapts to the layout. Judo 7 adds this feature with a new layer called Combined Text.

To create a Combined Text layer, select multiple Text layers, right click and select “Combine Text”. Or, simply drag one Text layer into another one in the Layers Panel.

Each Text layer within the Combined Text can have its own modifiers such as Font, Foreground Color, Bold or Underline. This is useful for applying text formatting to one or more words within a sentence.

Each Text layer within the Combined Text can also be bound to different component properties or data from a Data Source. This makes use cases like combining first name and last name into a single Text layer possible.

COMPUTED PROPERTIES

Computed Properties are number properties that can contain simple arithmetic expressions. For example “48 / 2 + 16”. They are defined on Components just like normal properties however they can’t be overridden in an instance.

Computed Properties can also use other properties within their expressions, such as “48 / itemCount + paddingValue”.

CUSTOM VIEWS

The Judo SDK now supports overriding component properties of type “Component” with a custom SwiftUI view using the same API which facilitates overriding text, number and image properties. You’ve always been able to insert Judo views into your own SwiftUI views in Xcode and now with component overrides you can do the reverse. Add a placeholder component to your Judo design, then override it with a custom view in Xcode. This can be used for anything that works with SwiftUI, including maps, custom video players and custom controls.

DRAG TO SELECT AND ZOOM

You can now click and drag on the canvas to quickly select a group of elements. You can also click and drag while holding the Z key to zoom a specific region of the canvas. This is one of many features we will be adding to Judo in 2024 with the goal of feeling more natural to users experienced with other design tools like Figma and Sketch. Keep an eye out for more of this in the coming months!

PROTOTYPE START POINT

You can now define the component, or artboard, to start from when opening a Judo file in the Judo iOS app. Previously the app would always select the first component it found in the layers panel. This was a point of frustration as you would continuously need to reorder your layers as you add more components to ensure your starting point doesn’t change.

Judo 6 brings modal presentation and new ways of integrating Judo files into an Xcode project—including the ability to load Judo files remotely. Commonly known as server-driven UI, this technique allows you to update parts of your app’s user interface immediately, to all users, without going through the App Store review process.

WHAT'S NEW

Use the new Sheet and Full Screen Cover modifiers to present views modally on top of other modifiers.

A new Presentation Detents modifier can be used on content that is presented in a sheet to configure the vertical size of the sheet when running on an iPhone in portrait mode.

By default, sheets can be dismissed by swiping down when running on an iPhone in portrait mode. This can be disabled with the new Interactive Dismiss Disabled modifier.

Customize the color of a sheet background with the Presentation Background modifier.

Disable the dimmed overlay when a sheet is presented so the user can interact with the content behind it using the Presentation Background Interaction modifier.

Configure the radius of a sheet's corners with the Presentation Corner Radius modifier.

Configure the visibility of the drag indicator on a sheet with the Presentation Drag Indicator modifier.

The Judo SDK includes a new AsyncJudoView which can be used to load a Judo file asynchronously, including from a remote server. It closely resemble’s SwiftUI’s AsyncImage and can be used in much the same way.

New event modifiers On Appear, On Disappear and On Tap Gesture were added that are especially useful when integrating a Judo file in an Xcode project. For example, On Appear can be used to track views of a Judo screen in an analytics platform.

You can now preview your designs in 23 additional languages. Judo now supports all 35 of the languages supported by the iOS simulator.

Use the new Font Weight modifier to apply a specific weight to a Text layer that is using one of the built-in text styles. This facilitates custom weights while retaining the ability for text to scale with the user’s preferred type size.

Adjust the spacing between letters on a Text layer with new Kerning and Tracking modifiers.

Add a border to any layer with the Border modifier.

A new Blur modifier can be used to apply a blur effect to any layer.

If your mouse has a middle button (or scroll wheel) you can press and hold to pan, similar to Figma.

WHAT'S CHANGED

All of a layer’s modifiers are now displayed in the Layers Panel. Previously only the Background, Overly and Mask modifiers were displayed. With this change, you can now copy, paste and move modifiers from one layer to another.

The list of modifiers in the Add Modifier menu has been reorganized including some new categories and changes to the colors used to represent each category.

You can now delete properties without requiring a trackpad.

The alignment picker has been redesigned to be more intuitive and more familiar to Figma users.

WHAT'S FIXED

Fixed an issue that prevented HStacks from being aligned anything other than center.

The Toolbar Color Scheme modifier will no longer prevent your content from displaying when Navigation Bar is unchecked.

Icons in the tab bars were displaying smaller in the canvas than they do when displayed on a device.

The On Tap Gesture modifier is now listed in the Events section of the Add Modifier menu.

The Underline modifier now shows the keyboard shortcut in the Add Modifier menu.

Documents will no longer be considered edited if the only change you have made is changing which layers are selected.

The Text Content Type modifier now correctly supports multi-select.

The resizable(capInsets:resizingMode:) and renderingMode(_:) modifiers are now correctly displayed in the code generated for Image layers.

Buttons will no longer display the `.role` parameter in the generated code when it uses the default value to more accurately represent the way a developer would write the code.

Async Images can once again be made resizable.

Judo 5 adds a new Video Player and new ways of configuring Scroll Views.

NEW FEATURES

You can now a Video Player to your design and configure it with a URL of a hosted video. The video is playable when previewing your design in the Judo iOS app or your own app when embedding a Judo file in an Xcode project.

Three new modifiers were added that facilitate advanced scroll effects: Scroll Target Behavior, Scroll Target Layout and Container Relative Frame. The combination of these three modifiers enable behaviors such as paging and full screen vertical swiping as popularized by the TikTok app.

A new Underline modifier was added for displaying Text layers with a solid, dashed or dotted underline.

Text Field now supports the axis property allowing you to create automatically-growing text fields as text is entered into the field.

The Insert + menu has been reorganized to be more intuitive.

Pressing the S key now inserts a Spacer.

The context menu, accessed by right-clicking a layer in the Layers Panel, has new menu items for embedding layers in containers, using layers as a Background, Overlay or Mask, and making layers into Buttons, Navigation Links and Conditionals.

In addition to the Layers Panel, the context menu can now also be accessed by right-clicking layers directly on the canvas.

The toolbar has 10 new buttons, providing shortcuts for the most common tools and functions.

Pressing the number keys 1-9 will adjust the opacity of the selected layers similar to Sketch and Figma.

Modifiers now support multi-select. When multiple layers are selected that contain the same modifier, you can adjust the properties of all modifiers in the Inspector Panel at the same time.

RESOLVED ISSUES

After editing a text or number value in the Inspector Panel, you will no longer lose your changes if you click on the canvas while the text field still has focus.

The Code Inspector now correctly displays code for Conditional layers.

Text Fields now properly support number properties and will display a better error message if bound to an unsupported property.

Fixed an issue with the way Tab View previewed its size on the canvas.

Tab Views using the page style weren’t correctly showing dots for child layers that didn't have a Tab Item modifier.

Fixed some minor issues with the Code Inspector related to the Clip Shape and Aspect Ratio modifiers.

A glitch with the selection indicators on the canvas emerged with Sonoma and has been resolved.

Inserting items once again positions them in the center of the canvas.

A handful of modifiers were missing from the Add Modifier menu and could only be added if you searched for them by name. This has been rectified.

Embedding a Judo view within your own Navigation Stack in an Xcode project now functions correctly.

Fixed an issue where some files created in older versions of Judo didn't open correctly in the latest version.

Judo 4 adds Form and Section views for laying out and grouping controls. It also adds 6 more SwiftUI modifiers.

---

New Features in Judo 4

Added a new layer type called Form which is equivalent to the SwiftUI view of the same name. Forms are used to group controls such as Text Fields and Toggle switches into a consistent layout. Forms are commonly used for settings screens.

Also added a Section layer type that can be used within Forms to break up items into separate sections.

Added support for 6 more SwiftUI modifiers:
• Fixed Size
• Blend Mode
• Rotation Effect
• Position
• Clipped
• Clip Shape

---

Resolved Issues in Judo 4

The iOS app will no longer annoy you with the instructions on how to exit your Judo preview every time you open the app. The first time you exit a Judo preview the app will take that as a cue that you understand the feature and will no longer show you the instructions.

Fixed a bug where typing an empty value for a Picker option would remove the text field.

The focus of 3.1 was on improving the way you navigate the canvas with scroll, zoom and pan as well as improving the performance of the canvas in general.

---

New Features in Judo 3.1 Beta 1

Zooming the canvas now takes the current mouse position into account. This means pinch-to-zoom on a trackpad works as you’d expect and zooming with the mouse wheel (while holding the command ⌘ key) will zoom in and out of the exact spot where your mouse is positioned.

Holding the space bar now enables pan mode. While in pan mode you can click and drag with your mouse to move the canvas.

Three new zoom features were added: Zoom to Fit Canvas, Zoom to Selection and Center Selection. These work the same as other design tools like Sketch and Figma and mirror the same keyboard shortcuts.

When a Component Instance is selected, a new Edit Main… button is displayed in the Inspector Panel. Clicking this button will select the Main Component the selected layer is an instance of, and centre the Main Component in the canvas. This is useful for making changes to a selected instance. This works just like similar features in Figma and Sketch.

---

Resolved Issues in Judo 3.1 Beta 1

Fixed a bug with the iOS app where buttons using the Open URL action wouldn’t work if the URL was mapped to a component property or value from a data source response.

The padding on the menu picker style wasn’t quite right. This was noticeable in the Bumble onboarding example where the country code picker and phone field appeared to have different heights, even tho they are identical when running in the iOS app. The canvas logic has been updated to fix this.

We made close to a dozen individual improvements to the accuracy of the generated SwiftUI code.

Zooming with a physical mouse wheel should now feel more natural.

The "Keep Me Signed In" checkbox in the Amazon example is now bound to a value so it can be toggled when running on a device.

Judo 3 brings form controls and the ability to modify component properties—allowing you to create immersive prototypes that dynamically change based on user selection. You can use form controls to:
• Update text content with Text Field and Secure Field.
• Change the size, corner radius, opacity—and more—of a layer with Slider and Stepper controls.
• Hide and show different layers with Toggles.

New Features in Judo 3:
• You can now add Text Field, Secure Field, Picker, Slider, Stepper and Toggle layers to your designs.
• New button actions have been added for setting, toggling, incrementing and decrementing component properties when a button is pressed.
• Frame, Padding, Opacity, Aspect Ratio, Spacer width, Layout Priority, Offset and Shadow values can now be attached to component properties. With this in place you can now use Text Field, Slider and Stepper controls to modify layout properties of layers.
• A new Ignores Safe Area modifier has been added which gives you more control over how your layout responds to the safe area of the device.
• Components that are intended to be navigated to from within a navigation stack can now be displayed on the canvas wrapped in a navigation bar to better reflect how they will be displayed on device. Similarly, components can be wrapped in a Tab Bar as well.

OVERVIEW

The biggest change in Judo 2.2 is the introduction of device bezels around components that are set to Simulate Device. This helps visualize the effect of the safe area on your designs—the area that houses the notch, Dynamic Island and home indicator.

When you insert a Tab View or Navigation Stack at the root of your component, you can now see how the toolbars in iOS automatically extend into the safe areas.

If you insert a layer that fills its parent's space—such as a Rectangle—you'll see that by default it respects the safe area. This ensures your content is not occluded by the notch and that your content does not interfere with the use of the home indicator.

Sometimes you want your content to extend into the safe areas—the same way as Tab Views and Navigation Views. This is done in SwiftUI with the use of the ignoresSafeArea(_:edges:) modifier. Judo will be adding support for this in our upcoming 3.0 release.

NEW FEATURES

• When you have an Image layer selected, the Inspector Panel now displays a summary of the supported configurations below the Image Picker.
• When an Image layer has Template mode enabled, the Add Modifier menu will now suggest the Foreground Color modifier to tint the image.
• Pressing ⌘B will now add a Bold modifier to the currently selected layer(s) and similarly ⌘I will add an Italic modifier.
• Keyboard shortcuts were added for creating components (⌥⌘K) and detaching components (⌥⌘B).
• The Insert menu was reorganized to better group layers of similar types.
• The Layer menu now has a Collapse Layers option which collapses all the layers in the LayersPanel. You can also press ⌥L to invoke this feature.
• Pressing ⌘D will now duplicate the current selection saving you a step when you want to copy and paste in place.
• You can now type the dot character (.) in the Add Modifier menu to list _all_ modifiers. You can then further refine the list by continuing to type the name of the modifier you are searching for.

RESOLVED ISSUES

• Dragging to reorder modifiers had an "off-by-one" error which made dropping in the correct place awkward. This has now been fixed.
• When detaching components with bound properties the layers using those properties would have their values reset to empty. This has been fixed.
• The SwiftUI code generated for ZStacks is now printing in the correct order.
• A bug was fixed which prevented passing data from a Data Source through to another component used as the destination in a Navigation Link.
• The Insert > Component menu in the main menu now correctly lists the components that have Show in Insert Menu checked.

New Features in Judo 2.1
- When adding the padding modifier, it will now set the vertical and horizontal values to 16 by default.
- Pressing shift+return when editing the contents of a Text layer will now insert a line break.
- Background, Overlay and Mask modifiers default to Rounded Rectangle instead of Rectangle. This makes it faster to apply a corner radius.
- Holding shift and pressing the up/down arrows when a numeric text field has focus will increment or decrement the value by 8 instead of 10 to better align with standard SwiftUI spacing values.
- When detaching a component, it will no longer embed the contents in a ZStack unless the Main Component has more than one root layer.
- When inserting a Navigation Link it will now have a default Text label.

Resolved Issues in Judo 2.1
- Tab Views now display the fill variant of symbols for tab items. This aligns with the behavior in SwiftUI.
- When creating a Text layer by pasting text from the clipboard, the Text layer will now be correctly entered in the canvas.
- Creating a component instance property on a Main Component now defaults to the current instance value.
- Fixed an issue with the Add Modifier Button that would sometimes list duplicate modifiers.
- The properties section will no longer show up in the Inspector Panel for component instances when the main component doesn't have any properties to override.

• Components: Similar to components in Figma, or symbols in Sketch, designers can now create reusable elements in Judo 2 that update document-wide as you make changes. Components have replaced what was previously known as a Screen.
• Component Properties: When creating an instance of a component, certain parts can be customized, defined by a set of properties on the main component. In this release you can override text content and swap out nested component instances.
• Modifiers: The inspector panel has been completely redesigned around the concept of SwiftUI modifiers. The full set of modifiers Judo supports is available in a searchable list. Additionally, the inspector panel will suggest modifiers to apply based on the context of the current design.
• Code Preview: The code preview functionality was completely redesigned. It now lives in a panel alongside the canvas. The new panel generates code in real time as you design on the canvas and make adjustments in the inspector panel.
• Navigation: The way you construct interfaces that navigate from one screen to another has been rethought to mirror the approach used by SwiftUI. Two new elements—Navigation Stack and Navigation Link—have been added as well as modifiers for adding toolbar buttons and configuring the appearance of the navigation bar.
• Tab Views: A new Tab View element has been added that represents the SwiftUI equivalent. A Tab View Style modifier configures the way the tabs appear: Either has a bottom bar or as a page style. The page style is similar to the Carousel element in Judo and so the Carousel element has been removed and replaced with Tab Views.
• Judo SDK with a pure SwiftUI API. With a single line of code you can embed a Judo document into an existing SwiftUI (or UIKit) interface: Judo.View("Onboarding Flow").
• Asset Catalog: A central place to manage images used within the document.

Plus many, many more. Visit community.judo.app for all the details.

Bug fixes and performance improvements.

Bug fixes and performance improvements.

• bug fixes & performance improvements

Experiences are now presented full screen instead of modally. Long Pressing two fingers when the experience is open will display a utility menu where you can restart, exit or share the experience.

With a free Judo Cloud account you can publish experiences directly from the Mac app and share them with QR codes or simple links.

- DataSources now have an option to auto refresh at a specified interval.
- Bug fixes and performance improvements.

Resolve an issue where image downloads were prioritized incorrectly causing images to resolve very slowly.

Bug fixes and performance improvements.

- Resolve an issue with key paths to non-existent keys in dictionary objects (both user info and data). The key path would return the parent object rather than `nil`.

- WebViews now support HTML snippets, useful for making faster WebViews that also work offline.
- Improved support for data source JSON with keys with special characters, including object traversal period characters.
- The default logic for determining what the active UIViewController in your app to present Experiences on top of has been improved.

* Resolve an issue with float rounding;
* Resolve an issue with carousels embedded within collections;
* Resolve an issue where collection limits could cause a crash;
* Add a new interpolation helper, `replace`.

- Support for configuring authorization rules for your APIs when using them as Data Sources.
- Fix user input in web views, including for embedded YouTube videos.
- Other bug fixes and usability improvements.

Bug fixes and performance improvements.

Bug fixes and performance improvements.