SwiftUI Livestream: Prototyping from Figma

good morning my name is mang i'm from design plus code today we're gonna switch up a little bit i'm gonna talk about with UI and this is especially for designers looking to prototype in swift you I and even build an entire a pants with UI if you choose to I think it's really really too good to be missed it's one of the best things I've used in the past five years I would say next to figma next to amazing apps like sketch and I think I'm going to try to simplify the flow for you so that it's going to encourage you to work better with engineers to prototype using the same amount of efforts as you would using any prototyping tools in the market right now such as you know framer or principal or things that really allow you to create micro interactions and yes we will be starting from scratch well to some extent I'm not saying like we're gonna design the UI from scratch but definitely the Swift UI part is going to be from scratch so let's get started you know let's say you have a web design or UI design this is your figma file so you kind of want to create a page so that you sort of like focus on the interaction itself and usually when it comes to prototyping you want to focus with on a bunch of micro interactions and there's a bunch of gestures that you want to use such as hover States press States you know on tap drag and all of these things to make your design far more interesting but also to be able to accommodate when comes the development right so when you talk to developer how are you gonna explain to them how do you want this concept to be realized so that's why we're gonna get started on a very simple basis so this is the app and it's a very super simple design I'm on purpose to be extremely simple we only have two cards here we have one title and then we for each card there's gonna be like a peeking underneath so I kind of wanted to go with the sort of book concept and we're gonna move into like the animation so it's going to animate a little bit I'm not sure why my performance is not great right now hopefully it's now going to improve influence too much but you know we want to be able to scroll and then we want to be able to peek into the second layer so that's kind of essentially our setup and this should take maybe 5-10 minutes to do from scratch if you know what to do of course and the way that we implement in Swift you I in iOS is that we're gonna use either PNG which most designers know if you're working for Android is going to be SVG if you want to go vector but for iOS it's going to be PDF now PDF is in my opinion better at keeping the integrity of the entire image versus SVG you're gonna have a lot of issues when you export the whole thing to SVG but of course you can also use PNG which is totally fine but what we're gonna do right now is we're gonna look into sort of like just like bring the image and then allow ourselves to prototype the interaction we're not gonna do the layout yet but we're gonna do a little bit of that but I don't want to focus this stream on creating the layout because I think it's it's very easy to do if you have done CSS if you have done C HTML you're gonna find yourself right at ease but you know just to speed things up I want to keep this under one hour especially the main content is going to be roughly 30 minutes so that you know I don't bore you guys too much I know my last streams were a bit long so this card I'm going to export this to PDF and if you do in PNG you might want to sort of you might want to do that not sure why it's okay we have the preview here if you're doing PNG you might want to have 1x 2x and 3x but that's more like if you're implementing the real app for prototyping purposes you can essentially do at 3x right away so that you have the sharpness or 1x if you don't really care about the sharpness but otherwise what I can suggest is just go directly to to PDF and believe it or not it's going to keep the integrated integrity of the entire layout here that you see including the texts including the icons the images versus SVG is going to have a lot of trouble with that okay so I have this and I'm going to export this to let's say downloads and let's do the second card but when you do export make sure that it's visible in your frame so I'm gonna do the same here not sure why it's lagging right now I have a lot of stuff running I also have sidecar which is using my iPad as a third screen because like streaming requires a lot of multitasking which is really really overwhelming especially for someone who's only starting to stream just two weeks ago so this is my second card I just exported it and the third thing that I'm going to export is the background card so I'm gonna hide this and click on content and then I'm going to export this and boom we have three files so far and we're ready to start prototyping the three files is are gonna be here write it in downloads and let me open the finder you're gonna find these three files here I'm just gonna I don't want to show you all the files that I have some of them is like about kids stuff yes so here we have three files and we're ready to open Xcode so I'm gonna go to Xcode I'm gonna create a new project single view app and let's do a peek scroll scrolling and yeah you know use with UI for those who want to get more into the details I have a course by the way about us with UI is like a sixty videos course it's very comprehensive it's gonna take you all the way to the App Store and yeah it's on design code that IO / with UI so this is if you really enjoy like what you're seeing today and you want to explore more like between the steps go at your pace you should do that a lot of people manage to create their own app as a result of the course which is really exciting for me so now I'm going to create a project and the way I see Xcode is sort of like Photoshop you know it does every single thing you know it's gonna do unit testing it's gonna do like storyboard it's gonna do su Qi it's gonna do to allow you to use all the technologies with iOS which is great you know like the gyroscope or at the camera or its you're gonna create a Mac app using Xcode you're gonna create an Apple watch app an Apple TV app using Swift UI as well so it's overwhelming for someone who's never used it before and what I can suggest you is sort of like just focus on Swift UI first because Swift UI itself is very simple compared to all the other options that we have out there for creating more micro interactions so the first thing I would do is that we don't need the inspector so we can definitely hide the inspector force with UI and here on the left side you're gonna see sort of like your documents and you know if you're just starting you don't really need this part at all because we're just gonna focus on a single screen and so we just focus on us with UI now before doing that though we have an in here and I want to import the assets so I'm gonna go to assets catalog and this is where I think a lot of designers can really help the flow working with developers or working on an iOS app is to sort of like instead of asking hey can you change the assets can you change the colors can you change the you know you can create everything here you can create colors you can set up your app icon you can bring your your assets which is exactly what we're gonna do here so I'm gonna drag and drop the PDF and boom that's it that's all I need it okay so I'm gonna go back to content view which is the main screen for Swift UI and then I'm going to resume and this is where we have our app yes yeah Xcode does everything it's like there's the 3d games 2d games does insane amount of stuff the first time you're gonna run Xcode especially the preview of Swift UI it's gonna take a bit of time so please be patient I'm you know after that it should be a lot faster but also my system is is running slow right now so hopefully it's not going to in influence this stream too much you know you can see like even figma I I can barely move stuff around this hasn't happened before by the way I'm not sure why maybe I have some stuff that is very heavy hmm okay at least with UI works so this is my screen and the first thing I want to do is the title so what I'm gonna do here is I'm gonna put courses and boom you know you have all the previews it happens all in real time and what we're gonna do is we're going to customize the elements so the text is the most basic thing for designers out there the difference between su Qi and CSS in term of layout is that first of all we're going straight to Stax imagine you're doing CSS and you're going straight to flexbox second of all the alignment is different in CSS you start from the top left and you start with a container so as a result you're kind of forced to to set fix with fix height for the containers and and so on but with UI you start at a center which means that it's adaptive by default this layout here is gonna look amazing on the iPhone it's going to look amazing on the iPad because the layout is centered by default it's going to look also great on the Apple watch so I think that's the thinking it's like reinventing CSS for 2020 and I think that's really exciting so that's the second thing that I want to explain is modifiers modifiers is kind of like the CSS properties so the problem with CSS is that when you when you style a layout you sort of have to separate the layout from the main containers right like let's say you create a div and then you create another CSS file and then you have to serve it to two you have to go back and forth a lot in Swift UI you don't have to do that at all everything happens right in front of you so what I mean by that first of all let's set the font so I'm gonna do that font boom it's going to be dot large title boom this is my large title in iOS I don't I don't even need to think about the font size right and if I want to set it bold that bold boom my font is bold and this is going to work across all platforms I don't need to do anything else I didn't need to you know about add a bunch of positioning like CSS I didn't need to do you know like position absolute relative or stuff like that I'm going straight to stacks so you might be asking well how do I put this on the top left well we're gonna we there are there multiple ways to do it there's a spacer way but first of all we're gonna need a container right this is our main content and we're gonna sort of like wrap this inside a stack and this is the equivalent of grouping in figma so imagine you have an element in figma and then you're gonna start grouping it and that's that's going to create your stack and at the end of the day your goal should be to be able to use some sort of like auto layout as they call it in figma but in in since with you I would call it stacks so the end result as you edit as you add more rows and columns your layout is going to adapt right because you're essentially just setting the spacing between the elements so for example this content here has a spacing of 20 between each row so I can set 30 I can set 100 and that's kind of the concept of stacks so we're gonna use exactly that concept in Swift UI now I'm gonna go and here I'm going to put this inside a stack so I'm gonna group it the way you do it into if you eye you're gonna command click on the text and then you can embed in H stack or V stack vertical horizontal right so I'm gonna do in V stack and this tag is definitely more commonly used in H stack just like because you know we work a lot with vertical content especially on the iPhone so if I want to set it to the top then I can create a spacer like this and that's one technique the spacer is like saying hey I want to use all available space on the screen and this is also very adaptive because it's going to ensure that this is within the screen bounds right if I do this it's gonna work perfectly on Apple watch also on the iPad because it's adaptive just like CSS now the second thing I can do is use the concept of frame as a modifier so for example hey mang how do i set the text to the left right I could I could save simply put this into an H tag and instead a spacer but I can't I can also do that frame okay and that frame is gonna allow me to set either a fixed width or a adaptive width and which is called max width and here I'm gonna use dot infinity infinity it's like saying the maximum possible just like a spacer and within the frame I can use alignment and alignment using Auto completion by the way for designers out there who are getting started in Swift you I use auto completion all the time please this is the best way to not make me say it's because coding is difficult not because it's it's very hard it's difficult because it's unforgiving okay if you make a single mistake in the way you type something it's going to crash your app and so as a result coding languages have become more and more modern meaning that you are not you it's very very difficult nowadays to make these sort of mistakes and so you can see here you have all of these options available from the auto completion so here I can say okay I want to align to leading and leading is kind of like with UI or Swift to say to the left okay and and that's it so I have my stack which is my container I push using a spacer and then for pushing to the left I'm using a frame because the frame is like saying okay my bounds for the text is going to take a a maximum width of the screen and then within that maximum width I'm going to align it to the left right simple enough the second thing we can do now is to use padding so I'm going to set this with a bit of padding because for developers out there make sure you always have padding so I'm gonna do dot padding boom I have my padding and I didn't even have to say a default value here that is interesting because su Qi tries to make these steps as as short as possible and what I'm gonna do here is I can sort of like set a specific padding for example of 40 or 20 but if I don't set any number is going to be 16 by default and 16 is the most recommended padding on iOS or Android it's using the four point grid or the eight point grid which is great right and so here I have padding what I'm gonna do is I'm going to set it to only from left and right so it's going to be dot horizontal comma and I'm gonna set it to let's say 30 and that's it I have my title now let's go to the next thing and like I said I don't want to go too deep into the layout if you want to learn that I have a course for it but I'm gonna go straight into the prototyping so now I'm going to bring an image so the PDF that we just imported so all you need to do image and you can set the name of the image or by the way I forgot to tell you you have also a plus so this is called the insert menu and it's kind of like sketching figma you can insert your element you have all of these things such as a button that they picker the form the list and like they're amazing and all of these controls adapts to the platform this is not some react native stuff okay this is not like hey let's use the same element for every single platform even though it doesn't look it shouldn't look the same this is like saying okay well the picker is gonna look very different from from an apple watch to the iOS to the iPad to the Mac App right without changing any code so if you eye is going to do all of the work for you and that's kind of like the beauty made by Apple a lot of people complain that okay well sue I doesn't really work for Android true but do you really need to make an I on the Android app especially if it's your first app you like you know if I one of the things that people kind of like mistakenly thing that they always need to cover every single platform at once but at the same time it requires way more efforts to do that and you're gonna have to create more conditions you don't have to sort of like you know suffer from a user experience perspective as well and what I would like to do and the philosophy for fui is different in the sense that Swift UI is going to use the same sort of like techniques the same components and the same controls and it's going to do the heavy lifting for for adapting for you to different platforms and to me is as cross-platform answers can get because it covers all the four main platforms on iOS so we have mac i you know iPhone iPad Apple watch Apple TV and so I think that's that's the definition of cross-platform for me and I hope that a WDC they're gonna bring like maybe for web maybe for Android who knows but I think this is the biggest effort from Apple to create a plus a cross-platform coding language so what we're gonna do here we're gonna do image so we can go directly to image and it's just gonna show me okay these are all the images in my library and I'm gonna bring let's say card one that's it so I have my card one and it's simply using the name but another thing that you can do if you want to make it more easy to to change to modify you can use what we call image literal so in order to do that you're gonna have to do UI image and then you're gonna have to autocomplete color literal I'm not sure why it's not oh no not Kali literal sorry image little I'm like in a cloud right now here I'm going to simply double click on here and I can select and quickly switch between the different assets and this is useful for making your prototype more more flexible in the long run so that's it now the next thing we're gonna do here is to to set two stacks the two cards one on the top and one on the bottom so the way that you do it so right now we have V stack we have H stack it's going to sort of like do it in a in a two dimensional way but what if you want to put one on top of another right so you know in CSS you would have to use position:absolute position:relative and it's really difficult to be honest and in figma you you can't do that but you have to kind of group things around and you have to drag things around there's no automatic way to do it and it's not gonna allow you to edit content and it automatically is going to magically align things properly but in Swift you IDE can and that's the beauty of it so first of all I can do command click on image and I can there's no embedding z-stack but I can do in V stack first and all I need to do is just add Z instead of H or V right so now I have Z stack instead of fie stack and suddenly I can just copy and paste the second image boom I have two image on top of another if I set it to the second image you can see one is on top of the other one and again it's just centering one against the other so here I'm going to to put the second card at the bottom so let me just move this before and now you cannot see it but it's there but I mean you can you can sort of see it here so that's how you you stack up elements on top of another and another thing you can do if you want to move the card a little bit you can use the offset so for example I can sort of like do dot offset and I can move using the exposition to let's say 100 so now my my bottom card is going to move by 100 to the right right this is simple enough let's separate the two images and now what if we want to change the whole background we don't want to use white well let's do that so one thing I want to show you this is this kind of like a trick that I've been using in switch UI is when you have a background you you should separate that using a Z stack so the first thing I'm gonna do is I'm gonna embed everything in a in a z-stack first and I'm gonna put that into a Z stack and so underneath the content you can see from the right the bounce using the blue is what is the layout okay and what I'm gonna do is I'm going to bring a color and instead of just using you know a color here I can say sort of say okay dot red right now it's gonna give me red but if I want if I'm a designer and I want to pick something that looks much better than this super bright red I can use color and then Kali literal and here I can double click here and I can just select one of the better colors okay so this is great what if I want to use a a color hex color code from figma so I can go to other and it's gonna go to my color picker on a Mac and here if you go to the different tabs you can go to the second one which is the RGB sliders and the RGB sliders is gonna allow you to get the color using the hex code so now what I can do is I'm gonna go to figma and let's say I have a specific background I'm gonna click on the background copy the X hex code and go back to Xcode and boom voila I have my off-white color in a background next what if I want to set it beyond the safe area because nowadays we have to accommodate what we call the knotch and the home indicator which is what we have at the top and at the bottom this is kind of the the status bar space and this is the the home space so that you can swipe from the bottom it's kind of like an indicator that users can swipe from the bottom well what you can do here and this is why we're using AZ stack it's because I don't want to use the the what we call edge ignoring safe area on the main content because it can really change your the way that you set up the spacing and the frames and all that stuff and I want to keep my content here as unchanged as possible okay so this is my background the Z stack is serving as sort of putting the background underneath the main content but most often than not you're not gonna really use this but for prototyping I think it's quite important I know a lot of designers want to know how they can set a custom background this is how you would do it so next what we're gonna do here is we're going to start to learn Nations I think that's the exciting part right like if you look at figma you want to do animations you're very restricted to the timing of the animation you're very restricted in in this sort of like flow of the animations you cannot do gestures you cannot do all of the other things that code can do okay and so what we're gonna do here is we're gonna set States for those who have used react before this should be right at home with the way that's with you I use States but I would say it's even simpler so I'm gonna set an animation state and it has to be a state VAR show is equal to false by default so my animation is gonna use a boolean that says not animate it right now okay the second thing I want to do here and by the way whenever you set a new variable you're gonna have to resume your preview but that's the only part if you said if you make changes to your layout here it's not gonna need you to resume so I'm just want to make sure that I'm showing the right things so here the other thing I wanted to show you before moving on to animation which is really really interesting is that figma has a plug-in about with UI it's called you know if you go to community if you go to plugins next to files you're gonna find something called it's with UI inspector so we can install this and once this is installed by the way the founder of switch your inspectors is right in the chat so if you have any question you can install this and this is going to allow you to get all of those colors without having to sort of like use the color literal and get the hex color code you can also set you know the the frame sizes and the gradients just like exporting CSS code from figma but this is force with UI so let me a small demo so for example I have my card here and I'm going to select my card and here I it has a bunch of properties such as the field gradient it also has a drop shadow okay and we're gonna use that drop shadow but I just wanted to show you so I'm going to do command /to search the commands in my plugins I'm going to type Swift UI to bring this with you I inspector and here the Swift ey inspector gives me the option to get the code for the colors for the gradients and so on so for example I'm really interested to get this gradient or the entire shape what if I want to have the entire code for my shape right here it has a width of 315 a height of 400 it has drop shadow it has a gradient property so I'm gonna click here it's going copy the code and then now I can go to Swift you I and then let's say I don't want to use these cards from a PDF file I can just comment this and then boom it's gonna create my layer of you know of the the background of the card okay and it has the frame it has a feel which is using a linear gradient it has the shadow which use all of the the great you know color codes and all that stuff you don't need to translate any of that stuff the radius and yeah for gradient for those people who are familiar with CSS gradient is difficult which is why most designers would definitely use the code from Sigma to get the gradient CSS code because it's it's usually very complex so this is a great tool for allowing you to get some of these color codes some of these frames in this case this is a rounded rectangle using a corner radius of 30 and then I'm just gonna get the shadow property and I'm gonna cut it you can see by cutting it it's just removing from this rounded rectangle and so I'm gonna use that let me just uncomment this first and I'm gonna put that drop shadow right here now I have my beautiful drop shadow on my image and this is another great thing about modifiers is that you can just move them around really quickly reusable to the maximum okay I can also do the same thing for my image and now both my layers so I have my image here in the background my image in the in the foreground and both of them are using a shadow property right this is fantastic so yeah that's what I want to show you design tools are you know they have been true enough to bring CSS code some of them can bring you know not just SVG code but also you know if you go to code here there's CSS code so this is how you would do it in CSS very very similar in terms of amount of code for Swift but this would includes also the shape but we're not using smoothly using smooth UI so I would say it's much easier so we can see you can compare the the swift code versus the swift UI code it's a lot shorter it's a lot more expressive and it's it's a lot easier to scan as well so we have Android I'm not familiar with Android but this is a fantastic look into how you can export the code from figma directly so now back to Xcode let's get into any animation now so I have my shadow I'm happy as a designer I have my rounded corners and so this makes me happy I'm gonna I'm setting my state the state is called show and by default it's not animated now I'm gonna set my my gesture so we have a bunch of gestures and here I'm gonna set it to the whole stack so regardless if I'm clicking on the front card or the back card I want to be able to click and then some thing is going to be animated so right after the z-stack by the way you can double-click on the court curly braces to get to the end of the curly braces for those people who are lost in super long curly braces so you can double click on on these to see quickly at which point it's going to end and this is going to allow you to easily add modifiers so here double click on this tag and now I can add a modifier for the gesture so I'm gonna do untap gesture and what I'm gonna do when they use this tab I'm going to change from true to false okay so I'm just to say hey click this start animating please that's up so I'm gonna do self dot show since you are inside a a function you're gonna have to use self to to specifically say this variable at the root level but this is not needed if you're not inside a function but only when but anyways so if you eye does a very good job at telling you when you make these mistakes it has these errors in real time so let's say I just click show because that's the name of my variable I'm going to do toggle toggle is going to allow me to every time I click is going to switch automatically between true and false okay so now it tells it tells me hey what what are you referencing to are you referencing to something inside the function or I you referencing to something at the root level right because you can create another variable called show from here and that's why su Qi needs to be more specific so I can say ok well it's giving me the fix for it I click fix boom there you go I'm happy I'm on my way to create my animation so this is very useful when you're coding to get these errors in real time okay so I'm tapping it's changing my animation and now that's that's where we're starting the fun so I can do anything I want here ok so I can say whole let's say this is my front I want to move to the left side so I can just do offset I'm going to use exposition and then I can say okay by default is zero right but I can move it like 100 it's gonna move to the right or minus 100 it's gonna move to the left but I want to only do this when my animation is set to true so what I'm gonna do here I'm gonna do I'm gonna do show question mark okay so this is like saying is it animating if yes set the positioning of the X to minus 100 and then I'm gonna use column and then I'm gonna set the otherwise so the else this is kind of like an if statement so otherwise set it to zero that's it now we can now it's going to do the interaction for me but as soon as you start using interactions in swifty Y this is where you're gonna need to to play okay so I'm gonna click on play and it's got its its building right now so when you're when you're building your animation it's going to start the preview but it might takes a bit of time because it's essentially building the entire app you know like it's like the iOS simulator but right in Xcode and here click go left and right because this is a toggle right when I click here it toggles to the left to the right using the exposition but what if I want to have it animate it well let's do that and this is where we have a lot of fun so I can say okay animation and I can use easy and out or is ease out which is the most popular one voila see we have an animation going on isn't that amazing that's it you know at this point you have enough as a designer to prototype krei the ideas okay and you can use the properties you can set okay well I want the shadow to move you know like I can say show to 100 otherwise set to 20 and now suddenly the shadow becomes huge afterwards you know like you can you can animate any of these properties that you can see here you can animate the color you can animate the radius you know let's let's animate I don't know the radius well maybe not well yeah yeah I can animate the radius so show 100 otherwise 40 so you can see you cannot really see well but let me just make a crazy color now you can see how the shadow is moving see this is insane I didn't need to do much as a designer you know you can play with all of these things it's right in front of you you don't need to move back and forth between the CS file and the CSS file and then the JavaScript and then the react you know like you don't need to mix and match everything happens here in real time in front of you and you can just play with it and what about animation timing I can just say well ok let's use spring okay there's the default spring if you want to so you know you don't see a lot so the thing about spring is that it has a velocity so the more that you move the more that it's going to change the the springiness so what I can do is that I can set okay I want to move the exposition to minus 300 and now you're gonna see there's a bigger spring going on even though they are very conservative here but if I want to have a bigger screen its spring against its spring and now I can set with more of these values so we have a damping fraction a response time and so I can set one of my favorite values is about 0.6 0.6 and 0 so 0.6 0.6 0 and boom you have this amazing spring value that you see oftentimes in i OS okay so you don't see the scroll okay my face in the front is in front of us sorry about that okay um let's see okay thank you for the feedback all right I'll make sure to look at at the screen while I'm doing this so that my face is not a focus all right but I will share the code with you guys and you're gonna be able to sort of like analyze what I've been doing since step one and so yeah you can see you know using my animation here I was able to do that I'm just gonna put back my my drop shadow let's say I want to put it to purple and there's another trick that I love to use is is using a modifier on top of the color and set it to 0.3 how crazy is that like this is this blows my mind I can essentially code this color to be dynamic and just change the opacity right after so this this call this drop shadow is suddenly contextual right and you can create a script that detects the median color of this image and then you can sort of like you know do crazy stuff really like I'm so in love with with UI so this is what I have so far and this is not restricted to a single element I can do it on another element at the same time so I can say okay well while this card is moving to the left I want to do some crazy 3d animation on the background card so I'm gonna start do a rotation 3d and I'm gonna set the angle using a degree of let's say 30 and I can change the axes of my 3d animation so I can say oh well I wanna you know play with the X and the other one is going to be zero so right now you don't really see it well but that's because let me just do move this around a little bit but you can see as I'm as I'm playing with this you know I'm playing with the AXI of my 3d transform so I can say well let's say I want to use the x value instead so now I have this really nice 3d transformation going on and let's say I want to have a sharper or less sharp angle right you can play as much as you want but on top of that you can animate it and that's the beauty of it so let's say I want to by default to to not dwell to have a degree of 10 so let's say it's show question mark 10 or Y is zero so now it's not there's no transition going on but I can set the transition so I'm just gonna copy and paste this the same transition I can use easy easy out here and in animation spring here so I can sort of like pick and choose which one goes at which time and that's what most prototyping tools especially the quick ones cannot do right so you can see it it's even respecting the shadow the integrity of everything super simple stuff what else I can show you yes I want to show you how to delay animation because a lot of prototyping tools have trouble with timing the animation it's very complex it's either you have a timeline that is very very very hard to maintain or you have to create like a third artboard or fifth artboard to set the delay for you I'm gonna show you how to do this in Swift UI I just need to do I just need my type so the type is animation and because I have a type this is essentially a modifier okay and the modifier it's going to allow me to set by the way I don't know if my connection is bad but let me know if it's bugging right now so my modifier it's setting to delay and I can set to zero point three second what this means is that it's going to wait zero point three second before animating this now let's just remove this first and now right so you can see that this first card moves first and then the second moves after zero point three seconds so by doing this you can set you know a normal delay would be zero point one so now write it like it's it's waiting a little bit and you know let let's have fun let's add a rotation so rotation effect show I'm gonna set it to 10 otherwise zero yes you have to make sure that the ordering of your animation is it's done correctly so rotation has to be before hopefully this is why it's giving me an error now I do want to point out that so if you is by no means perfect it just like any tool there is no perfection but it's it's very very mature since last year so row so I'm just making sure that I'm using ah this is my mistake my mistake is my is my mistake it's not with you guys mistake so this is expecting an angle an angle this should be angle parenthesis and using a degree so using the degree I can set to ten for example so now it's going to rotate I was trying to blame on Sophie why just now but it was me so show question mark otherwise zero so now you can see that it's rotating at the same time pretty cool so now I'm gonna move my my background card to the left a little bit I'm gonna set the offset so right now it's set to 100 I'm going to set show question mark zero I'm gonna set it to minus 100 okay let me just fix the the degrees it should be the contrary so it should be zero otherwise 30 and this is where you're having fun as a designer right like you you're you're the master of those animations don't expect developers to create your animations for you they're gonna scratch their heads a lot it's you know it requires a lot of back-and-forth in terms of communication but on top of that there's no collaboration going on they don't have the input all they can do is sort of like try to figure out what is it the best way and oftentimes it doesn't fit into the final app the final production the final deadline and so oftentimes whatever you create in in a vacuum on another platform can never get translated into the real app right and so what I can suggest is go straight this with you I and therefore you will see that the your dream is going to be realized in the final app because you will be working together with your developer so that's the awesome part of this so what I'm gonna do here is I'm gonna move I'm Dee railing a little bit so all right so let's let's just do it until it feels right okay so when I'm showing it's going to be zero in terms of offset so that I can see the content but otherwise it's here and I'm gonna set this to 10 so that it does not show as sharp but this is the rotation effect okay all right maybe okay all right this is a lot better feels a lot better and for the offset when I'm showing I'm gonna set to minus 10 perhaps or 30 all right so this feels pretty good I can see some of the content maybe 20 really fast you can see the changes happen really fast and I can even move the card a little bit further so let's say - 330 all right so now it's looking pretty good right like the car is moving away and then how and now I can see the content and so yeah I was going to show you guys more but it seems that we are already almost at the one hour so I'm gonna keep the next one for the next livestream what I wanted to show you on the next livestream is how you can scroll and then using the scroll position you can sort of like create a a really cool peak scrolling effect and so I'm gonna keep that for the next livestream hopefully this is enough for you to play around with a tap gesture if you want to learn a lot more way more I mean we we have a full course on this the the final result is it's really really cool and you're gonna learn all the way with API calls firebase login all the animation techniques you know like have fun with it it's just it's amazing it allows you to create your own app it allows you to collaborate better and so you know have fun with it what I'm gonna do now is is answer some questions and then we and the stream so first of all someone is asking why am i using static static value because I want to show designers how to prototype quickly and if you get into like the general reader stuff and adaptive values you can do it it's very easy but you know my my purpose today was just to get you introduced to some of the things that you're already familiar with and you can just start being dangerous as a designer or as a developer getting into animations UI and all that stuff next I'm going to answer more questions one person way I was asking about sketch versus figma what should they use what I would say is that figma this year is insanely good okay last year I would be hesitant to say if one is better than the other but I would say this year figma has the upper hand not only do they have amazing collaboration which means is is very very useful for collaborating with designers developers stakeholders you can you're gonna see multiple editors changing at the same time but also the maturity of the tool is just amazing so you can do like a crazy layout stuff right now I don't know my why my figma is is very slow but you can see that here I can essentially add another column using auto layout and it just does all of that for me it has really great plugins such as the Swift UI inspector you know I'm gonna show you some of the if you want to learn more about 7s stuff I have a live stream of a UI design what else is great so plugins the animation is there so it does create animation fairly easily and not to the point of swith UI but definitely to the point of like creating a flow and creating some some basic transitions between two Art boards but if you do more use more than three to our boards it's going to become very complex which is why I will recommend using su UI instead or or framer or any of these tools especially if you framer is great for the web in my opinion but with UI is great for you know if you're doing mobile design for example what else well you know it's just a pleasure to use you know like and the community is great support is great exists in the web yeah you know you can use it for free as an individual as long as you are not inside of a team you can use figma for free so yeah those are some of the things that are on top of my head so let's see if I can find some more some more questions all right I think that's basically it well thank you for tuning in and hopefully this goes well and you guys appreciate this stream if it does then I will continue and we're gonna look into the gestures the drag gesture we're gonna look into the scrolling the geometry reader how to make it more adaptive and all of those exciting stuff that you can only do in code so I'll see you in the next one bye bye you

Channel: DesignCode

Views: 32,163

Keywords: SwiftUI, Figma design, Figma plugin, SwiftUI inspector, PDF, Export assets, Prototyping

Id: mzJsd_e1JP4

Length: 56min 40sec (3400 seconds)

Published: Sat May 23 2020