Hi, and welcome to my SwiftUI for iOS 15 course.
My name is Meng I'm from Design+Code and this is the app that we're going
to learn how to build from scratch.
I'm going to teach you everything that I have learned over the past two and
a half years, working with SwiftUI.
UI.
Publishing an app and building a bunch of courses.
So this UI right here is using a custom Nav bar and a custom tab bar.
You can see that it's all animated and functional.
This course is great for both designers learning code and for developers learning
design and challenging UI techniques.
So here we have a tab view for example, that is using pagination and you can
scroll and we have some parallax effects and the blur, as well as the new material
sheet in iOS 15 where you can customize with foreground style and background.
Then we'll learn how to create a custom transition using
a matched geometry effect.
Now we're going to detect the scrolling position and
apply some more parallax here.
And this is using.
Data.
So we're going to learn how to loop.
How to customize the new list options in iOS 15, how to animate
these outlines using progress view
Then we'll want to navigate to subsections and you can see it's all scrollable and
I can go back, go to another section with completely different data and come back
as well as going back to the main screen.
Now we can also decide to go to another screen and then swipe
from the left to create this beautiful transition with gesture.
And then at a maximum distance, it's going to transition back.
Now let's take a look at the login experience.
I'm going to tap on the profile icon here and we have a modal.
So this is completely custom.
Fully animated
And we have this blue circle that follows where you tap.
You can also switch between sign in and sign up.
And when you log in everything dismisses and now you're fully logged in.
And then we have a account view where we're going to learn how to create
graphics using the new canvas in iOS 15.
So this is a blob animation with the new SF Symbols three, where we're
going to learn how to change the different styles, the new symbol
variant as well as the rendering mode.
So you can customize even more with a larger library of icons provided by apple.
We're going to learn how to create a lite mode version, because when
you're working with a lot of shadows and animations, you might want to give
the option to your users to have a lite mode without all of those things.
And it's also great for accessibility.
Then we'll learn how to work with concurrency.
So all of this data is generated from an API and it's so easy now
to work with async/ await instead of using a lot of closures.
All the techniques that we learn in this course will prepare you for adaptiveness.
We're going to learn the best ways to create something with the
least amount of code possible.
And as readable as possible.
And you can see when I change to dark mode.
Everything just works beautifully
Because we'll learn how to work well with colors.
So the assets catalog, as well as the primary secondary colors that go
really well with the material sheets
And because I consider myself a designer first, a lot of these
UI details will not be skipped.
You can see that it's pretty functional.
And it's going to teach you a lot of the essential techniques, to create
a production ready app, but at the same time, we're going to have a
lot of fun with the animations, with the different techniques, and most
importantly, we're going to make sure that every step of the way is going
to be easy to understand and easy to learn for anyone of any skill level.
So as long as you have some coding experience, you know how to use a
computer, how to code some basic HTML and CSS, or you have done
SwiftUI UI or swift in the past.
This course is for you.
So I hope you are as excited as I am to get started because
we have a lot of content.
We have over 60 videos across three parts of this series.
We're going to start from step one from the design tool where we have
all of the screens, all layered with components, as well as the design system.
So we have the colors, the dynamic type
And all of the assets, including the app icon, where I prepared this
template, I'm going to show you how to export and import to Xcode.
As well as the assets, when we're going to start building the app.
So all of these files are available to download at the bottom of this
page or every page in this course.
And here you can find all the assets that you can just drag and drop to
Xcode and skip the importing process for the app icon and so forth.
You have the Figma file and then you have the images as you would have if you
were creating your project from scratch.
So you're going to have different types of images and we're going to
learn how to import them one by one.
Now at any point, you can compare your progress against what we have in the
course or you can see what is the final project that I have shown you so far
in the first minutes of this video.
The first thing you need to do is to head to the app store
and find the app called Xcode.
And here we are at the 13 version.
So Xcode 13.
You're going to install that and then open it.
Keep in mind that Xcode 13 only works for macOS Big Sur or later,
and in this case I have Monterey.
And when you have Monterey.
You can only have Xcode 13, you cannot go back to Xcode 12.
Once you have Xcode 13 installed, it's going to ask you to
install a bunch of components.
You're going to do that.
And then when you open it again, and you're going to see this dialogue
Where you're going to create for some of you, your very first Xcode project.
So let's tap that.
And here.
We're going to see this dialogue here.
We're going to tap on iOS.
And an app.
Click on next.
Then we're going to name the project.
In this case, it's going to be design code.
iOS 15.
For the team we're going to deal with that later, but essentially if you
want to be able to test on your device
You're going to need to have a developer account.
It can be free, and it's going to allow you to set up some certificates
and you're going to be able to test on your device, but otherwise,
You do not need that for now.
You can always use the iOS simulator.
For the organization identifier, it's going to be your domain name in reverse.
So for example, com.apple, com.twitter.
In my case, it's going to be io.designcode.
And with these two combined, it's going to give you the unique bundle identifier.
For the interface we're going to select SwiftUI the language Swift.
And then we're going to tap on next.
So here we're going to save our project.
And typically you're going to save that in downloads, but you can save
that pretty much anywhere you want.
And we're going to create.
And there you go.
This is your project in Xcode 13 so the first thing we want to do
is to resume so that we can start.
Showing the UI preview for what you have in code right here.
Now at the beginning, we're not going to write any code.
We're just going to explore the UI of Xcode 13.
So this might take some time to load for the first time.
And also, if you want to change this device to preview, you're
going to want to go to this list right here and typically you want
to start with, let's say iPhone 13
Anytime that you change the device, you might want to resume, and
you're going to see the new device.
And anytime you change the code, it's going to also show
the preview in real time.
Now let's talk about the X code UI.
First of all, just like in the design tool.
You have the navigator in the left and the inspector in the right, the
inspector allows you to change the options based on what you have selected.
And the navigator is where you're going to find your project files such
as the different views and the assets.
Now it is important to understand that we have different tabs for the left side.
So here, the first tab is the most important it's
called the project navigator.
And in the right side as well, we have different tabs and the most important
one is called the attributes inspector.
Make sure to always go back to those tabs.
Sometimes X code will automatically switch.
For example, when you have a crash or when you have some issues, it
might switch to these other tabs, which is why it's important to
be familiar with the main tabs.
At any time you can decide to hide the left part.
As well as the right part to save some screen real estate.
Now I'm going to show it back.
And here in the middle part, we have the code editor.
And then on the right side, we have the preview where you're
going to have a lot of options.
Again, we're going to explore these things later.
Now, if you want to run the app in the iOS simulator, which is a
simulation of what you would see on your device, it's very accurate.
You can do so by clicking on play, but we're going to do this mostly
later and we're going to be mostly using the preview for the time being.
And here we have the project.
We have the device, we have the status.
And we can insert elements by clicking on the plus sign.
But before we start building, we're going to need to set up our project.
First of all, if you want to go to project settings, we're going
to tap on design code iOS 15 and this is where you can change.
The display name, for example.
I'm not going to get into the other things.
I don't think they are important for the moment.
But let's say we want to change to just design code.
And the second thing is you want to make sure that your
development is going to target.
iOS 15 because this is an iOS 15 course.
And also if you don't target iOS 15, it's going to set up all of these conditions
that might put off some beginners who have not done iOS development in the past.
So make sure to set the deployment target for iOS 15 for now.
Next we're going to go to the assets catalog.
And this is where you can set the accent color for your
app, as well as the app icon.
And we can also drag and drop some images that we have from the project.
The next part is optional.
I will be showing you how to import the images one by one, how to set up the
color sets and how to work with Figma.
Now, if you don't want to follow that.
You can just go to the assets folder.
Double click on it.
Select all.
So using command a in your keyboard.
And then drag and drop the entire thing.
But before you do that, make sure to delete these two.
So accent, color, and app icon.
Now we're going to go back to the folder and drag and drop.
The entire thing.
Once you have this done, then you have all your assets set up.
From here, you can just move to the next section.
So this part is optional because you can just drag and drop all the
assets that are prepared for you.
But let me explain how I prepare my assets.
First of all, you want to set up your colors and then your
dynamic type when you design.
So you can just apply to the correct element and it's
going to be very consistent.
It's going to be easy to translate to swift UI as well.
For the complex assets, you want to make sure that you export them in PNG
and that they are at least scale at 3x because we have the Super retina display,
which is with the 3x pixel density.
Now.
This is not for UI because for most UIs is going to be done in swift UI.
But for these images, they need to be scaled so you don't need to
export necessarily to one X, two X and three X, because you just need
to set a single universal size.
For something that is not complex with just a few shapes.
And you want to be able to scale infinitely, and it's
going to keep the sharpness.
You can use either the PDF or the SVG format.
Now the PDF is a little bit more well-versed in iOS
Versus the SVG, which is a little bit more limited, but again,
depending on what image that you have, your mileage may vary.
Now for the app icon.
You want to set all the resolutions unfortunately you can't just set
one resolution that's going to scale now for now, you're going
to need to set them one by one.
One trick that I do is that I set a component here.
And then from this component, I just resize them one by one.
And just set the frame name and export.
Everything.
Like this.
Once you have all your assets.
Let me just reset the way it was before.
And we're going to follow each step.
So in a typical project, you're going to have the images folder
where you have the app icon prepared.
And the different images that you have exported from Figma or any design tool.
For the app icon, we're going to tap on app icon then we're going to go to the
app icon folder, and then we're going to find only the iPhone files first.
So let's select all of them at the bottom, starting with the
iPhone 20 at 2x and drag and drop.
Right here.
So this takes care of the iPhone.
app icons.
So next we're going to set the bigger one.
So the app icon beta.
And then finally, we're going to do the iPad.
So starting with the first one in order.
I'm going to skip this part.
Which is just to drag and drop one by one.
There you go.
I'm going to drag and drop the last one.
Next, we're going to talk about the accent color.
What is the accent color?
Well, it's one color that's going to apply to all your text buttons
UI buttons, sidebar and so on.
To set it up.
I'm going to select it.
And there's just one important thing that you need to know.
First of all, we're going to go to the design tool and we're
going to find the colors in iOS.
And this is where you're going to see that we have colors prepared
for both light and dark mode.
Typically the light mode is a little bit darker, so it's more readable
and the dark mode is going to be lighter again for better contrast.
And so for the accent color, we're going to set this color right here.
We're going to copy the hex value.
And typically that's what designers use.
And so we're going to go back here and in Xcode we're going to set the appearances.
To any dark.
So now we have two versions, one for light mode and the other one for dark mode.
Let's set the light mode.
First, I'm going to go to the color content and here you can set to P3
which is the new devices such as the iPhone and the new monitors that
apple use or sRGB and this depends on how you set it up in Figma as well.
Now for the input method.
I'm going to set to eight bit hex, and this is where I'm going to paste the value
that I got from Figma and press enter.
And there you go.
I'm going to do the same thing for dark mode.
And again, I'm going to use sRGB.
Hex.
Go back to Figma.
And then get the color value.
Now we're going to create more colors for the background and for the shadow.
And you can create as many color sets as you want.
It's going to really help your implementation, especially if
you want to adapt for dark mode.
To create a new color set we're going to right click here
and click on new color set.
And we're going to name that background.
Then you will repeat the same steps.
So you're going to be taking the colors from Figma.
And once you're done, you should have something like this.
Now you want to organize your images and your colors.
So what you can do is select these two colors, right click on it.
And click on new folder from selection.
We can name this colors.
Then for the rest of the images.
So we have done the, app icon far, we have also created the colors.
Manually.
And then we just need to drag and drop the rest of the images.
So like this.
And that's it.
You should have all your assets right here.
If you had trouble with any of the steps, you can always download the
Xcode project provided in the assets files from the previous section.
And in this case, we have set up the project
then we're going to go back to content view, click on resume, and
here we can start building the UI.
Now, please keep in mind that any time that you have a problem with X
code, you have a build problem, and sometimes you don't know what to do.
You can always do command shift.
K to clean your build.
Command B to build again
Or worst case scenario, we can restart Xcode which works like magic.
Now that we have the setup out of the way, we can finally start
building the UI based on the design that we have, the animations, the
fun stuff that we want to build.
So to get started, I'll see you in the next section.