New in Judo: SwiftUI Code Export

Designers and developers use Judo to design, build, and ship user interfaces more efficiently. Judo 1.8 makes this process even faster by allowing you to export Judo experiences as SwiftUI code, which can then be imported into any Xcode project.

How It Works

When you have a single layer selected, you can see a preview of the SwiftUI code needed to create the layer at the bottom of the Inspector Panel — the group of controls on the right side. Clicking “Open Preview...” will open the preview in a larger window, and you can copy the code to your clipboard.

You can also right-click any layer in the Layers Panel — the list of layers on the left — and choose “Copy SwiftUI Code.” Or, with a single layer selected, choose “Copy SwiftUI Code” from the Edit menu.

Use Cases

Now that you know how Code Export works, let’s look at three different ways to use it.

Learning SwiftUI

Code Export in Judo is a great way to learn SwiftUI. When writing code, you need to know the code you want to write ahead of time, but the learning curve for new frameworks like SwiftUI can be steep. However, visual build tools like Judo are much more discoverable. Add a Text layer in Judo, and the Inspector Panel presents you with a set of controls to customize the appearance and layout of your text.

Toggle some buttons, adjust some menus, and you’ve got center-aligned title text that responds to accessibility settings, works in dark mode, and has 16 points of padding on the left and right edges.

For comparison, the SwiftUI code you’d have to know ahead of time to create that same text looks like this:

Text("Money Mover —\\nmulticurrency card")
    .font(.title)
    .foregroundColor(Color(uiColor: .label))
    .multilineTextAlignment(.center)
    .padding(
        EdgeInsets(
            top: CGFloat(0.0),
            leading: CGFloat(16.0),
            bottom: CGFloat(0.0),
            trailing: CGFloat(16.0)
        )
    )

This can be challenging when you’re learning SwiftUI, and you may find yourself scouring documentation and developer forums to find the answer you need. Now with Judo, you can build visually and preview the code needed to recreate your designs in SwiftUI.

Developer Handoff

When designing for native mobile apps, there are a number of different variables that affect how your design will appear to different users, including:

• The size of the user’s screen
• Dark appearance versus light appearance
• The user’s preferred text size setting
• The user’s preferred language

Different combinations of all these variables result in a huge number of permutations. When designing with traditional design software, you need to create separate versions of your design for each of the possible variations to test how your design will react to, e.g. longer copy for German-speaking users or larger text sizes for users with accessibility needs. It isn’t feasible for designers to test all possible combinations of their designs, which leads to most of these issues being worked out at build time by the developer.

Judo is a platform-specific design tool focused on native iOS apps, and the nuances of the different device sizes and settings that your design needs to accommodate are baked into the software. Judo includes powerful preview features that allow designers to dynamically preview their designs in the myriad of permutations they need to accommodate. This results in more robust designs that are ready for developers with all the kinks worked out ahead of time. And now, in Judo 1.8, designers can hand developers the actual code required to build their designs.

Building Faster

Even experienced SwiftUI developers can benefit from using Judo to build faster. Let’s face it: SwiftUI previews in Xcode are slow at best, and they’re completely unusable for most non-trivial views. Judo allows you to assemble SwiftUI views through configuration instead of recompiling your code every time you make a change. This facilitates a much more responsive way of building visually, where changes are reflected on the canvas immediately. With Code Export, Judo becomes an even more powerful tool for building SwiftUI interfaces that can be imported directly into your Xcode projects.

Conclusion

This post introduced our newest feature, SwiftUI Code Export, and it outlined three different ways you can use it:

• As a new SwiftUI developer, to learn SwiftUI
• As a designer, to design in Judo and work more effectively with developers
• As an experienced SwiftUI developer, to build SwiftUI interfaces faster

Install Judo for free from the Mac App Store and give Code Export a try today.