I find this year to be a fascinating year for interface design. Apple announced last year that the Next Generation of Carplay is coming in late 2023. If that were the only news, I would think this year was huge. I think CarPlay is gorgeous today. I want front-row seats to seeing the interface elements of our phones and computers, as dreamt up by Apple Design, extend into more of the automobile. I want to see what works, what didn’t work, how they made it work, how they thought about it… give me hours of that design process and that result.
But that’s not all that’s slated for this year. Oh, no, no, no. Everyone thinks we are going to see an Apple augmented reality headset. And at the same time, designers and engineers formerly at Apple at Humane have Spring 2023 typed out as the glamorous release-date-in-lights for their product, which has been marketed as not a phone, not a tablet, and not a screen.
Products can be good or bad, successes or failures, divisive or universal. But beyond all that noise, I see a world of human creativity, thoughtfulness, and effort: design.
I want to know everything about everything we are supposed to see this year. I want to congratulate every person who put their life into designing these inventions. I want to get lost in their abilities and enjoy myself.
This week, we’re looking back at a few of the beautiful designs Apple shared with us at last year’s WWDC. Looking back, but daydreaming about the year ahead—that’s where you’ll find me.
I hope you find something here that you can mix into your own design work. Thank you for reading UI Designer Weekly. —S
Come on Out, There’s a Patio
An iPhone on iOS 16 shows an area outside the Lock Screen. I love the way this design connects to the design of watchOS. There’s never been an area outside (or bigger than) the Lock Screen. And yet, if you wanted to edit the entire Lock Screen itself, wouldn’t you need to get to someplace outside it? I think this design shows a beautiful understanding of human-computer interaction. It reminds us to look for those moments in our own designs where someone might think, “of course it works that way.”
Quick, Hide the Computers
I love the written language of Now, Tonight, Tomorrow Night, and Later… here on Mail in macOS Ventura. There’s an understanding of the person there at the Mac—someone who wants to send an email tomorrow, but doesn’t mind when. If this design required picking a specific time, it’d be cumbersome. This is a great example of how we can remove computer-y details and steps from our designs to relate to the person on the other side.
I Didn’t Even Notice the Tiles
Weather on iPadOS 16 displays everything from the day’s weather to the week’s weather and the wind. This design beams with care and creativity. It’s a reminder that we can step outside the most common interface layouts (like lists, for example). We can try something new and dense, and we might end up with a beautiful result.
We Added Our Own Touches
I love watching iOS grow, seeing interface designs from the Mac spring up in the garden of iOS human interface guidelines. Here, this file menu has everything you could ask for in an iOS reimagining. I think this shows us that there’s more in the past that we can bring to the present—that the present has some room still.
We Know It’s a Mess, But It’s Our Mess
A lived-in home gets messy, as does a screen. I have always found Stage Manager to be incredibly inspired and beautiful. Proportions at play, gravity with its give, designs overlaying atop each other. This is the inventive spirit we could only imagine landing on planet Apple—and beyond. It might not be for everybody just yet, but I think there’s something grand here.
Can You Give Me a Hand?
This year, folks. I’m telling you…
Thank you for reading UI Designer Weekly. See you next week.
We added two new elements, Vertical Grid and Horizontal Grid. These elements make designs like this and this fun and easy to make in SwiftUI. Grids are a dream when paired with Repeat—your designs intelligently flow elements from left to right and wrap to new rows.
Grids work in two modes, Count and Auto. If you want to make a grid with equal columns, use Count and manually set the number of columns. DetailsPro and SwiftUI will automatically and equally size that number of columns. If you want to set the minimum and maximum size of your grid elements and let the number of columns be determined automatically, use Auto.
We also added a new modifier, Aspect Ratio, which lets you give your elements set ratios to fit into. You can make a hero area stay 16:9, or a grid photo stay 1:1. If you are using Aspect Ratio with an image element, make sure to set the image to Fill so it fills the set ratio.
New Templates
Photo Grid—use this as a starting point for big, beautiful grids with added style. The corner radius and spacing applied give this design a fun feel.
Profile—use this as a starting point for a tighter grid that fits in with elements above and below it. Lower grid spacing and an aspect ratio modifier set to 1:1 make this a good general starting point.
A few existing templates that had grids before Grid have been updated to use the new elements. Check out Store, Grid, and Adventure Grid.
Fixes and Improvements
Two new elements have been added, Vertical Grid and Horizontal Grid. These export in code as LazyVGrid and LazyHGrid. Vertical Grid is probably the grid you are thinking of, where elements go across and then down the screen. Horizontal Grid is like what you see in Apple Music and the App Store, where there are a couple of apps on top of each other and then more going off to the side that you can scroll to.
Aspect Ratio is a new modifier available. Set a width and height to create your aspect ratio (like 16:9 or 4:3) or select from a list of presets. You can also tap the flip button to instantly switch the sides of your aspect ratio. You can also set an alignment property for elements that fill the aspect ratio. You can use this to make the top, bottom, or center of an image element show, for example.
Repeat now always shows the Add Item button at the top so you can repeatedly add new items without having to move your finger with the button.
The Line Limit modifier now properly defaults to a line limit of 1.
Waking up on the morning of WWDC and watching the keynote is a tradition I look forward to every year. It’s a time not only for seeing what Apple as a company has been up to, but for seeing what the people at Apple have been up to. Our favorite Apple employees do not have the luxury (or the burden, depending on how you see things) of being able to share their work online all year.
The morning of WWDC lets loose many years of work, creativity, and coordination, in a form made to entertain, delight, and inspire us. If you can’t tell, it’s a day that I’m looking forward to as much as ever.
Next week, in the UI Designer Weekly newsletter we’ll be looking back at a few of the coolest designs that were introduced at last year’s WWDC keynote.
For this week, we have everything from an Apple Newsroom web design to an intuitive Apple Maps screen to Steve Jobs Foundation interface charm.
I hope you find something here that you can mix into your own design work. Thank you for reading UI Designer Weekly. —S
Adding to the Experience
An Apple Maps button asks you if you want to share pictures you’ve recently taken somewhere the next time you search for it in Apple Maps. Tapping the button opens a screen that takes your review and gives you an easy and inline picker to select the pictures you want to share. I love this design because I think it does a gentle job of suggesting I share my pictures and then the screen to do so is quick, light, and doesn’t ask me to write a review. I think this is a great example of how we can include suggestions in our designs and how a single page can take all sorts of input without feeling overly long.
Slide to Unlock (Knowledge)
An inviting part-timeline-part-navigation design from Make Something Wonderful. This design feels new to me. We’ve seen book navigation where pages are a horizontal scroll along the bottom, but maybe with a book like this where jumping around chapters is encouraged, a design like this fits better because the navigation is more visible. This is a great reminder that we can look for ways to bring gestures into our design’s interactions (this bar supports tapping chapter titles or sliding up and down the bar) to make things more inviting.
One More Things
I loved the way the Steve Jobs Foundation handled instructions for accessing the book. A list of expandable sections has each destination titled “For iPad, iPhone, or Mac”, “For Kindle”, and so on and expanding each section shows a simple sentence explanation for what to do and where to go.
While You Listen, or While You Look
An Apple Newsroom story combines photography with audio from that moment in the photo. A play button paired with a waveform (iOS 16, anyone?) invites you to click and listen. I keep going back and forth on whether I think this is the audio paired with a photo or the photo paired with audio. It must not matter. But what a great example of how we can add that one additional bit of interactivity and sensation to make two separate things one new whole.
Thank you for reading UI Designer Weekly. See you next week.
Hello and welcome back to another issue of UI Designer Weekly!
Since it’s hard for me to do this newsletter year-round, I’m going to break it up into “seasons” and let you know when a season is starting and stopping. This way, you’ll know when to expect this newsletter and when to expect it to be on a break.
We’re going to call everything before today Season 1 and this issue you’re reading the first issue of Season 2. I’m excited to be back with the same goal as before. From the very first issue of UI Designer Weekly back in October 2020:
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.
This year will hopefully be chock-full of beautiful Apple design. With that, let’s get started.
Thank you for being here,
Sahand
The Whole Bar is the Circle
A new volume slider and track slider in iOS 16. This design is without something that used to be there: a small circle on the bar. You used to have to touch the circle (wherever it was on the slider showing you the volume level) to then start sliding. Now, you can touch anywhere and start sliding immediately. This is maybe a great example of how an updated design can hint at its new functionality. Without a small circle, people might see this and wonder how they are supposed to use it. And then, needing to adjust the volume, they’ll surely try.
Oh, Before You Go
Sending an iCloud Drive PDF on iOS 16 shows a new dropdown outside of iCloud Drive and inside the Messages screen. Since PDFs can be sent as copies or as shared items, there’s a choice people have to make, and before this update people had to make that choice on the share sheet. You can still do that, but now you’ll see this choice and have another a chance at it when you’re preparing the message. I think this is a great example of putting a design where people will see it. You can place the choices people have to make “on their way” so they’ll always see it on the way out (or in).
A Classical Separation
Apple Musical Classical features a design made for dense information, and yet has in many places done away with separators. Separator lines (the thin, gray divider lines used throughout iOS) are usually known to be useful precisely in the situation Apple Musical Classical addresses: when you have so much information you need to clearly display lots of information. This could be a gentle reminder for us all: we can try our designs with a little bit of added whitespace instead of another visual element added.
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.
We added a way to see any side of a big design even if that design is bigger than your preview area. If you zoom a design to be bigger than the preview area, you’ll instantly see a new Preview Alignment button appear right next to the Preview menu. Your alignment defaults to Center, but you can quickly tap the button and release on any option like Top, Bottom, Leading, etc based on how your design is sized.
Instantly, you’ll see that part of the design pinned so you can work on the top of a design or the side of a design without having to reduce the zoom of a design like before. Finally! This has been an issue for a long, long time with DetailsPro and we are excited to finally have fixed this problem.
New Templates
Many community templates have been updated for Repeat. Check out the Featured collection in Community.
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.
We added an easy way to design for repeating content in SwiftUI with our new Repeat element. You can design lists, carousels, rows, tables, and more. You can also handle special cases, selection states, variations, and alternates with controls that let you make special modifications to any specific items in your repeat separately from the others(just like in real interfaces). You can also nest repeats in repeats!
To help you get started with Repeat, we’ve updated every template in DetailsPro that could use repeating elements with the new feature, so you can pick one that is close to your use case as a good starting point. To use repeat in one of your own existing designs, you can select the first element you want to repeat and then long-press to wrap that element in a Repeat. Then, you can delete any manually-repeated elements that were after that element and now instead use the Items section of your new Repeat to quickly add, edit, and design with your content.
The following templates have been updated to include Repeat for their content: Store, Scrolling Rows, Media Scroll, Pricing, Pricing Tiers, What’s New, Large Navigation, Adventure Grid, Grid, and Weather.
Fixes and Improvements
Improved the presentation of inspectors when the keyboard is showing on iPad
Fixed a bug that was causing “My Profile” to display incorrectly
Inspectors on iPhone now behave more similarly to sheets on iOS, allowing you to dismiss them each individually and have multiple inspectors open at different heights. To dismiss all inspectors at once, tap on the background of your design area.
Added SwiftUI code export for the new Repeat element, which exports as a ForEach.
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.
We added two new templates that were requested—one is called Store and you can use it as a starting point for designs that mirror the App Store, with a special scrolling row at the top and many smaller rows of content below. The other template is called Scrolling Rows and this is more of a detail page with horizontally-scrolling rows. As always, these templates are free and included with DetailsPro. Access all available templates in the “New From Template” row on the homepage or by selecting the “Start with Template” button after creating a new design.
We also added in files search so you can quickly pull up any files you’ve previously made. At the top of the Designs tab or in any opened folder, you can search for files by name.
New Templates
Store—use this as a starting point for designs that should have a featured row at the top with content that might have multiple kinds of metadata.
Scrolling Rows—use this for designs that need to catalog or organize many different sublists of content, like seasons of a show or categories of products in a store.
Large Navigation—this is a basic and empty template that features a large navigation title. Use this template for screens that might be at the start of the flow, before someone has scrolled, when their device would show this bigger, bolder title.
Fixes and Improvements
Added files search to the Designs tab and to folders
Added “place” as an alias for “New Item with Stack” along with “wrap” and “embed” when using ⌘K keyboard commands
The status bar of your device is now hidden when previewing a design in full screen, so you can use DetailsPro to design new status bars and elements in the status bar area
Fixed a bug that was causing the tappable area of images to sometimes exceed their visible shape
