Over the past year, we’ve had the opportunity to speak and work with thousands of developers, designers and product managers. Your input has been invaluable as we envisioned what was next for Judo. This feedback led us to some major updates to the product that will fundamentally change how Judo works, while significantly building on the value it brings to designers and developers building mobile apps.
When we launched the Judo Mac App over a year ago, we wanted to advance a value proposition we’ve always focussed on—helping product teams build and iterate more efficiently. We did this by enabling cross-platform, Server-Driven UI, or, the ability to update your app’s user interface without an App Store release.
Over the past year, we learned two things:
- While product teams are looking to build and iterate faster, publishing to the App Store isn’t the most substantial thing slowing them down. With app review times improving, the true challenges stem from internal workflows and the frustrating back-and-forth between designers and developers.
- The nature of server-driven UI limited the pace with which we could deliver new features. A SDUI solution requires parity between the code that exists in your app and the capabilities of the Judo Mac app. Every time we launched a new feature in Judo, customers would need to update their app to support the new features. This made the idea of server-driven UI self-defeating and significantly limited the pace at which we could move our own product forward.
How is Judo Changing?
We’re changing direction. Instead of solving the problem of skipping App Store updates, we’re focusing on improving the workflow between designers and developers. We believe that designer-developer handoff is broken and to solve this problem well requires software that is familiar to designers and developers alike—software that makes building an app’s user interface a collaborative process instead of handing off files back and forth. This is our vision for Judo and it starts today with the release of the Judo 2 beta.
To accomplish our vision, we’ve identified three themes that will guide our roadmap:
- SwiftUI in a Visual Canvas
- A Figma-like Experience
- Workflow Integration
If you’re still with me, keep reading to learn more about these themes, how they’re represented in the new Judo 2 beta and what we have planned for the rest of 2023. If you’re ready to jump right in, join our TestFlight group to get your hands on the new Mac app today.
SwiftUI in a Visual Canvas
In order for a visual build tool to produce working user interfaces, it must be purpose-built for the platform it is being used to design for. On the web this means tools like Webflow and Framer that surface the concepts of HTML and CSS into the design process. The code these tools generate is clean and structured because HTML and CSS is baked into their products. Building the user interface, as opposed to just designing it, is fundamental to these products—considered from the ground up instead of an after-thought.
The modern frameworks used to build native apps are SwiftUI (Apple platforms) and Jetpack Compose (Android). To achieve our vision for Judo we need to follow a similar strategy and bake the concepts of these frameworks into the product itself. They must be a fundamental part of the design process.
With the current version of Judo you can design and build interfaces for both iOS and Android. But to support both platforms we’ve had to live in a middle ground, only supporting features that exist on both. This significantly limited what you could build with Judo for each platform and we started to run up against a wall—the intersection of the SwiftUI/Jetpack Compose Venn diagram just wasn’t big enough.
Starting with Judo 2, we’ve made the hard decision to temporarily drop support for Android and focus entirely on SwiftUI. SwiftUI is an incredibly powerful framework that is also approachable. Not only is it the best way to build an iPhone app but it also supports apps for Mac, Apple Watch and even Apple TV. SwiftUI is increasingly popular with Apple developers and more designers are learning it every day.
The New Inspector Panel
By focusing entirely on SwiftUI, we’re able to surface the framework more naturally in Judo’s user interface and support more of its features. The first manifestation of this is Judo’s new inspector panel which was built entirely around SwiftUI’s modifiers. Modifiers are how SwiftUI applies properties to views such as changing the font size of text, the color of a shape or adding padding around an image. Judo’s inspector panel makes using modifiers easy and discoverable. The full set of modifiers Judo supports is available in a searchable list but even more convenient is Judo’s ability to intelligently suggest modifiers based on the context of your current design.
SwiftUI Code Preview
Plugins for general purpose design tools that automatically convert your design into code don’t work very well. They result in ugly, unmaintainable code, fraught with workarounds that developers will not accept.
It’s not the plugin’s fault. A general purpose design document simply doesn’t contain enough information to properly generate code from it. There’s no way to know that a blue rectangle with text on top is supposed to represent a SwiftUI Button or how a piece of text should adapt on smaller screen sizes.
Judo on the other hand puts real SwiftUI components and modifiers into the designer’s hands—a Rectangle is a Rectangle and a Button is a Button. Judo generates clean, structured code that is identical to how a developer would build it by hand. This code can be copied and pasted into Xcode or simply inspected to understand and learn the SwiftUI being used under the hood.
The new code preview panel generates code as you design. Keep it open next to the canvas while you’re designing to see the code update in real time as you add new layers or adjust modifier properties.
Coming Soon: Form Controls
The most requested feature we’ve heard from our users is the ability to add controls like text fields, drop-down menus and toggle switches to your Judo designs. This is something we’ve wanted to add since the early days of Judo but supporting both SwiftUI and Jetpack Compose made this difficult.
Each platform has its own set of supported controls. For example, a Segmented Control only exists in SwiftUI whereas a Radio Button only exists in Jetpack Compose. Of course many of them exist on both, but even when they do the way they look and behave is very different. Even something as simple as a text field is actually quite different on the two platforms. SwiftUI supports features like keyboard case and autocorrection while Jetpack Compose has the concept of filled vs. outline. To do justice to both platforms meant we’d have to support the entire set of controls on each platform separately and figure out a user experience that would let the designer build for both platforms while not having to design everything twice.
Because of the requirement to support both platforms, we kept coming to the conclusion that this feature would add too much complexity to the product. However, with our new focus on SwiftUI, this feature has made its way back to the top of our roadmap. We’ve already started development for adding TextFields, Pickers and Toggles to Judo and can’t wait to release it later this year.
A Figma-Like Experience
Judo 2 surfaces SwiftUI in a way that is instantly familiar to developers. But to achieve our vision of a product that is equally familiar to designers, Judo needs to provide a user experience that designers are also accustomed to.
Designers coming from Sketch, Figma or Adobe XD need to feel at home out of the gate. Drag and drop, resize handles and positioning in absolute coordinates are foundational to the way designers work—not to mention the keyboard shortcuts ingrained in their muscle memory. Part of our vision for Judo is to stand on the shoulders of giants and leverage these established conventions to make Judo feel as natural to designers as the tools they’re already using.
Starting with Judo 2 we’ve added to features that make headway here and there are more on the horizon for 2023.
An Infinite Canvas
When building a user interface the developer typically has a plan to follow. The design is established and the UI can be constructed top-down. They might start with the tab bar, then the screens for each tab and work their way down to the buttons in a list view.
Conversely designers are starting from a blank slate. They need to be able to try different font sizes, tweak colours, swap out images and adjust spacing until they find something that works. Designers might start with the button and work their way up to an entire screen. Designers work bottom-up as opposed to top-down. The canvas is fundamental to this creative process and enabling a bottom-up approach to designing apps.
Similar to other design tools, you can now design and build on an infinite canvas in Judo 2. Drag and drop images from Finder right onto the canvas. Add text and rectangles and move things around using absolute positioning until you’ve got something working. When you’re ready to turn your design into a working user interface, start grouping your layers into components.
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. This helps to create and maintain consistent design and have become a fundamental tool in a designers toolbox.
Components in Judo support properties which allow overriding text values, conditionally showing elements or swapping out images on each instance of a component. And if you’ve ever used Judo’s Data Sources before, you’ll be pleased to know that component properties can be connected to data from APIs. Building dynamic user interfaces driven by real content is even easier than before.
Workflow Integration
Xcode
For developers who work in Xcode, we’re releasing an entirely new way of embedding user interfaces designed and built in Judo, directly into any Xcode project. It starts with our new Judo SDK written in pure SwiftUI.
Drag a Judo file into your Xcode project and use the Judo SDK to render it. The SDK loads your Judo file and exposes it as a native SwiftUI view so you can embed it within other SwiftUI views, or a UIKit view controller.
Rendering Components
The new Judo SDK also provides an API to render a specific component from your Judo file. Simply pass the name of the component to the SDK.
With this feature you can build an entire design system in Judo and insert reusable components anywhere in your existing app.
Component Properties
When instantiating components from a Judo file, you can pass properties from your own code to customize the rendering.
Custom Button Actions
When a user taps a button in a Judo view you can respond with custom code from directly in Xcode.
The new Judo SDK enables a really powerful workflow with a clean abstraction of logic and UI presentation. Designers can design and build the user interface in Judo and developers can focus on the hard stuff—data management and wiring up button clicks.
Other Design Tools
Most product teams have existing designs built in Sketch, Figma or Adobe XD and we know how important it is to bring those designs with you when trying a new tool or workflow. As part of our strategy we are working on integrations with these products that will allow importing your existing designs.
Conclusion
Judo 2 is the first step of many on our journey to solving the designer-developer handoff problem. You can read the release notes to see everything that’s included in the release and join our TestFlight group to get your hands on the new Mac and iOS apps. We’d love to hear your thoughts on the product and the direction we’re going so please check out our forum and add your feedback—we read every post!
