Our new DetailsPro update allows you to take any of your widget designs and add them right onto your Home Screen. This post will tell you a bit more about why we made this feature, how it works, and what you can do with it.
Until today, testing widget designs has been difficult and cumbersome. Not only have you needed a Mac and Xcode, you’ve also had to write special code to configure the widget you want to preview. Ideally, we wanted to be able to just use DetailsPro to quickly mock up a widget and add it straight onto our Home Screen. From there, iOS could just render it so we could see exactly how it is in-situ.
So that’s just what we made!
How to add widgets to your Home Screen
Adding widgets to your Home Screen from DetailsPro is especially easy because you can already use any designs you have in the app that are in a “widget” size (or, start with any of our free or premium templates).
DetailsPro automatically pulls these out front in a handy new Widgets tab that you’ll find in the main DetailsPro screen. From here you can quickly browse your widgets and create new widgets.
The new Widgets tab lets you quickly browse your widgets and create new widgets.
To add a widget, you just go through the normal iOS flow. You don’t have to do anything special with your files beforehand.
First, go to your Home Screen and press-and-hold to add a new widget. Next, select DetailsPro in the widget browser and you’ll be able to pick any widget size.
You can select a widget placement in any standard size or one of the reference template widgets.
Finally, once that widget has been placed on your Home Screen, long-press and edit the widget to select one of your designs.
Your widget designs are automatically filtered when configuring a placement on your Home Screen.
And that’s it! Now, iOS will render your SwiftUI widget from scratch and you’ll see just how everything is lining up. This is a great way to check out whether your .padding()‘s and .font()‘s are feeling right, or if you want to make anything bigger or smaller.
How we made it easy for you to design great widgets
We’ve added two extra features in this new update that make it even easier to get started. The first is our April ’25 template pack, Art Collection, which contains a bunch of widgets. The first three are free for everyone and the other five are offered as a part of DetailsPro Premium. We designed these to be cover a lot of the super common widgets you might want to create so you can quickly start out with one of these and customize them with your content.
The April ’25 template pack celebrates our new update with a focus on beautiful, standard widgets.
The second is a separate type of widget you can add called Design Template. This widget is a reference widget you can use if you’re really trying to create something specific and to take advantage of the default margins and sizes iOS uses. This widget auto-detects these values on any device and under any combination of accessibility settings and presents them to you. Then, you can use this information in your next widget design to perfectly match the padding or make something off of the sizing. We don’t expect everyone to need to use this widget, but we know some will certainly enjoy it.
You can use the Design Template reference widget to take advantage of the default margins and sizes iOS uses.
You can get started today with version 5.4.0 of DetailsPro.
I’m excited to share the news today that DetailsPro is going to be making its way to visionOS!
With an upcoming update, the tailor-made tool designers love on iPhone, iPad, and Mac is going to debut with features made specifically for visionOS and the Apple Vision Pro.
DetailsPro on visionOS exploring a design with a window, visionOS tabs on the left, and a grid of images.
If you read any of my posts around WWDC23 when Apple announced the Apple Vision Pro, you know how much I love the design and am impressed by just how well designs translate to this new design language.
This new update includes, of course, a UI refresh across the DetailsPro app that makes it right at home on visionOS, comfortable to use with eye tracking and hand control, and easy to use.
If all we did was re-skin DetailsPro for visionOS, that might have been fine, but that would have left so much more on the table. Our new update goes much further and introduces a new set of features that are the keys to making visionOS design easy, fun, and accessible for designers on this new platform. We’ll be detailing more in an official launch blog post, but just to give you a taste, you can look forward to features including an updating set of materials throughout your designs (so all your old designs translate correctly to visionOS right away), the ability to turn canvas glass on and off to design with a transparent window for full visionOS live previewing, and the ability to add a new Glass Background modifier quickly and easily throughout.
Needless to say, this is an exciting time for DetailsPro! I’m so excited to be furthering the DetailsPro experience and exploring this new platform.
The new update will of course debut with new SwiftUI templates for visionOS that you can use right away to kickstart your ideas.
DetailsPro for visionOS is also included in the same universal purchase that gets you DetailsPro for iPhone, iPad, and Mac. So if you’ve already purchased, you’ve already got the new version for visionOS! And if you haven’t purchased yet, you can still use this app free forever with up to five files.
Today I’m excited to share a DetailsPro update that makes it easier than ever to make beautiful and detailed Apple designs. This new feature makes you faster when refining your designs and brings your content into the mix more directly than has been possible in any interface design tool before. Say hello to the new Repeat element.
Repeat is made for the modern Apple designer in the very moment we find ourselves in all the time: designing a list of something (or a row of somethings). Whether a design calls for a carousel of cards or a triplet of tags, we often need to be able to design something, repeat it X times, and show different content in each repeated item. DetailsPro now supports this natively with an intuitive UI for creating these designs and goes even further and lets you customize each repeated SwiftUI item to make your next design beautiful, functional, and detailed.
Let me tell you just how Repeat works in DetailsPro and give you a quick tour.
Beautiful designs are made with Repeat
Repeat lets you take any element in your design and repeat it vertically, horizontally, or layered one on top of the other. The direction is determined by which kind of stack (Vertical, Horizontal, or Layered) you put on the outside of the Repeat. Your original element can then be repeated and you can quickly and easily change the content in each iteration of the repeat, all while the design changes stay in sync—any changes to the original element will immediately reflect in the repeats.
The Repeat Element Inspector on the right-hand side lets you change the content of each item in your repeat.
Now in your design process, you can focus on how each element should look and spend less time duplicating designs and making the repeat happen manually. Ever since I started working on repeating elements, I’ve started seeing them everywhere in Apple design, so I see this feature as something so essential to any designer’s toolbox.
How to make a Repeat
If you already have an element you want to repeat, you can long-press on that element and then select Repeat. This will make a new Repeat with that element and repeat it five times.
If you want to start a new Repeat, you can open the element picker just like with any other element and you will find two shortcuts for adding a Repeat: one that repeats items vertically and one that repeats items horizontally. The only difference here is which stack is used on the outside of the Repeat.
Any existing element can be placed into a Repeat by long-pressing on the element.You can create a new Repeat with new elements by opening the element picker and picking either the vertical or horizontal repeat.
From there, any elements you put inside your Repeat will repeat. You’ll most likely want to use a stack as the first element and then create your repeating element inside that stack. If you are repeating rows, for example, you may want to start with a Horizontal Stack in your Repeat to arrange the inner elements of the row horizontally. You can also update the design of your element any time throughout the design process.
To add, edit, and delete iterations of your Repeat, you can edit a list called Items that appears. Every row in Items represents an item of your Repeat. You can swipe to delete an item or tap to edit it. Each row will also show you a preview of the content that has been changed for that item.
An Items list is visible on the left-hand side and represents each item of your repeat. Add, edit, and delete iterations here.
Repeats can have their own Repeats
You can make a design that has a repeated element in it, like a list of trips that someone has recently been on where each trip has a row of in table, and then you can give that design a header and then repeat that whole thing. Everything still works in DetailsPro as you’d imagine: you have only one source of truth for what a trip row looks like and when you update the original, all the repeats will update too. And yet! In each repeated section of trips, you can customize and change the number and content of the trip rows inside! One section could have three trips, another five, another ten, and so on.
Repeats can have repeats inside, so you can take one row design, repeat it a few times to make a section, and then repeat sections to make a screen. All elements stay in sync with the original row that started it all.
Supporting nested repeats was absolutely necessary to making sure this feature was ready for designers because one of the most common Apple designs can be seen in popular apps like Apple Music, the App Store, Photos, and others: a vertical scroll of horizontally-scrolling rows. And now, you can make designs just like this quickly and easily.
One of the built-in templates, Store, demonstrates this type of design. Start a new design with it as the template to get a good starting point to go off on your own!
Store, a built-in SwiftUI design template, demonstrates a very common Apple design pattern: a vertical scroll of horizontally-scrolling sections. Here, much of what you see is made with repeating elements.
Tips & Tricks
Here are two tips that will you get going with Repeat with a great head start.
The fields in the Repeat item inspector on the right-hand side have friendly and helpful titles because they draw their names from the names of their respective elements.
You can make the Repeat item inspectors friendlier to read by naming your elements. The fields in the Repeat item inspectors use the element’s name as their field name, so if you name your text element as “Title” or “Artist Name”, for example, that text will appear instead of simply “Text”.
You can use arrows to jump quickly from one item in a repeat to the next. The arrows are in the upper right-hand corner of the repeat item inspector and you can see them in the above image.
Tap on the All Elements button at the bottom of every Repeat item inspector to access a list of every element that is in the design of the repeat. For that item (say, the second item in the repeat), you can choose to toggle on or off any element within that design. You can use this feature to hide design elements that don’t need to be on every item. For example, you could design a “Featured” banner and put that only above the first element.
Tap on any element within the All Elements section to edit any of the options for that kind of element and edit the modifiers on that particular element. Any edits made here are only made to this repeat item, so you can use this to make changes like changing the font or adding extra padding just on one item. This section was designed for those rare occasions where you might need these options, but I expect that in most design sessions you won’t need to use anything in here.
Code Export
Your Repeat element will export to SwiftUI code as a ForEach and will export your original element inside the Repeat. From there, you can update the code to use string variables, color variables, in more in Xcode or Swift Playgrounds.
Repeats export as ForEach in SwiftUI code, ready to be sent to a developer colleague in Xcode.
Philosophy behind this update
To explain a little bit about how this feature came to be and why I designed it to work this way, I can share with you the biggest thing that was top of mind for me: repeats are everywhere. I just came to think that this design pattern of something-that-repeats-but-just-the-content-changes is so common, especially in Apple design where we have so many standard apps that have taught us how to design lists, carousels, and so on that I wanted to make something specifically for this task.
DetailsPro’s purpose is to be a design tool for anyone who is designing software for an Apple product. They don’t need to know how to code, they don’t need to know how to design, they just need to know how to use an iOS-style app. That is what drives everything when I’m working on a new feature and wondering how it should feel and behave.
So these two ideas basically came together and I was led to: I need to make a feature that is made for handling repeating designs, and it needs to fit into DetailsPro in the DetailsPro way. (The DetailsPro way, by the way, is something that I get both a lot of good feedback on and a lot of bad feedback on. Many people want to be using what is essentially a full Xcode for iPad, which is not what I am able to offer or even going for. I’m going for what is essentially a live notebook, purpose-built for SwiftUI design, that is so easy and fast to use that a designer in a meeting can pull their iPad out and make something new on the spot to show to colleagues before the meeting has even ended.)
One of the built-in SwiftUI design templates, Media Scroll, features a Repeat to make the vertical stack of tracks. Here this design can be seen opened in Split Mode on an iPad Pro 12.9″.
The desire to make something that was made for repeat is what led to what I think is the coolest thing about this feature: all the repeating elements are stuck together in essentially a group, held together by the repeat. Today, I find this to be so essential and a “no-brainer” but it was only one of many, many designs I considered along the way.
The other major component was how to handle the variation between items in a repeat. While changing the text and the images between elements is essential and very easily understood, it took me a lot longer to figure out how to support the situation where you want to have an item in the repeat be very different from an item before it (maybe you want it to have an element none of the other items have, or you want it to have five more elements in a nested repeat than the others). I’m in love with the way this works in this new update, where from item-to-item you can remove or include elements within the main element, changing modifiers and changing nested repeats. But it took a long time to get to this.
So I hope the way this feature works is something that you find both easy and enjoyable to use. It was made specifically for any attached, repeating set of design elements. It was made with the modern Apple designer in mind, the one who maybe sort of understands the general idea of how code works or SwiftUI works, but thinks more in terms of fonts, spacings, colors, and layouts than they do in anything else.
Just the Beginning
I’m really excited to be sharing this update with you today, which is available for all DetailsPro designers, and I can’t wait to be back to share the next improvement that is coming to DetailsPro related to repeat… grid! Just the same way that I’ve been waiting for so long to be able to offer this necessary functionality, I’ll have something to announce for grids very soon now that we have Repeat as a foundation.
Thank you as always for keeping up with DetailsPro and for all of your support. If you have any requests or questions about Repeat, feel free to contact us.
Since I released the original beta of DetailsPro back in summer 2020, hundreds of thousands of SwiftUI designs have been made by our community around the world.
Throughout 2022, new updates to DetailsPro built on everything that makes this app special, adding a whole set of new features —
Keyboard Commands with support for ?K, the ability to quickly open a command menu and design entirely from your keyboard.
SwiftUI Templates supporting the most beautiful iOS designs, Dynamic Island configurations, and more to get you started quickly.
Preview in AR so you can take any design from your screen into the real world, with a fullscreen viewer and simple controls.
Presentation Mode so you can AirPlay a readymade slideshow of your designs in your meetings with stakeholders directly and take notes from feedback.
Share and Export supporting SwiftUI export to a variety of formats including Xcode, Swift Playgrounds, ARKit, JPEG, and more.
Each one of these features makes DetailsPro more helpful to Apple designers everywhere. They can do more, design more beautiful interfaces, and take their SwiftUI designs to new places.
Let’s look back!
Keyboard Commands
Keyboard Commands let you create entire designs in DetailsPro all from your keyboard. You can go really fast with these shortcuts—this feature was tested extensively with our top power users.
Keyboard Commands in DetailsPro, available for iPad and Mac and accessible by entering ?K on your hardware keyboard.
Each action is tailor-made for SwiftUI design. You can do things as simple as changing a color to blue, or adding a headline font. And then, you can do things as complex as moving an element from one Horizontal Stack into another Vertical Stack, or converting a Horizontal Stack into a Vertical Stack all in-place, preserving its contents. Read more about Keyboard Commands.
SwiftUI Templates
DetailsPro helped more designers start quickly this year and chase their inspiration with new SwiftUI templates that are built-in to DetailsPro. Upon creating a new file, designers can choose from over 50 starting points that cover everything from the most elaborate to the most common Apple design designs-of-interest. Dynamic Island Live Activities, Home Screen Widgets, common iPhone app screens… they’re all here.
This year, DetailsPro added templates for everything from the Dynamic Island to iPhone tabs. Coming next: CarPlay, iPad, and more.
The beauty of templates in SwiftUI is that you can take any part of them right into Xcode with you. Designers can export an entire design or choose just a single component. Developers can open DetailsPro files and pluck out exactly the parts they want, readymade as SwiftUI.
Preview in AR
DetailsPro introduced a new feature that lets designers take designs further than ever before, outside of the screen itself. Preview in AR integrates with Apple’s ARKit and RealityKit frameworks to give designers a head start on what’s to come. Read more about Preview in AR.
Previewing a FaceTime AR design in DetailsPro. Preview in AR on DetailsPro lets you position your designs floating in the world around you.
Any design made in DetailsPro can be previewed in Augmented Reality, placed and sized to perfection, all from the same device and all without writing a single line of code.
Presentation Mode
Designers saved time they’d normally spend exporting images and creating Keynote presentations by using DetailsPro’s new Presentation Mode, which lets you create a presentation live on-the-go. You simply pick any number of designs, and just like that you’ve got an interactive slideshow that you can AirPlay to the nearest meeting room. Read more about Presentation Mode.
Presentation Mode is perfect for AirPlay-ing into a conference room and swiping between design alternates.
You can even take notes on your designs without leaving Presentation Mode, so when a fellow designer gives you a great idea or a manager gives you feedback you want to remember, you won’t miss it. After hearing that designers use DetailsPro in the middle of design reviews to quickly make changes and share new ideas, I wanted a way to make this even easier and nicer.
Share and Export
Designers took their SwiftUI designs with them everywhere. I updated the share and export options in DetailsPro to make them easier and faster throughout the app, so you can now instantly copy SwiftUI code, export a JPEG, or start a new Swift Playground.
A revamped share menu highlights the flexibility and power of designing in DetailsPro.
The beauty of DetailsPro and SwiftUI, that I’ve shared again and again, is that you can take what you learn with you. Make a design, start an Xcode project, share the SwiftUI code with your colleagues, post an image into Slack—it’s all available even in the free version of DetailsPro.
On to 2023!
I have so many improvements, new features, and more on my to-do list for 2023. I can’t wait to get started in the new year and to get the first new update out to you.
In 2023, you’ll be seeing major improvements to the DetailsPro Mac app, more templates, and the continued focus on Apple design that you’ve seen since the beginning.
Today I’m excited to introduce a new update to DetailsPro that entirely changes the way you can design with SwiftUI. This new way is fast, fun, and powerful. And best of all, it’s based on something you already know how to do: typing.
From the beginning, DetailsPro has been about making SwiftUI work for every Apple designer. Apps are made with SwiftUI, so why can’t designs be? That’s the question I’ve asked myself since the first beta of DetailsPro came out in 2020. And since then, DetailsPro has jumped the biggest hurdle that stood in the way. Back then, it was code. You had to know how to code if you wanted to make something in SwiftUI. So DetailsPro took that requirement out by introducing a visual interface for everything, with simple taps and drags to create beautiful designs that are ready to go as SwiftUI. No difference between a VStack made by a designer and one made by an engineer.
Now, two years later, I’ve been hearing something a lot, which is that designers want to go faster. They love that DetailsPro is easy to use at a beginner level, but now they know the app inside and out and want to go fast.
This update brings that speed, and it all starts with a simple shortcut: ?K.
Watch the Video
Smart, instant, and handmade for SwiftUI
When you’re designing elements in SwiftUI, you’re always working with something concrete—an image element, a stack of elements, a SwiftUI modifier, and so on. This is the foundation of what makes keyboard commands smart in DetailsPro: the keyboard actions you see are always relevant to what you’ve selected.
You can use keyboard commands that were made from the ground up for designing with SwiftUI, making actions feel quick and natural.
Simply press ?K and keyboard actions appear instantly. You can discover and filter through a range of context-specific actions. All from your keyboard, you can arrow up and arrow down to select an action, and then press return to complete it.
DetailsPro intelligently shows you only the actions that are relevant to your design selection
All the keyboard commands are accessible from a menu that appears after entering ?K on your keyboard.
Or, you can start typing to quickly filter the actions down to what you’re looking for. DetailsPro intelligently shows you only the actions that are relevant to your design selection, and can even show what you might’ve been looking for based on what you type.
Modify elements in no time flat
As you type into the keyboard actions, you’ll see a new version of Suggested Modifiers that makes the most common SwiftUI modifiers just one click to use. You can do things like instantly add a color modifier and set it to red all in one action by typing in “red”, or add a padding modifier with only one side selected by typing in “top”. You can even do things that take a few taps without the keyboard, like adding a frame with a custom-entered width and height by typing in “frame” and then entering “350×450” into the Add Frame action.
You can add modifiers and move between elements in your SwiftUI design all from your keyboard.
Designers who have transitioned to SwiftUI quickly become familiar with modifiers, Apple’s name for the things that make your design yours—from fonts to colors, paddings to sizes, you add the basic elements of your design onto the screen and then you customize everything with modifiers.
You can do things like instantly add a color modifier and set it to red all in one action by typing in “red”
DetailsPro made SwiftUI accessible to designers who aren’t at all interested in write code over two years ago, when the app was first released with an all-graphical interface for designing with SwiftUI. Now, keyboard commands take that a step further and let you keep designing without worrying about the code, but still taking advantage of the speed of the keyboard.
It’s easy to make changes
You can do things with the keyboard that you might not expect, like reordering modifiers. Sometimes you want a padding to before a background color, instead of the other way around. DetailsPro now has actions made just for this, with plain and easy language like “Move Background Color” and “Before Padding”.
In seconds, you can see your design in different layouts and alignments thanks to the speed and ease of the keyboard commands.
DetailsPro’s context-specific awareness only shows you actions that matter to you in that moment, based on your design selection, so it’s no sweat to give you options that show you plainly how you can reorder your modifiers, or convert a Circle into a Rectangle, or embed SwiftUI elements into a VStack.
Every action under the sun
You can visit this blog post for a list of every keyboard action available in DetailsPro at launch. More actions are being added all the time in new updates, and luckily you don’t have to worry about missing them because they will naturally appear in the list as you design with your keyboard.
See something missing you’d like to see added as an action? Let us know!
Whether you’re a beginning designer trying SwiftUI for the first time alongside Sketch or Figma, or a seasoned iOS developer with multiple apps on the App Store, the ease of use, discoverability, and efficiency of using your keyboard with DetailsPro will help you make more beautiful designs in less time.
I’m writing this in early evening after the beautiful, inspiring, and exciting September 2022 Apple Keynote. Apple Design, and Alan Dye himself, came out with a dizzying amount of new designs and interfaces that are going to take weeks to appreciate and study. The Apple Watch Ultra, alone, introduced so many new designs and that’s even before getting to the new Dynamic Island!
I wanted to collect, in one spot, the beautiful moments of Apple Design that were presented all throughout the keynote. You can watch the full Apple September 2022 Keynote here.
I hope this post can serve as an inspiration point for you, a page you can return to throughout the iPhone 14 year to catch a glance at that one design you loved, and also as a moment of appreciation for the designers, thinkers, planners, and everyone at Apple who makes these creations possible.
And, if I missed any moment that you think should be in here, just let me know!
The newest DetailsPro update adds Presentation Mode, a built-in way to present your designs whether you’re at a meeting, on a screen share, or needing to compare several designs with somebody else. DetailsPro saves designers time because they no longer need to export images of each design, no longer need to create a separate Keynote or Powerpoint file just to present some designs, and makes it easy for designers to take notes from reviewers, collaborators, and more.
Presentation mode is built-in, making it a great quick option for designers who want to save time making separate presentations.
Great uses for Presentation Mode:
Present designs at a design review with your coworkers. You can take notes without having to leave your presentation, simply by tapping on the note icon at the top of the screen. From there, you can add or edit notes that are saved directly to your design.
Compare two designs that you’ve made. Presentation Mode is the easiest way to view multiple designs, quickly jump between them, and compare them.
Display a minimal view of a design. Perfect for Zoom meetings, screenshots, and social media posts, Presentation Mode gives you a beautiful and clean view of your designs.
Designers can take notes without leaving their presentation, and use those notes later to inspire their next round of designs.
How to use Presentation Mode from a folder:
Launch the DetailsPro app
Tap on Designs or any Folder
Tap the Present ?? button
How to use Presentation Mode with a selection of files:
Launch the DetailsPro app
Tap on Designs or any Folder
Tap the Select button
Select any number of files
Tap the Present ?? button
How to use Presentation Mode
Swipe between designs by dragging your finger or scrolling horizontally. You can also tap on the dots at the bottom to jump forward or backward.
Tap anywhere to hide or show Presentation Mode’s controls.
Tapthe note icon to open notes for any design. Notes are saved directly with the design, so you can view notes taken while in Presentation Mode even after your presentation, anytime, by opening a design and opening the notes in the “…” menu.
Tap the share icon to instantly share a design being previewed with somebody else or any other sharing destination.
Presentation Mode is great for hooking your device up to a TV to share in a meeting or on a Zoom screen share.
Kicking off a team meeting with a dazzlingly beautiful presentation can get everybody excited and inspired. Having to fumble through files, screens, and windows can turn people off and prevent you from getting your designs into the world. We hope that you’re enjoying the new Presentation Mode in DetailsPro! Let us know what you think!
AR is an exciting part of the Apple world that’s growing by the day. Today, DetailsPro is announcing a new feature that lets designers take their designs into AR with no extra work required.
With AR Preview in DetailsPro, designers can preview their SwiftUI designs in AR, placing them on tabletops, walls, and objects in their own environment.
If you wanted to make a design in ARKit before, you needed a Mac, Xcode, time to learn and write code in SwiftUI, and time to write code that integrated it all together in ARKit. Plus, you needed an iOS or iPadOS device to preview your work on.
Now all you need is DetailsPro and a single device. You don’t need a Mac, you don’t need Xcode, you don’t need to know how to code, how to write SwiftUI, or how to write ARKit code. You can simply skip all of it and just create a SwiftUI design in DetailsPro and hit “Preview in AR”.
DetailsPro makes it easy to place a design in AR, automatically detecting surfaces, walls, and objects. Designers can rotate their designs and size them to their liking.
How to preview a design in AR
Open DetailsPro
Tap AR Preview on the sidebar
Tap on a design
Move your device around to place your design
How to open AR Preview from any file
Tap on the eye
Tap Preview in AR
Move your device around to place your design
Designs can be as simple as something floating above a desk.
Why AR?
AR is exciting. Designers around the world are already using DetailsPro every day to make new designs for their apps, expressing their ideas in the Apple design language. As more apps move into augmented reality and the future unfolds, we wanted to make it easy (in the DetailsPro way) for designers to take advantage of the latest Apple has to offer, all visually and on the devices their carry in their bags every day.
Just the beginning
We’re only getting started with AR. We’re already working on new interactions, new shortcuts, and new templates that help designers get even more out of SwiftUI and AR, all from the comfort of a GUI that’s easy to use.
About DetailsPro
DetailsPro was created with a mission to make SwiftUI accessible to as many people as possible. By making it possible to design in SwiftUI with an all-visual, intuitive interface and removing the requirement to know how to code, DetailsPro has brought SwiftUI to over 35,000 people and counting. The first version of DetailsPro was released in July of 2020, and in the years since has grown to be available on iPhone, iPad, and Mac. Almost half of DetailsPro users actually create SwiftUI designs all on their iPhones. Beginner-friendliness is at the heart of DetailsPro, with a belief that what helps the first timer get their idea onto the screen also helps the experienced professional. DetailsPro is made by Fun Focus Software, LLC, a company started by former Apple design prototyper Sahand Nayebaziz.
WWDC22 kicked off today and wow. Apple Design was everywhere and every part of Apple Design felt more expressive.
Overall, this was definitely iOS 16. We are not in iOS 15 anymore. The design is moving ahead, it’s getting deeper, it’s branching out, and overall I think it was a huge year for design.
Below, my first impressions of what I remembered most on day one of WWDC22.
I felt like I was dreaming at this point. I still can’t believe we got to see this much footage of future CarPlay designs, and all of it was moving. These designs looked beautiful, clear, and familiar but I really need to watch more to start to understand what’s happening.
Lock Screen
Being able to customize the Lock Screen, not only from the fonts and the layered wallpaper that puts the time behind elements of your photo, but also to be able to add widgets in any order. This was all amazing. First impressions: Apple style abound, looks super easy to use, and really fun.
The editing look reminds of editing watch faces on an Apple Watch.Sliding between Lock Screens… gorgeous. Hoping this Yosemite wallpaper is included with the operating system.Live Activities sort of feel like Super Widgets™?.Doesn’t get better than this.
Stage Manager
This was the other big thing and oh my is it amazing. Stage Manager feels like the futuristic window management that we’ve always imagined could be possible, and here it is for real. This just looked like it was the answer to better window management, and it’s beautiful to look at. I am really excited about this and already from using it on my iPad, I’ve had a great time with it.
Colors
Just another look at the colors here. The colors around iOS 16 felt great to me and matched everything that was happening around this logo—the blending, the expression, the growth.
And that’s just the beginning
I am so excited to dive into more this WWDC22 week and to learn more about the designs of the other features I didn’t mention here that still looked amazing, like Freeform, macOS Ventura, new iPadOS Desktop-Class apps, etc.
Stay tuned to the DetailsPro blog and Twitter for the next articles! Have a great WWDC22!
The world of iPad app development changed forever with the release of Swift Playgrounds 4. We couldn’t be more excited for this new app. Today, DetailsPro is also announcing expanded support for Swift Playgrounds.
What does DetailsPro support?
Exportingdesigns to Swift Playgrounds.
Creating newSwift Playgrounds 4 apps right from DetailsPro, which open directly in Swift Playgrounds.
Exporting to the classic standalone Swift Playgrounds format or the new Swift Playgrounds 4 app format.
Exporting multiple designs at once by exporting an entire folder.
Exporting all SwiftUI design elements, modifiers, SF Symbols, and image assets.
How does DetailsPro make a good companion for Swift Playgrounds?
DetailsPro is your design companion for creating apps on the iPad. Whether you’re a designer focused on elevating the visual design of your company’s app, or a developer mocking up the next screen you’re about to build, you can use DetailsPro to create SwiftUI designs quickly and easily. The DetailsPro app was made for the single purpose of helping to complete visual design work for iOS and gives you an environment and UI that’s focused on that task. While you can make mockups and prototypes in Swift Playgrounds, the process isn’t as easy or as focused as the experience in DetailsPro.
How to export a design to Swift Playgrounds
Exporting a design from the DetailsPro app is easy and quick.
Open your design file.
Tap on the “…” More menu.
Tap Export as Swift Playground… if you want a classic, standalone Swift Playground.
Tap Export as Swift Playgrounds App… if you want a new Swift Playgrounds 4 format app (This is the right starting point if you want to eventually submit your app to the App Store).
A new Export as Swift Playgrounds App feature makes it easy to create real SwiftUI apps with your designs as their starting points.
Here’s how a design looks when you’re working on it in the DetailsPro app:
Working on a SwiftUI design file in the DetailsPro app.
Here’s how that same design looks after it’s been exported to Swift Playgrounds:
Opening the Swift Playgrounds 4 app that was made by exporting that design file.
DetailsPro and Swift Playgrounds make app design a lot faster and easier
Before the DetailsPro app was released, to do any sort of SwiftUI development you had to open Xcode, go through all of the dialogs, and create some sort of project each time.
Now you can open the DetailsPro app and be working on a new design in less than a few seconds. No project setups, no configuration, no coding knowledge necessary.
And now all of this has been pushed further with the release of Swift Playgrounds 4. Developers can make real apps and publish them to the App Store and, since designs made in DetailsPro are already made as native SwiftUI, exporting designs to Swift Playgrounds is accurate, easy, and instant.
The DetailsPro app can take any of your designs and export them as a Swift Playgrounds app because all designs made in DetailsPro are already native SwiftUI.
Requirements
Make sure your iPad is upgraded to iOS 15.2 or newer and you have DetailsPro 3.19.0 or newer.
