Designing a scrolling carousel is easy in DetailsPro. The main concepts at play are scrolling containers, horizontal stacks, and frames.
Scrolling containers are a type of element in SwiftUI that create a “scrolling window” where anything placed inside of them can be scrolled. Horizontal stacks arrange elements horizontally. Frames are a type of modifier that let you give things a specific size. We are going to make some cards, put them in a horizontal stack, and make them scroll!
1. Start with a Card
We’ll want to start the actual element that is going to be in our scroll. We’ll make sure our element has a set width by giving it a Frame modifier and entering in a width value. This will be necessary because once we put this element into a horizontal scroll, we’ll need that width value to help the element stays uniform regardless of their content.
Our card design is ready to go with a Frame modifier that gives it a set width and height. This will come in handy when we repeat this card to have multiple in the scroll.
2. Wrap with a Horizontal Stack and then a Scrolling Container
Next, we’ll place our card into a new Horizontal Stack, and then place that Horizontal Stack into a Scrolling Container. We’ll also make sure the Scrolling Container has its direction set to “horizontal”. Pro-tip: If you use the “New Scroll with Item” action by long-pressing on an element, Scrolling Container will automatically set it’s direction for a Horizontal Stack to be horizontal.
Note: at this point, it’s normal for the card to be right up against the side of the phone. We’re going to fix this in the next step.
Now we should have a Scrolling Container that has a Horizontal Stack that has our card.
3. Add Padding and Repeat the Card
We’ll add a single Padding modifier to our Horizontal Stack to give us a beautiful, uniform spacing from the sides of the device so our scroll starts with a nice offset. Next, we’ll long-press on our card element and tap Repeat to make five cards appear, filling our scrolling row and giving us content to customize. Learn more about repeat here.
Our Horizontal Stack has been given a Padding modifier, making it look amazing, and we added a Repeat around our card to give us that filled out content.
4. Done and Ready to Refine!
Now that we’ve got our content scrolling, we can do anything from change up our content in each repeat item to refining the design of our cards themselves. Fine-tune the width, adjust the fonts, and make your design beautiful.
And now with a little refinement and some filled-in content, we’ve got a beautiful scrolling carousel!
DetailsPro makes it easy to design in SwiftUI and get a carousel ready to go to export into Xcode.
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.
Apple announced three new fonts at WWDC 22 that make up the new and expanded San Francisco font family: Compressed, Condensed, and Expanded. I’m excited to share that DetailsPro now makes it easy for you to start experimenting and designing with these beautiful new fonts in your designs today.
From top to bottom: Compressed, Condensed, Standard, and Extended. Each is set in 39pt Semibold. Every “Opens at 10:00 a.m.” text is set in Standard 19pt Regular.
To use these fonts, you must be on iOS 16, iPadOS 16, or macOS Ventura and the latest version of DetailsPro. You can use these fonts anywhere you could use SF Pro before, and selecting these new widths is easy. Here’s how you do it:
How to try the new fonts in your designs
Open a design
Select any Text element
Add a Font modifier
Choose a width in the “Width” section
Try Compressed, Condensed, or Expanded
Select any Text element to start.Select the Font modifier to edit the font.Choose from Compressed, Condensed, Standard, and Expanded when using the SF Pro default font.“Condensed” is my early favorite. I think it gives text a wonderful fun feeling that is perfectly subtle.
From the WWDC Session
Export as SwiftUI code
DetailsPro fully supports exporting code for the new expanded San Francisco font family so you can take these designs with you for iOS 16 and up. When you design with DetailsPro, you can take the design you make with you as 1:1 SwiftUI that can be exported to Xcode, Swift Playgrounds and more. Export as SwiftUI code is available free to all DetailsPro designers.
Just the beginning
As I’ve been building in support for these new fonts to DetailsPro, I have been using them and I truly think we haven’t even seen 1% of how far these fonts will go. Condensed is straightway my favorite because it’s got almost a The Flintstone’s/The French Dispatch feeling of wonder to it. I thought Expanded would be my favorite, because it’s outwardly the coolest in my opinion, but I am loving Condensed and itching for an excuse to use it in something.
I can’t wait to see what you design with it. If you make anything you want to share, tag me on twitter @sahandnayebaziz and @detailsproapp!
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!
It’s nice to see you for another issue of UI Designer Weekly. This week, you’ll find more beautiful, inspiring, and thought-provoking examples of design.
My hope is that you find something that you can mix into your own work. Thank you for joining me, have a great, restful weekend!
A row of purple elements in iOS 16 shares Focus filtering is on. I think this an amazing use of color. Purple has become the color for Do Not Disturb, and now Focus here. Making everything in the row the same color helps it feel separate and different from all the rows after it. It even has a quiet sort of feeling to it, with the purple. Did you notice the interesting alignment that’s shared by the all the icons on the right, or how the “Turn Off” button seems to be not so bold?
Inside Spotlight on macOS Ventura, the beautiful pop-up design with rounded corners, there’s a photo grid without rounded corners. This is maybe one of the best reminders that we don’t need to use rounded corners all the time on everything. The photo rows here feel big, easy to see, and like they have a lot of photos in them, and the tight spacing and no rounding are a part of that. Maybe we can use rounding a lot on the outsides of our designs, but on the insides we can find grids that can be great as regular rectangles (gasp!).
The menu bar extends across the top of the screen and has been a central piece Mac design for decades. Today, the menu bar is a vibrant blur of the wallpaper behind it. Just that blur is enough to create enough separation and foundation for icons, text, and colors to be placed on top. This struck me as beautiful and inspiring and made me wonder what other bars and interface elements could work better with a blur as their foundation.
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.
Hello and welcome to another issue of UI Designer Weekly!
My name is Sahand and I’m a UI designer that was hoping to find something like this. I’m always finding interesting new designs in newly-released products that keep me up-to-date on the latest interface ideas.
My hope is to collect these beautiful, informative, and thought-provoking examples of design, no matter how subtle, and share them with you so they help you see something new and give you ideas you can mix into your work.
Happy to have you here!
P.S. If you have any feedback or requests, I’d love to hear from you on Twitter!
A beautiful rendition of section titles on the Listen Now tab of ?Music. Bold text, clean pairing of an album cover on the left with a smaller title and subtitle on the right. It looks fun, if I may say. This is perhaps an example that shows you can use left-aligned text without it being all the way to the left to make room for an exciting visual. (If you were displaying a section title for a news section, for example, a standard title with text only would probably be more appropriate, whereas here each recommendation row is getting significant theater.)
The audio stories highlighted on the page for Apple News+ show an amazing way to design repeated content across the screen. Here, you quickly figure out there are a lot of choices without even reading each one. Each one has its information in the same layout, which makes it super easy to scan. Imagine how much harder this would be to read if each tile had the text and the logo in different places. The faded options on both ends tell you that there is even more.
A big artist photo and the idea of animating Apple Music across the bottom to represent the new releases on Instagram Stories. Note the album name is set in a slightly tighter font. Also a reminder that you can put elements across from each other and they can still feel related, like “Surrender” and “MAGGIE ROGERS” here.
