Intro to Play

Sponsored Course

This course is entirely free thanks to Play’s sponsorship. Play allows you to design apps with native elements. It means that you don’t need to be familiar with HTML, CSS or JavaScript — just use predefined components, like buttons, cards, tables and many others. So it will be really easy to create your own app without any coding skills!

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.

Final app: https://share.createwithplay.com/project/wxdzABsrDd12wjKr8 Figma file: https://www.figma.com/community/file/1179491115570614862

This Course

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.

Downloads

To follow this course, you need to download the Assets file which includes the images. As well as the Play app.

Requirements

To follow this course, you need a device with iOS 15, iPadOS 15 or a Mac with Apple M1 chip or later.

macOS app

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.

Layout Stack

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.

Components

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.

Sidebar Menu

We can move the home screen to the right side and make the sidebar menu appear by using states, transformations and sequence animation.

Lottie 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.

Detail screen

We will also build the detail screen from scratch.

Tutorials

Play has tutorials on specific techniques on their explore tab as well as on their Youtube channel if you want to learn more.