Intro
Add to favorites
Create an interactive tinder-like card swipe with custom design and animations
Play video
The course consists of three parts. The first, which is the main focus of this tutorial, is the ticket interactions, then we'll spend some time on the custom tab bar, and lastly, we'll cover the app's navigation flow.
Demo App
In this demo, you see that there are ticket interactions, followed by a custom tab bar. Then, the flow from the home view.
Assets
To follow this course, you will need to download the assets which include the Figma template, Xcode projects. It includes pre-made components, images, colors, and data files.
Figma Design
The source files will include the project's design in Figma, so you can inspect the colors, typography, assets, and animations. You can also duplicate it from the Figma community. Sourasith designed the entire UI and animations.
https://www.figma.com/community/file/1102953368834419129
Folder Structure
After all that, let's look at the template. The template has multiple folders. It contains pre-made components or data files. The assets one contains all the colors and images we need.
- UI
- Data
- Buttons
- Views
Ticket View
To begin, let's create a new SwiftUI file for TicketView. Start with a ZStack and add a background modifier to it; then place a VStack in it so that we can align the two texts vertically. Next, let's add a series of modifiers to our texts.
ZStack {
VStack(spacing: 30.0) {
Text("Mobile Ticket")
.font(.title3)
.foregroundColor(.white)
.fontWeight(.bold)
Text("Once you buy a movie ticket simply scan the barcode to acces to your movie.")
.frame(maxWidth: 248)
.font(.body)
.foregroundColor(.white)
.multilineTextAlignment(.center)
}
.padding(.horizontal, 20)
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
}
.background(
LinearGradient(
gradient: Gradient(colors: [Color("backgroundColor"), Color("backgroundColor2")]),
startPoint: .top, endPoint: .bottom)
)Background circle animations
For the background animations, we will use 2 circles with different colors and blur them. We will then move the circles around using a variable called "animate". The actual component is already made.
Templates and source code
Download source files
Download the videos and assets to refer and learn offline without interuption.
Design template
Source code for all sections
Video files, ePub and subtitles
Videos
Subtitles
Assets
1
Intro
Create an interactive tinder-like card swipe with custom design and animations
6:33
2
Ticket Model
Custom card design using specific corner radius
5:04
3
Ticket Stack
Create an infinite stack of cards
11:21
4
Drag Gesture
Interactions and animations using drag gesture
5:08
5
Custom Tab Bar
Make a unique navigation in SwiftUI
5:23
6
Tab Bar Animation
Create a simple tab bar interaction
6:32
7
Custom Search Bar
Use TextField to make an editable field
4:26
8
Scroll Section
Enable the scroll gesture in your app
5:03
9
Navigation
Create a flow between multiple screens in SwiftUI
12:22
10
Button Layout
Learn how to make an unique button layout
4:46
11
Seats View
Learn how to dismiss your current view
4:43
12
Pop to Root
Using PopToRoot to navigate to the root view
1:59
Meet the instructor
We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.
Willie Yam
Front-end/UI developer at Design+Code
I do UI coding. HTML/CSS/JS/SWIFTUI dev.
10 courses - 37 hours
Design and Prototype an App with Play
Build a completely functional prototype without writing a single line of code from your phone
3 hrs
Create a 3D site with game controls in Spline
Build an interactive 3D scene implemented on a ReactJS site using Figma and Spline
2 hrs
Build a Movie Booking App in SwiftUI
Learn how to create an iOS app based on a beautiful UI design from Figma with interesting animations and interactions, create a custom tab bar and use navigation views to build a whole flow
1 hrs
Build Quick Apps with SwiftUI
Apply your Swift and SwiftUI knowledge by building real, quick and various applications from scratch
11 hrs
CSS Handbook
A comprehensive series of tutorials that encompass styled-components, CSS, and all layout and UI developments
1 hrs
Advanced React Hooks
Learn how to build a website with Typescript, Hooks, Contentful and Gatsby Cloud
5 hrs
Unity for Designers
If you want to make a game and don't know where to start, you are in the right place. I will teach you how to use Unity, code in C# and share essential tips and tricks to make your first game.
5 hrs
Create a Javascript Game
Learn how to create a web game using Phaser 3, a popular javascript game engine. Draw a map using an editor, implement the player, make the player move, apply physics, collisions, and implement the enemies.
2 hrs
Build an ARKit 2 App
Introduction to ARKit and learn how to make your own playground. You will be able to add models or even your own designs into the app and play with them
4 hrs
Create a SpriteKit Game
Overview of SpriteKit a powerful 2D sprite-based framework for games development from Apple and learn how to create your very own platform
3 hrs
