Table of Contents:

From the top

What is DetailsPro? It's an app for designing apps. SwiftUI has made the lives of developers easier by giving them a fun way to use what makes iOS apps great: Dark Mode, SF Symbols, typography, etc. Designers could just as easily benefit from these technologies, but they’re stuck using the same software as before: separate apps, mostly derived from Photoshop, that they have to download templates and configure presets for themselves to make things look like iOS.

I realized that if I could make SwiftUI more accessible, designers could take advantage of all the same fun features. So, I made a way to use SwiftUI without writing any code and export SwiftUI code at the end.

Read more on DetailsPro's website

Designing with DetailsPro with the edit area on the left and the live preview on the right.

Designing with DetailsPro with the edit area on the left and the live preview on the right.

Exporting SwiftUI code in DetailsPro.

Exporting SwiftUI code in DetailsPro.

What? How? Why?

Great question. Basically, DetailsPro takes cues from the UI of Shortcuts, and from creative design apps, and blends them together into an instantly-familiar-but-powerful interface where you can drag, drop, and rearrange Views (as they are called in SwiftUI) to create your designs.

All the same characters from SwiftUI are in DetailsPro, like Text, Image, SF Symbols, Stacks (Vertical, Horizontal, and Layered), Modifiers (Color, Opacity, Font, Frame, Padding, and more), Dark Mode-friendly* system colors (Primary, Secondary, System Background, System Fill, etc), Gradients, Blurs, and more.

So designers get an environment that was made for design, but is under-the-hood putting everything they’re making together as live SwiftUI.

→ *Since DetailsPro shows your design in SwiftUI in realtime, you can even switch your device to Dark Mode to truly design in Dark Mode. Text colors will flip because your design canvas is true SwiftUI. You can even design in Light Mode and Dark Mode at the same time by using DetailsPro's new Split Mode.

Designing with DetailsPro on an iPhone. The editing UI changes from two sidebars into drawers on the bottom of the screen. Everything you can do on iPad and Mac, you can do on iPhone.

Designing with DetailsPro on an iPhone. The editing UI changes from two sidebars into drawers on the bottom of the screen. Everything you can do on iPad and Mac, you can do on iPhone.

What else can it do?

Well, a lot of things are possible once a design is made in DetailsPro. Since it’s real SwiftUI already, you can export as SwiftUI code to Xcode or export as a Swift Playground. Designers and developers make great use of this feature, exporting entire designs as well as single SwiftUI components one by one from their DetailsPro designs into their Xcode projects.

You can also see your designs in ARKit with DetailsPro’s AR Preview feature. SwiftUI designs are already smart, and DetailsPro builds on top of that by integrating with Apple’s ARKit and letting designers place, resize, and manipulate their designs into the real world around them. This is yet another feature that previously required advanced coding skills because ARKit is not a beginner-level framework.

DetailsPro also offers a built-in presentation mode with note taking for designers who are sharing SwiftUI designs in meetings at work. From the beginning, DetailsPro has prioritized being a fast, at-your-side design tool that is capable of making design changes as quickly as in the middle of an ongoing meeting. Presentation Mode lets designers pick any number of designs and quickly show a slideshow that they can go back and forth on, collecting design notes for revisions afterwards. This is just another way that DetailsPro is made from the ground up for Apple platform designers.