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.