Modal Presentation

In this section, we'll create a modal layout for a daily goal with the Stepper . The modal transition appears from bottom to top. We’ll use Expanded since there is a lot of space. Using this width style allows you to fill the empty space and keep the size proportional.

Blurred Background

• Recreate an artboard and fill with the same fill color #131524.
• Duplicate the screen, remove all the elements, keep the Status bar and Home Indrrrricator.
• Create an Oval 536 x 676 by pressing O, Fill #4B50CA, 50% opacity, Blur 50, X -60, Y 168.

Modal

Let's create a Modal body and a drag handle that we will place at the top of the rectangle.

• Create a Rectangle 390 x 544, Corner radius 20, Fill #131524 , 20% Opacity, Background Blur 20.
• Add the Shadow 1 with Black 12% opacity, X 0, Y 0, Blur 20 and add the Shadow 2 with Black, 40% opacity, X 0, Y -20, Blur 40.
• Create a Rectangle 44 x 5, Fill with white and Blending mode Overlay, X 172, Y 308 for the Drag Handle, Corner radius 3.

Modal Title

• Use White SF Pro Expanded Semibold 38 for Your Daily Move Goal.
• Use SF Pro Regular 17 for the Descriptions, 60% opacity.
• Spacing between both is 20, align center, group them by Command+G, name Goal Descriptions, X 44, Y 350.

Input Stepper

• Create a symbol minus.circle.fill with SF Pro Medium 44, right click and Convert to Outlines.
• When using Convert to Oulines, the layer will become a vector and there will be decimals in the size (44.45 x 44.45). Change manually to 44 x 44.
• Select the Shape Layer, right-click and Ungroup to edit the shape separately.
• Add linear gradient on the oval shape from #FE7C6F to #FD5B7D, white for the minus shape, X 49, Y 578.
• Repeat with the plus.circle.fill symbol, X 296, Y 578.

Stepper Label

• Write 300 using SF Pro Expanded Bold 65, align center, auto width.
• Write CALORIES / DAY with capital letters using SF Pro Expanded Regular 17, align center, auto width.

Button

• Create a white Rectangle 350 by 52, Corner radius to 24, 20% opacity, White border, width 1, Blending Mode Overlay on Border, Background blur 20.
• Add the Shadow 1 with Black, 20% opacity, X 0, Y 20, Blur 40 and add the Shadow 2 with Black, 12% opacity, X 0, Y 10, Blur 20.
• Write Change Move Goal using SF Pro Expanded Semibold 18.
• Select the Rectangle and the Text, align center, group them by Command+G, name Button, X 20, Y 727.

Circular Progress

For this section, we’re not going to design the background button from scratch since it’s similar to the progress ring from the second screen. I made some small changes on the size and opacity. I have already prepared it for you in the Assets file. All you have to do is to position it at X 5, Y 50 and make sure to place it at the back of the Modal Layout.

Transition

When it comes to navigating between screens of an app, there are two common forms of transition. You can navigate through an app’s hierarchy by using Push or you can transition with a modal presentation.

When you transition through a hierarchical navigation, a view pushes, which means a person has tapped on an element and the next screen slides into view from right to left. As for the modal, it appears from bottom to the top.

Conclusion

This is everything we have created together so far. I hope this deep dive was helpful for you. When designing a navigation for your iOS apps, think about how the content is organized, how people interact with your functionalities and how to best represent it in relation to your hierarchy. So people can easily interact with your app and I hope you decide to try Sketch , a great tool for designing for iOS.

Thank you so much for taking this course! I hope you enjoyed everything that you've learned today. Give us a shout out on YouTube . I'll see you in the next course.