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.