SwiftUI Tutorial: Glassmorphism UI Design

Рет қаралды 8,917

Күн бұрын

With only SwiftUI basics and no UIKit elements, this tutorial shows you how to create glassmorphism in xcode. By using a zstack to create layers then manipulating opacity levels, we are able to create the frosty glass effect. Glassmorphism is a recent UI design trend that has gained popularity on design platforms such as Figma and Dribbble.
This tutorial uses Xcode 12 and Swift 5.
View the source code on GitHub: github.com/Koshenka27/Glassmo...
For those interested in learning iOS Development, this is what I recommend: gumroad.com/a/793351283
Instagram: / logankoshenka
Twitter: / logankoshenka
#SwiftUI #Tutorial #Glassmorphism
The video and description may contain affiliate links. If you click on a link and make a purchase, I may receive a commission. Money earned helps to support my channel.

Пікірлер: 46

@DaveJacobseniOS 3 жыл бұрын

Loving to content Logan! Never messed around with glassmorphism so thanks for the walkthrough!

@morelogankoshenka 3 жыл бұрын

I appreciate that, glad you like it!

@maximilian.maksutovic 3 жыл бұрын

This was so great! Can't wait for more, thanks so much :D

@morelogankoshenka 3 жыл бұрын

Thanks - glad you like it!

@LegendaryArchives 3 жыл бұрын

nice job , watched all your videos! It really helps me a lot to get start

@morelogankoshenka 3 жыл бұрын

Thanks so much - glad you like them!

@crackvase 2 жыл бұрын

hey dude please keep up the good work , learning a lot from your videos , thank you

@morelogankoshenka 2 жыл бұрын

thank you 🤝

@divyamsolanki419 3 жыл бұрын

Loving the Glassmorphism, wanted to do it in Xcode also, been doing it in Figma for a long time!

@morelogankoshenka 3 жыл бұрын

Glad you like it!

@SebastiansBlog23 3 жыл бұрын

Good Job 8-) please more

@morelogankoshenka 3 жыл бұрын

thank you :D

@KelKrom 3 жыл бұрын

JAJAJA, you're funny, your teaching is pretty good, I've already subscribed and following on twitter.

@morelogankoshenka 3 жыл бұрын

hahaha I appreciate it!

@nazarbabiak6138 2 жыл бұрын

You're the best😁

@morelogankoshenka 2 жыл бұрын

thank you!

@CtrlAltMike Жыл бұрын

For everyone following along, "Color Literal" (mentioned first at about the 3:45 mark,) is no longer available in Xcode.

@morelogankoshenka Жыл бұрын

this is my biggest complaint! there are a couple weird workarounds but I’m really hoping it comes back

@CtrlAltMike Жыл бұрын

@@morelogankoshenka Yeah, it really sucks. Seriously useful utility - hope they work the bugs out. (Apparently it's been a thorn for them for a very long time.)

@danvilela Жыл бұрын

Hey bro, Im a Flutter developer but this Swift UI thingy seems fascinating. Do you have opinions comparing both frameworks? Would be cool to know. Thanks.

@morelogankoshenka Жыл бұрын

Man I’m sorry but I don’t know a lot about Flutter other than the fact that I know comparisons are made between the two! Thank you for watching though 🤝

@danielduggin2898 Жыл бұрын

On xcode 14.2, color literal is not recognized for some reason, any suggestions?

@morelogankoshenka Жыл бұрын

I know … I miss it so much … there is a hacky way of initializing it differently and then just copying & pasting that as needed, let me try to find it

@morelogankoshenka Жыл бұрын

oh wow I think I just figured it out hahahah type #colorLiteral ... that worked for me ... thank you for this comment!!!

@andrejkling3886 3 жыл бұрын

Good corner of the view...

@DEERAF2k 3 жыл бұрын

Would this be possible with programmatic UI?

@morelogankoshenka 3 жыл бұрын

Yes - while it would definitely be more code and a little tedious, I don’t see why not.

@myga77 3 жыл бұрын

you're good at this bro, keep going ur new fan from russia😄

@morelogankoshenka 3 жыл бұрын

thanks so much!

@jxzn 2 жыл бұрын

is colorLiteral broken on XCode 13?!?!

@morelogankoshenka 2 жыл бұрын

yes I’m furious about it!!!

@benecc 2 жыл бұрын

There is much simpler solution nowadays, just use color .ultraThinMaterial as a background and it will blur what's behind and be a bit transparent by itself while being coherent with system light / dark theme, result is real good by default

@morelogankoshenka 2 жыл бұрын

haha that’s what I did in part 2 😄 definitely easier and looks better imo

@benecc 2 жыл бұрын

@@morelogankoshenka oh my bad didn’t see this part

@morelogankoshenka 2 жыл бұрын

no worries! but yes I made this video before the material backgrounds were available! this was sort of my workaround

@jibo9996 Жыл бұрын

Can you apply this to text views?

@morelogankoshenka Жыл бұрын

yes! replied to your DM 😁

@jibo9996 Жыл бұрын

@@morelogankoshenka Thank you 😀

@KimbrellBrad 2 жыл бұрын

I did not like this ... I loved it! Very cool and really appreciate your style of playfulness LOL. I enjoy most of SwiftUI coding and this is really inspiring!

@morelogankoshenka 2 жыл бұрын

Haha thanks so much!