We’ve been hard at work improving DetailsPro and making it into the product we dreamed up from the beginning. There are so many improvements in our latest update, version 3.0, that we wanted to write this post to highlight our favorites.

You can get the latest version of DetailsPro for free on the App Store and design forever with up to 5 files at no cost.

Inline editing
You can design refined, beautiful SwiftUI interfaces with our all-new editing UI that maximizes interface control and context. Expand and edit multiple SwiftUI modifiers simultaneously. Browse through SF Symbols, colors from the Human Interface Guidelines, and more all while viewing your work in-progress.

New visuals for SwiftUI concepts
Use SwiftUI to design to your fullest potential with helpful and accessible labeling and visuals we’ve added throughout. Our new visuals include, for example, beautiful and highly-communicative icons for concepts like Alignment. We’re really excited to be addressing universal needs like these, for those who prefer images in their tools. This is also another step we’re taking to make DetailsPro more global and less reliant on English language reading.

Faster Live Preview
We’ve refined the animation timing across the board from our design editing interface to our live preview—everything is snappier and more responsiveness to keep up with your design process.

New Gradient Picker
You can skip the difficult process of making good gradients—no more hunting around for the right colors or trying to guess which direction the gradient would look best in. Our new gradient picker introduces visual previews in every direction that you can preview and select from live as you edit your colors. With just a tap, you can explore gradient directions and find which one feels best in less time than ever.

New Font Picker
Designing with typography is a sacred experience. Okay, maybe some designers see it a little more casually and pragmatically than that, but for others, this is where all the fun begins.

Our subtly updated picker has simplified the experience and kept our philosophy in tact: it’s as easy as it could be for you to select a beautiful typography style from the Apple Human Interface Guidelines. Explore different font families and weights and instantly see your options update live. Finally, you can select a custom size if you are looking for something that isn’t included in the system styles. We have a lot of fun spending hours obsessing over the details of just this font picker—we wouldn’t be a niche Apple design tool if we didn’t. Now, we can’t wait to spend more time hearing your feedback and improving this super-high traffic part of our design interface.

New Color Picker
Just like our new font picker, our new-and-improved color picker sharpens the same focus on the needs of the Apple designer. You can now quickly and seamlessly design across the semantic colors provided by the Apple Human Interface Guidelines and custom colors you’ve added in yourself with fewer taps and in a more compact, visual UI.

Opacity Shortcuts
You can zoom any design element between the most commonly-used opacity levels in interface design with our quick-access shortcuts for opacity. We love the window-shopping aspects of the design process and this fits right in to the speed we want to give you with every update.

Better SF Symbol Search
You can find the perfect SF Symbol now with our improved search algorithm and the improved compact UI for browsing the categories and testing the image scales available.

… this is just the beginning!
This update was a huge update for us as we refined the entire design experience and introduced new, niche detail for the Apple designer throughout even our most boring corners (we still love you, opacity modifier). This is just the beginning for our summer releases. We are hard at work on design versions, folders and tags, reusable designs, copy and paste, and more.

Thank you for designing with DetailsPro and always sending us your feedback! If you’d like to stay up-to-date on everything DetailsPro, follow us on Twitter @detailsproapp.

Wondering what SwiftUI is? Or how DetailsPro works? Here is an article that will hopefully answer a lot of your questions. I’ve made a list of every SwiftUI design element that DetailsPro offers.

Check out screenshots and short descriptions for the design elements you can mix, match, and stack to make almost any design you’ve ever seen on iOS. Many designs, from the iOS 14 Lock Screen to widgets and Apple Music are all made with combinations of these simple elements.

Let’s start with the coolest elements in SwiftUI… stacks.

Vertical Stack

Horizontal Stack

Layered Stack

Spacer

Text

Image

SF Symbol

Rectangle

Circle

Rounded Rectangle

Capsule

Divider

Scrolling Container

Blur

Gradient

And more to come…

I made DetailsPro to make designing beautiful interfaces more accessible to more people around the world. Apple’s framework, SwiftUI, is an intuitive, simple, and powerful framework. With the right access, including the ability to create designs without knowing how to code, I believe more people can create truly beautiful and intelligent designs at work, on personal projects, and as they learn in schools.

We want to make SwiftUI accessible to more people around the world. Our love of design is at the heart of this goal. Today, we are excited to announce a feature that makes DetailsPro even more flexible for the way designers and developers work: SwiftUI Playground export.

You can now export any design and open it instantly in Swift Playgrounds. See the impact of Swift code you’re working on with a beautiful SwiftUI preview; study the basics by learning from your own designs; prepare educational playgrounds with beautiful SwiftUI views built right in—all with designs made moments earlier in DetailsPro.

Day-in and day-out, we think about everyone from the curious kid working on their first app to the Apple designer working on the future of iOS. Thanks to SwiftUI, there is a new medium to create beautiful designs with that reveals itself to you as you explore.

We believe there is great promise here. Thanks to SwiftUI, a stunning design can be made with just a stack, a couple lines of text, and an image. We fit into this picture by giving designers, developers, and curious creatives around the world an easy way to get started.

To that end, we are always going to work hard to support the diversity of workflows that people have. From the beginning, we’ve been focused on supporting many ways to take your work with you out of DetailsPro.

You can already export designs as JPEGs and transparent PNGs to use in presentations, documents, and other design tools like Figma, Sketch, and Adobe XD. You can also export designs as Swift files ready for import into Xcode. We’re proud to add Swift Playgrounds as another option today and are eagerly looking forward to what comes in the future.

Exporting Swift Playgrounds requires DetailsPro 2.12.1 (available on the App Store). To export a Swift Playground, open a design, tap •••, and tap Export as SwiftUI Playground.

Alex Logan is the developer behind Pass Book, Coffee Book, and Snippit. We were able to interview Alex to learn more about his design practice and creative process.

Hello, Alex! Thank you for speaking with us and being our first designer and developer on In Conversation. How’s your week been?

Hey guys. thanks for having me! My weeks been a bit of a whirlwind with the surprise App of the Day feature, but certainly very fun.

Let’s take it all the way back to the beginning. What was your first experience with an Apple product?

My very first time getting to experience something made by Apple was the 3rd generation iPod nano (the square-ish one). I had a wander around the Apple Store on a shopping trip and played with a bunch of devices. Then, just as we were about to head home, my dad got the Product Red Nano—I was very jealous. When I eventually got to play with it I was blown away by just how great it sounded having only experienced more budget sound before that. I’d watch video podcasts and even full movies on it despite being sat in-front of a perfectly fine TV. Safe to say there was no going back from this point and my love for Apple’s tech started to brew.

When you think back, what stands out to you about the designs of that time?

In terms of the hardware I think we were in a bit of a strange period. There were still lots of metal backs on devices (with scratches galore!) paired with funky colours on the front. I remember how much my iPod stood out against the chunky plastic design of my HP laptop. Software for me back then was basically games and music, so I didn’t get exposed too much to the design trends of the time—it was quite a few years later before I started to really appreciate what I was looking at. One thing that really stood out was that we didn’t seem to be fully set on going skeuomorphic, there were the odd bits of UI here and there that just ignored the concept and would fit right in with today’s trends.

I have to say I think I kind of miss how “friendly” things felt in the hand. Everything was rounded and sorta chunky, which I don’t feel we get from modern devices.

Zooming back to today, what your thoughts about the designs in modern day?

Modern apps are a truly fascinating area of design to me. I’m someone who tends to lean towards the standard system design, which tend to be quite flat with rounded edges and the odd splash of color, but I can’t ignore how wonderful some apps are that mostly ignore convention. Headspace for example looks nothing like an app Apple would ship on the system, yet it fits right in with clever use of familiar navigation. I think there’s room for more creativity in apps, feeling like we’re maybe heading towards a ceiling with flat design.

After the Big Sur release and the “return of fun in visual design” began, I was hoping to see more apps to let this look start to bleed into their UI, not just stopping at the icon.

Your app Coffee Book has a vibrant, simple design that is easy to admire. Can you talk to us a little bit about your process?

My process for most of my apps starts with something that bothers me—Coffee Book was because I had a coffee book and I kept spilling coffee on it. 

This is a particularly bad example of a page—some had holes in them were I’d tear off the stained bit. Normally I’d start to grab a sketchbook and think about what I might make to fix the problem, but this time I just went straight to Xcode—my notebook in front of me covered in coffee was essentially my research.

I took the fields of data I’d been noting down, thought about what I learned from each one and what more I could have written down and then quite quickly threw together a prototype for the espresso brew form. This very first prototype is actually what’s on the App Store now. Thanks to following Apple form design (ish) everything was quite straight forward.  My design approach with this app was essentially “see what Apple does, if they don’t do it, find something thats close and mess with it”.

After building a prototype I had to consider that more people than just me will be using this thing, hopefully. I only make espresso these days so the app was designed around that but I knew it wouldn’t be enough for everyone. Realising that I’d need to add all the types that are currently in the app, I asked around how people make their brews better. The important part for me was understanding what in particular they’d look at to improve, wether it was temperature, grind, yield or anything else, rather than just asking “what do you write down”. After adding all the fields people mentioned and some fairly basic design of the selection screens, I decided to send out a TestFlight. At this point the app was not too-dissimilar to now, with the core design being set at the start.

I found that often people get comfortable with certain parameters and only tweak one or two things to get their perfect brew—this revealed a big flaw in my app, that I required every single field to be filled out. I should have probably drawn this same conclusion from the earlier research, but I ended up making a very strict app. Removing all of the validation (nearly!) on the forms meant you could store as little or as much data as you like, which helped me make the app accessible to beginners and pros.

Was your process any different with your new app, Pass Book? 

A couple differences really changed how pass book was designed. First, I used SwiftUI, which meant I could iterate as fast as I liked with instant canvas reloads, turning my IDE into a sketchbook. Second, I said that I wasn’t allowed to just copy Apple. It’s been quite a while since I just did something without any inspiration at all, so I had absolutely no idea how this would turn out. 

The concept itself was very simple with little wiggle room. I had a set of data to capture and I had a list of codes to show after the user entered data. This helped ground the end result and remove some of that blank page anxiety. I soon found that the end product was taking a very different direction to the apps I’d built before it.

Something interesting I tried to do was make the app feel fun and welcoming without coming across as a toy to serious users. Everything is as rounded as I could get away with, pushing the weights up of the rounded fonts to the point where they’re about to look like bubble writing. Things were spaced out a lot more than usual, trying to give the user breathing room instead of huge chunks of options. Whilst this does compromise the experience on smaller devices, I think its worth it. A good example of this is in the form where I separated each individual field into its own section.

I’m quite happy with how it turned out, with the learnings from this app certainly affecting the next couple updates of Coffee Book.

What are you most looking forward to in the field of human-computer interaction and user interface design?

I hinted on it a little earlier, but when it comes to interface design I’m excited to see what comes next with the return of fun. I hope that apps are going to start to diverge a bit when it comes to their general design, creating more innovative experiences.

As for interaction—I think the answer is AR. I’ve of course played various AR games and tried out some experiences like IKEA Place, but I am sure there’s more to do here. I imagine an experience where we just touch things in the air that have been super-imposed onto out vision (or glasses), giving us a whole new challenge of feedback in a world without physical touch.

To shadow, or not to shadow? To Corner Radius, or not to Corner Radius? 

I absolutely love a good shadow. If theres enough information on a page to warrant a stronger visual hierarchy, get stuff elevated. Grey shadows with a nice big blur can make for a lovely looking app, with the advantage of colouring the shadow if you want something really vibrant. As for corner radius I think always yes—as long as you can take advantage of a continuous radius. Once you’ve seen a proper squircle, you can’t go back. 

For more from Alex, visit his apps on the App Store and follow him on Twitter.

We found a number of areas where we could make loading, interaction, and animation smoother than before. DetailsPro is a 100% native app written in SwiftUI, optimized for the M1 chip and the latest iPhones and iPads on iOS 14. With this update, we greatly reduced DetailsPro’s memory usage and CPU usage so you should feel the app is snappier and faster than before.

If you are new to SwiftUI or want to review how to think in SwiftUI from a designer’s perspective, check out this tutorial on YouTube. Sahand from the team behind DetailsPro gives you a tour of DetailsPro and describes SwiftUI from the very beginning, sharing perspective and his way of thinking.

You can follow along by downloading the widget featured in this video from the Explore tab of DetailsPro!

Designers are expected to deliver designs that look great in Light mode and Dark Mode.

DetailsPro can help you design in both modes easier than ever, in two ways.

First, if you simply put your device into Dark Mode, your designs will show in true Dark Mode. This happens automatically with no work needed. How does this happen? Well, since you are designing with real SwiftUI, everything is reflecting true, natural SwiftUI states. Text changes color, system colors like blue and red show their true dark mode variants, and backgrounds change too.

Second, you can switch between Light mode and Dark Mode quickly and easily with the new moon icon released today in DetailsPro 1.1.

Turns out, you won’t need to manually copy changes over from your Light mode variant to your Dark Mode variant anymore.

You also won’t need to worry about them falling out sync. In DetailsPro, your Light mode design and your Dark Mode design are the same design.

Update to the latest version of DetailsPro and let us know what you think!

9to5Mac published an article about DetailsPro today. I am so thankful for this writeup and I am so excited to see the app out for designers and developers to finally try. This is only the beginning.