Category: Tutorials

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.

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.

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.

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.

DetailsPro makes it easy to design in SwiftUI and get a carousel ready to go to export into Xcode.

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.

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

1. Open a design
2. Select any Text element
3. Add a Font modifier
4. Choose a width in the “Width” section
5. Try Compressed, Condensed, or Expanded

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!

DetailsPro’s mission is to make designing with SwiftUI accessible to as many people as possible, and on macOS and iPadOS part of that mission is supporting the great keyboard commands and interaction patterns that people are used to.

DetailsPro supports a powerful range of keyboard commands that are all accessible from ?K, and on top of that supports a range of other keyboard shortcuts.

Read on below for a list of everything. For more information, you can also read our blog post announcing keyboard commands in DetailsPro.

Keyboard Commands

• Open Keyboard Commands — ?K
• Select Next Element — ??
• Select Previous Element — ??
• Select Next Insertion Point — ???
• Select Previous Insertion Point — ???

Numpads

• Enter a number — 0-9
• Delete — delete
• Clear the numpad — c
• Enter a decimal point — .
• Return from the numpad — return
• Decrease by the nudge amount — -
• Decrease by the larger nudge amount — ? Shift -
• Increase by the nudge amount — =
• Increase by the larger nudge amount — ? Shift =

Keyboard Support

DetailsPro’s keyboard shortcuts work on iPhone, iPad, and Mac with any Bluetooth keyboard connected, including the iPad Smart Keyboard and Magic Keyboard.

Stay tuned for more!

We’ll be updating this post with all keyboard shortcuts in the app. Stay tuned for more!

The next time you’re creating a design that needs to lay elements over or behind other elements, you’ll have two methods you can choose from, each with their own benefits. You can use the Layered Stack (ZStack) or one of the Overlay or Background modifiers.

Here’s a simple example. Let’s say you are designing something with:

1. One image
2. One SF Symbol over that image

Let’s say it’s supposed to look like this:

The Layered Stack Way

Your first option would be making this design with a Layered Stack. Here are all the steps:

1. Add an Image
2. Add a Frame modifier
3. Add a new Layered Stack with that image
4. Add an SF Symbol
5. Select the Layered Stack and change the alignment

You should end up with something that looks like this:

Layered Stack is perfect for layered elements like this (hence, the name ?) and can handle designs, from the simple to the complex, with ease.

When to Use Layered Stack

We recommend using Layered Stack whenever you have a clean slate and know from the beginning that you want a design to be layered. Whether at the top of your design or somewhere deeper down, Layered Stack is great for the job.

When Not to Use Layered Stack

The only time we don’t recommend using Layered Stack is if you already have a rather complex design in front of you. If you have already done a lot of work and realize that you need to add layering to your design late in the game, we recommend using the second way we’re about to discuss…

The Overlay Way

Your second option is making this design using the Overlay modifier. Here are all the steps:

1. Add an Image
2. Add a Frame modifier
3. Add an Overlay modifier
4. Delete the placeholder “Overlay” Text inside the Overlay
5. Add an SF Symbol inside the Overlay
6. Select the Image’s Overlay modifier and change the alignment

You should end up with something that looks like this:

Overlay is a perfect, lean option for quickly adding layering over any of your design elements.

When To Use Overlay

We recommend using Overlay anytime your design feels like a certain design element is the “base” (here, the image) and the layered design elements really feel like they are secondary to that “base”. An image with action buttons over the image is a perfect example.

When Not to Use Overlay

The only time we don’t recommend using Overlay is when you are starting with a clean slate. Very early on in a design, if you already know that you’d like to make your design layered, it may be better to start with a Layered Stack. This way, you don’t have to worry too much about which element is the “base”.

Make Sure You Are Up-to-Date

The behavior of ZStack seems to have changed recently, in a really positive way, becoming easier to use and making these options possible. If you’re on an old version of iOS, you may not be seeing this behavior. Make sure you are on the latest version of iOS/iPadOS/macOS to enjoy these benefits. Doesn’t hurt to update to the latest version of DetailsPro while you’re at it!

Conclusion

SwiftUI is great like that, giving us multiple ways that are best suited to the many different situations that arise when designing.

Hand-in-hand with great design is great photography and Unsplash is really the place to find great photography.

As of today, you can add images from Unsplash directly to your SwiftUI designs, all from within DetailsPro on iPhone, iPad, and Mac.

We’ve added a new option you’ll find when choosing to add a new photo, Choose from Unsplash. Along with Choose from Photos and Choose from Files (we are very proficient in naming), this new option fits in nicely with what we currently have.

Our intention is for DetailsPro to have absolutely off-the-charts support for photos and the way that designers use them. So, this is a great time for a quick refresher on how DetailsPro handles images. When a designer adds an image, the source file for that image is saved in DetailsPro and made available to multiple designs at once.

We know from experience that most designers end up working on projects for a while and you’re basically reaching for the same or similar assets over that period of time. So we made DetailsPro specifically for this pattern to save designers from having to import the same images over and over and over. Leave the folder of assets behind after you’ve imported the images into DetailsPro just once.

Photo credit: Samuel Ferrara.