Command Modal

This design has been updated for Repeating Elements. Each action in the bottom section you see if based off of a single original element and then repeated, and for each one you can easily change the icon and title.

——

This design is our Design of the Week for April 22nd, 2022, and a companion to Issue 28 of UI Designer Weekly. Check out the latest issue on the DetailsPro blog!

This design is a clean, lighter-than-a-feather example of a command modal in the common ⌘+K style. The entire layout is handled by a single vertical stack that shows the elements at the top, down to the divider, and then uses a scroll container to make the actions below scrollable. Check out the use of the Background modifier to add the Rounded Rectangle in the back.

Command Modal imagines a ⌘+K command pop-up that shows a clean preview of the content you are about to share and familiar command actions that use the SF Symbols you might already recognize. This design takes advantage of a neat SwiftUI trick which is adding a Font modifier to an entire stack—each of the “action” stacks has a font modifier on it that handles making sure the SF Symbol and the text element are perfectly in-sync. Better yet, that horizontal stack uses the “First Text Baseline” alignment option to use the built-in support for SF Symbol baseline alignments.

📚 Command Modal would work on images, text, songs, videos, and more. Try changing up the preview area at the top to make it show a preview of something other than an image.

📚 Looking for something more advanced? Try changing the list of actions to show a list of “Recently Used” actions at the top.

Try changing this design into something entirely new, or experiment with the hero area elements to see what other looks you can find. And see you next week for the next issue of UI Designer Weekly!