Build a completely functional prototype without writing a single line of code from your phone
Imagine designing and prototyping a beautiful iOS app without writing a single line of code. With Play, you can create functional, smooth interactions and animations directly from your iPhone or iPad.
This amazing design tool includes built-in native iOS components, animations and interactions. Create high-fidelity micro interactions and complex gestures such as panning, dragging, and advanced scroll triggers. In addition, your team can collaborate in real-time on your design system via the web.
You can also import your design from Figma but in our case, we will start everything from scratch. You can share it with a simple URL and it’s available for iPhone and iPad. Soon on Desktop.
This course is entirely free thanks to Play’s sponsorship. We are going to build an Airbnb-like mobile app with Lottie animations, interactions, iOS native components such as the Map and the Date picker.
In this course, you will learn how to create this beautiful prototype designed by Aksonvady from DesignCode. First, we will learn about layouts. This is very similar to Figma combined with SwiftUI. Meaning that it is a design tool where you add iOS native components. Then, we will tackle custom components, how to use states to create animations and some interactions such as scroll, pan and tap. Afterwards, we will create this amazing sidebar menu animation using states, transformations and sequence animation. Another creative way to animate your app is using Lottie animation, we will use this technique to build our Tab bar. To this point, we will use more of the native iOS components such as the Map, Navigation and the Date picker.
To follow this course, you need a device with iOS 15, iPadOS 15 or a Mac with Apple M1 chip or later.
We are very pleased to announce that the Play macOS app will be released early next year. The app will be available for download from the Play’s website, and will allow you to do everything from this course, as well as additional features.
Every container in your layout can flex based on the amount of content you add. Similar to Flex box in CSS and Stacks in SwiftUI, you can add content and adjust the direction, gap, alignment and distribution.
When you are done creating a new layout, you can choose to make it into a component so that you can reuse it elsewhere in the project. If you decide to modify the component, the modifications will apply to all instances.
States and Interactions
In Play, only components can have states. Interactions are there to trigger the states.
We can move the home screen to the right side and make the sidebar menu appear by using states, transformations and sequence animation.
To make things more fun and interesting, we will use Lottie animation on the tab bar to make it visually appealing.
Native iOS components
We will be using some of the more native iOS components such as the Switch, Map, Date picker. We’ll explore the different navigation methods and transitions you can use.
We will also build the detail screen from scratch.
Play has tutorials on specific techniques on their explore tab as well as on their Youtube channel if you want to learn more.