How to create futuristic interfaces in figma [Tutorial]

hey and welcome to this tutorial many of you have asked me on instagram and twitter to do something like this to talk about my process behind the designs and yeah i spent some time and here we are today we talk about how to create futuristic interfaces in figma or at least how i create them so for the people who don't know me i'm sebastian i'm an interface designer from germany living in tokyo and i'm also known as kalhauser on social media where i upload these things i do this just in my free time yeah besides my regular job and i just do it for fun because i love to design so today i will walk you through the whole process of how to create these futuristic interfaces i will talk about topography i will talk about shapes and so on but therefore i created a small agenda so it's a little bit structured and we start first with shapes and then we start with images then we talk about details this is this is about elements and patterns then we talk about typography and research so these are all elements that are in these designs and yeah just keep the intro short somehow and let's let's do it all right let's talk about the basic shapes so here are three examples a square a circle and a triangle choose whatever you like this is just to explain of how to start on an empty artboard frame or canvas so i defined five steps for that choosing the shape first then cutting or adding parts then round the whole shape a bit and then stacking layers on top or you can also put layers behind it and at the end we will put the interface on top and so on and step four by the way we had also imagery but to make it very abstract and as i said this is just a build explanation but not how it works in reality because as we all know when you design something you always jump back and forth and then you say ah no i don't want to have this font and i changed this color and so on and so on so we're going to start now with just the arc tool so because we want to cut our pieces out of our base shape so if you hover the circle over the circle here you see this tiny dot on the right side when you drag this around you already use the arc tool and then you cut out slices and while you're doing this two new dots get generated here and these two dots are for changing the inner radius so the center point here and the other one is for changing the angle you can also tweak these numbers on the right side in the layer panel here and the first one is for changing the angle the other one is for closing or opening the circle and the other one is then for the inner radius and this is also possible with the stroke here and you can do the just the same with also with the filled shape and this is what we use for cutting out the parts of our base shape and also for the interface elements later so to start with something i've already prepared a circle for us and we could use the pen tool for cutting out pieces there but this would be very kind time consuming i can quickly show this because it looks like this then you need to find the right bend here so like this and then close this and then give it a fill and then we can cut it out and it looks weird and then we need to fix it here so the anchor point like this damn and then like this so it's very time consuming and you can't easily move it around so what i do is then backpack back and then what i do is using this shape and duplicating this and creating or make it slightly bigger and create a tiny arc here so hover over it open up the circle create an arc and then select both elements and cut one out of each other make sure that the arc is on top of the circle otherwise you cut out the other piece so i can quickly show this and so otherwise you cut this out of each other so make sure that the arc is always on top of the circle and what you do then or what what the cool part about this is that it's not baked yet so you can still move these elements around so you can just press or hold command or alt and then click on the element because this is how you reach an element inside a folder because this acts like a folder and what you do then is duplicate this element and move it around be careful because when you duplicate the same sized element it can generate these fragments these arrows here so make it slightly bigger or smaller so you get rid of them and then cut as many slices in there as you like so we can draw like this and make it even bigger and the cool part is that you're very flexible of changing the overall structure here so and when you're happy with uh your your base shape so with your cuts and everything we jump to the next step so these are my my slices i really like so i want to keep it like this because we don't want to move them now anymore we bake the whole shape that means we flatten the shape so you can make a right click or you press command e or alt e to uh to flatten the shape so i use the shortcut and when you press enter now you see that you can move the anchor points now before that you can't because yeah it was it was something like a folder so what we do now is placing next to each corner point a dot like there and there and there and if you want to get rid of this line here just press escape and then it disappears so what i want to show you here now quickly is that we use this corner point and move it into here so make sure that the the handles are not flying around because otherwise you get these tiny drops here and move them into this thing so everything get merged and what we want to generate is now this open space here so it's does not feel like you cut it out with your scissor and uh it feels a little bit more dynamic and i've already prepared something here and i moved all the the corner points into each other so like this like this like this and now you round the oval shape so you go to the right panel and then you start rounding this not too much and not not too less so just something i do often something around yeah six five six or um eight something around this and be careful um because now we see this here that there's no radius and this is because the handle is not in this point so when you do this it generates the radius for you and the next step is to create more layers to put more layers on top and duplicate this for example give it another color to make it very simple move it around and put it like this make sure that's in the center and so on so just repeat this these steps here and when you're done with that you should have something like this and there you have your different layers and what i did here also in in the background is to have a border so uh something like like a um like a frame or however you want to call it this uh so it's it's just an outline so what i did how i created this is just duplicate this shape and give it a stroke instead of a fill and then you press enter and then you select these points and delete them and then you make it just a little bit smaller you can also turn it around and then find the right spot where you want to place it so very very easy and this is how you create the basic shapes it's very simple and the next step would be then how we add images to it so yeah let's jump to the next step you can find images everywhere in the internet but be careful ask the photographer first if you are not sure if you're allowed to use these photos because this can cause some problems and the best way to avoid these problems is to use something like unsplash and yeah download the pictures from there because they are free to use for every kind of stuff and they have thousands of images and here's three accounts i really like so shout out to these accounts it's always good to say where you got these images from when you use them even if they are free it's cool to to respect the the owner or the photographer so um there's us um curioso and nasa i think i spelled them right yeah more than 50 of them but uh you can you can uh also go to the main page of nasa for example or either and they have ridiculous high resolution images of the moon of any kind of uh planet surface it's it's crazy so you can also go to these websites but back to the interface so let us find a good image and try a few to get a feeling for them i should also maybe add another layer on top because i want to have a zoomed one because yeah because it it feels too big for in my taste to have too much going on here so i make a big circle here in the middle and yeah do something like this more like here and this would be something like a zoomed lens so you zoom into the surface and we can use whatever you like here so but i already prepared something but to use this i already i always do this and create a style from one image and call it one and then i select both layers and choose the style here and add it to them and then i detach the style to change the overall size of the image but i already have one image that i won't want to use and this is this one but in my case it was too mad so i use photoshop to have more saturation to make it more alien typish and yeah so you can also do this in figma if you like so you can tweak the little things here on the right side when you click on the image layer and then you change the contrast and saturation temperature whatever you want it like so um but for me i want to change also the the sharpness and some other other stuff so yeah i did it in photoshop but it shouldn't be a problem to just do it also in figma or yeah you can use definitely a lot of tools out there sorry so what we do then is selecting these things and first we create a style out of this three maybe and then we add these to our layers something like this and what we're gonna do is then detach the style here and make a double click while holding alt on your keyboard or you can select this and say crop so both ways are fine so you jump directly in there and then you zoom a bit in because this lens has found something or searching for something and then you make it a little bit bigger and this one we do the same here so something like this and to bring more depth into this interface i love to add shadows to the layers so just let us assume the sun is shining from the top right so the shadow goes to the bottom left so what we do is then add an effect drop shadow and doing something like this and moving it like this and blur so we make it extremely dark something in that way perfect so i'll make a big something yeah something like this the thing here is that we don't have that we have a black background so what we do is duplicating this layer and blurring the whole layer so we have some kind of a shine that is under this layer so what we do then is instead of drop shadow we say layer blur and then we push it to the limit make it a bit smaller and move it around and then we give it press three or 4 and find the best yeah best amount of transparency that it does not look weird so something like this should be fine and what we also should do is making the layers a bit darker because later when we put the interface it's it's maybe white we put on there we want to see it so we want to have a little bit of contrast so we put a black layer on top and make it slightly something something like this and the other one or maybe a little bit less something like this and the other one too so adding another layer solid one with black something like this and because the sun is coming from the top right side we can also add a small shine here so this white gradient then we add this to the top right something like this and make it uh we can make it to 20 20 30 percentage um transparency and the other one here too make it like this and then we add also a border what it would be nice to have some kind of display feeling so we add a stroke here and make it slightly bigger and give it a transparency of 10 or yeah something something really dense so because this is very important always when you create something like this every detail is important because it generates the overall experience at the end that sounds weird in some way but it yeah so it depends on the details here so this is all about images by the way so we can directly jump into details and filling this with a lot of stuff so we can also i will later add a shadow here um but for now i no i don't we don't need to so this is all about images and yeah we see each other back in the details okay this is the part where you can go crazy we can do a lot with the arc tool as you see here we can create dashed and dot lines bars arranging a circle we can also create patterns while using the arc tool as a mask and these are just some use cases so these are all this is all the arc tool so you can tweak the numbers and try to find new ways to arrange the the arcs and um to create new interface elements with that so i think this is also a good point to talk about a little bit of why i do this and what i imagine all the time when i when i'm creating these stuff because i want to give you some kind of inspiration and what you should um think about while you're creating these or you don't need to but it's kind of helpful so think about you flying a spaceship through the universe and you try to explore new planets that needs to be visualized somehow but the system in the futures are so powerful and intelligent that you should not interact with the uis in total so it's more that the system shows you what it's doing right now and you can intervene if it's necessary so these uis should fly in the cockpit and can also be disassembled if you want to so you can move them around and all the rings and bars are calculations and measurements of received planet data so numbers bars charts sliders lotus all of them are needed to represent the system's brain so just imagine it as a massively intelligent lens that you have here and with that in mind we can start designing the hell out of this thing because i would want to definitely start now and i would like to to show you how i create this so first i always focus on the center part and then i walk slowly outside a good inspiration by the way is also to take a look at jet head up display so from jet pilots and they are just beautiful and this can help to find new elements that you can use in your design and i give you now a small overview of what i do because i want to speed up this part a bit and that you get just a feeling of what i what i uh of how i start here so what i do often is having an interface um so having an interface in the center and then go uh not having an interface but having some elements in the center and then going outside as i said so what i want to have is some kind of a focus point so what i do is in the center i create this tiny dot so this is i want to create some kind of a crosshair not to shoot someone but to focus on something and then we create this and from there on i just copy this and this could create a whole layer mess so yeah it's kind of kind of hard to avoid this mess of layers um but if you are um yeah no no no not a chaotic person like me you you can definitely avoid this i guess so what we're doing here is now creating some kind of this this crosshair of um yeah or is it it's a bar a horizontal bar of um that that it's aligned to something and a measure measures stuff and then we create a another circle here it's kind of kind of hard to explain because um the small story i told you before explains it very easily what i what i do here so it's all about that you show that this system is running like hell and that it's calculating a lot of stuff there so what you do then is using effects like a background blur so you have this milky feeling and some something like this and then you can maybe also use the pen tool for doing something like this and making some some brackets so but not normal brackets we want to have brackets like this more in that way and then that way and then maybe we add some dots here so you have some kind of a scale like here duplicate them make them smaller because it's always very important to have these kind of tiny pieces because even if they are very small you notice them somehow as you might see here and this is um what is very important for designs like these the details so you have this this bracket and move it a little bit more outside like somewhere like here and then play around with transparency some something like this and maybe we put a bar here in front of this the cool part about this is very there are no rules there are really no roots just make it not completely unrealistic so it's that okay this is stupid to say but what i mean with this is um don't make totally random stuff so this is um for example this is uh something like a focus focus point that i that i create here or like like a um how you can say this it's more uh yeah it should feel that something it's a frame of something and this is how i create this and then just add more more and more circles here something like this then move them around and make them maybe a little bit smaller and what you can also do is make them really big so you fill a lot of space first and then you can break them down so what i always do is also move this around and then give it a stroke something like this and then make it more transparent this and then copy this again duplicating it and move these layers around and copy it again copy it again make it bigger so you have a lot of variations going on there and then you can also copy and paste again this thing and move it to the outside and when you move it completely to the outside by the way the arc tool it generates uh the stroke for you so now it directly turns into just the stroke like this and then you can tweak on the three dots the the dashed lines settings for example something like this and this make it to 0.4 and a bit smaller maybe not not round something more like this so this is how you how you start then with with these kind of things and then make this bigger or maybe like this and then then copy paste something like here so you have some kind of moving parts here these some kind of sliders and from there on you move outside more and more and more and more and because it takes so much time is because you you create a lot of elements and then you try to move them around and they should interact or play with each other so it's a good balance of everything and now i show you also because after that i want to speed it up a bit but i show you everything that's necessary here so how you create for example a pattern because i just draw it now here and how you create for example a pattern in there is very easy i make a folder out of this element here so command g and then select this and in this folder i just create these bars so just create something like this and duplicate a lot of them so something like this okay and then command e to bring them into one shape okay i missed one anyway that's not a big problem then bring this down and right click and say use mask and then move this one into the folder and turn it a little bit around like this and this is how you create patterns then so these these kind of cool futuristic shapes then you maybe reduce the amount of transparency a bit and this is how you create these patterns and then we can also um create some circles here so some charts they look like this and we make them a little bit more transparent like this so this is how you can play around with the actual uh all the time all the time and uh this is how you create every element here and it's it's just uh about how how you create how creative you use this uh actual you can also do something like this um when i go down here and make this a little bit smaller now it's a dashed line yeah i just make it empty now it's filled again if you have some kind of radio frequencies or sound waves or whatever you want to call them you can just make it round just turn on the turn the radius very high and then you can make group out of it and the inside duplicate this and fill this because we use this as a mask now um now it disappears and in this mask we draw some kind of these these waves so just close them and make like this and then we can duplicate these waves so we give this um like 30 percent of transparency then we flip them horizontally and we draw these these waves so um we this is how this is how we can create different elements in there so maybe we don't give it a border but a fill like this and then start creating elements inside this element because this makes it interesting even if they don't make that much sense it gives some kind of feeling that that it makes sense and you don't understand it because you don't understand the system that makes it interesting somehow and yeah this is how you create uh the specific elements on the interface and i hope it helps you when i now speed it up a bit and that i finalize the the elements here and after that we talk about typography a little bit more [Music] all right and here we are back again my computer said no and stopped the recording so i finished the design and yeah here we are i already played with some typography for example on the left side i want to have some kind of a recording on the bottom i want to have a pager on the top right i want to put the name of the planet so there are many many spots we can fill up with typography and this is what we discussed then in the next chapter [Music] great you reached the last chapter of this tutorial so here everything is about fonts and research typography and fill our design with content so three of these fonts are for free if you have a good connection to an agency or a friend in an agency or you're working at an agency maybe the rest is also for free and this also this opportunity to buy a pack from pangam pangam and that gives you all their typefaces for a few dollars but just for personal use so but this is this is kind of cool so um for this design today we just use inter so i just want to show you what a cool type is that we can use but today we use inter it's a free font it is beautiful very clean has many features and a lot of different faces with features i mean here when you click on the three dots on the right panel you can set up so many different things and you can also use some combinations of a line and this arrow here and when you combine them you get an arrow like this or you can make a double arrow like this so it's a very very very nice typeface so the other section is about research so we're talking about metrics and names and inspiration but i would like to skip this in some way i don't know to make it a little bit uh quicker because it can be very boring so metrics are i mean you need to find any data that you want to use so the mass of the planet the diameter the density gravity lengths of the day all the stuff you can find in the internet and then we'll paste links in the in this in the info box and i always recommend to watch movies when you want to get inspired for futuristic interfaces because there's also um there are a lot of agencies like territory studio they create beautiful interfaces and this is this is insane what they do and you can always look these at these um movies also marvel movies uh or just at the nasa website or is our website to get some inspiration or what what do you what you can use which words you can use which which data is maybe important to analyze a planet so there are then lists like this and uh you can go through uh use the numbers there but anyway i just want to mention this and so let us jump in to our design and then add some yeah some text so what we're going to do first is give it a name and i have all the time atlas in my mind so we create something like here um because i i decided this is the spot where my name name goes so we make a box that is some kind of 100 we made 110 something like this make it also black and oh not red black and then we make a few little bit round roundish corners make it slightly bigger a little bit longer and then we type our name inside using enter the font so and we use this and we make maybe the kerning a little bit less the font a little bit bigger something like this to give yeah to give some context here and then we give it the number one because it's the first tutorial and that's why we choose this number and it's maybe also the first planet we found here together and make it a little bit bigger and make it interesting to add some details here in the corner for example some kind of bracket it's kind of tricky for me to design while i'm talking and i try to find out the best way to doing this because i don't want to be a narrator of designing first and then talking over my design i don't know what is the best way to do it maybe someone has a tip for me or like a small hint that would be very nice so this is our beautiful name and then wha then we can talk about okay this is a class eight planet or whatever because in the future they they describe everything there's a lot of um stuff going on and they organize everything so this is a class eight planet here and then we make a little bit of spacing here maybe a little bit smaller and what is cool if we maybe create some kind of a qr code or a barcode and this is very simple if we do just random lines like this and make it bigger so move them around just imagine that you can scan this at the end and make just different lines so maybe we create a group so like this and that this bigger and then we color them all white and then we select just random things and press four and give them all different transparency so it feels again something like okay this is important make it maybe a bit smaller and then like this voila this is our class 8 planet maybe we make the font on regular or medium and a little bit more transparent something like this yes this is not okay so perfect and this looks still a little bit naked and what we do then is copying this shape and we're cutting out an edge from here just like this this feels better and then we add a small dot at this corner just to keep it interesting just to to make it very interesting this could be an anchor point for when you want to pin something somewhere and this could be everything just be creative and you don't need to have all the time a complete reason why this exists but it should feel like it has a reason why it's there so yeah maybe it's still better to think about ah why what what it does there and now i want to put a corner here so like a little edge because i want to connect this card to the center point here but first of all i want to give it maybe also an id somewhere like here so we say id um d e 1 4 c h i really like to hide some some stuff in there uh i really like the number 14 d e for germany so deutschland and ch for karlhouser and this may be the idea of the planet you can choose whatever you like but you have a lot of opportunities to hide stuff in there and this is really nice in my opinion to always hide some easter eggs there and then i made a little card here maybe something like this and yeah a little bit more down and this card here gets also the image or nah [Music] we we add this image so let me create a style out of this again like this like this all right okay and then paste this style in here so we have the tiny tiny map also just again to keep it very like interesting so you can find every like tiny tiny details everywhere and this is what i really like about these designs because you want to keep them interesting while you're adding this typography and then you start adding stuff that you because all the my overall designs you will always find the number 42 for example because this is the answer for everything and yeah you can just google it i don't i don't explain it right right here but it has something to do with the hitchhiker's guides for the galaxy and um this is one of my my favorite stories and that's why also the name of the channel is don't panic so we made now a connection here to the bottom like this and then looks like yeah looks like this it starts to get cool so uh then we have a small label here at the bottom that it's connected to and we give this also a random number because this could be then the oh no i moved something this could be then the anchor point number 35.1 because the system analyzed okay this is the section um 35.1 where they found something so and then we made it like this maybe round this and i think also a small corner even if you this is uh also even if you might not notice this small corner uh at the end so when you when you make a small corner in this design here you will someone will find it someone will see it and someone someone will see all the all the tiny details you create there and this is what what creates the characteristic of this design so i really like to add more and more details there and this is what we call then maybe core because now the system saw the center i feel a little bit weird when i talk about the design like this but anyway i just want to give you the feeling of what i think about when i when i design this stuff because it's yeah it's sometimes to get really lost in the design and just to create something beautiful and don't think about okay what are you the user research behind it what are the ux principles and because this is something i have um to do with the uh with this stuff i have to do a lot in my job so i don't want to be all the time uh affected by this when i do this because i yeah sometimes it's not that much much fun i really love my job but i just want to get my hat free on the weekends or at night and that's why i do these experiments and i really really love to do this so like this so we have this tiny dot there and we copy this and move it also here beautiful yeah we don't get it centered okay uh move it up like this okay perfect and because the we want to round also these edges here we just flatten the image again or this layer and then we select these anchor points and then curve it a little bit just something like this should work perfect and then here maybe two maybe just a three it should be fine and yeah we want to do this here too even if it's very small just think about the details and yes perfect and we saw also a font up here called block neue also for free and it creates these blocks so you have a lot of filters that you can use but this is what we do later before that we think about substances that get found on this planet and you have always hydrogen and helium there so let us use this so we create two labels um also with a border radius slightly like this and we made just one pixel yeah yes like this tiny gap and then we say hydrogen found hydrogen okay too big i don't don't know what i've written down there so 20 um okay cool uh hydrogen perfect and then make it yeah small like this maybe with more gaps align it to the left side a little bit smaller yeah and then how much percentage does this planet have so maybe 65 awesome yeah some something like this make it looks bigger here and then we make it also transparent and with a blurred background okay this is cool and make this a little bit more transparent make a group out of it and duplicate this and here we write down 35 helium and this is these are informations you get really from from from websites like nasa and any any other information site about planets so this is not that unrealistic so then we have also these charts here at the top so we add some numbers like this because these are very important charts by the way this is chart 28 for example and then we have oh make the gap a little bit smaller this is char 28 then we have chart here we have 42 then this is chart 75 and they are calculating stuff and this is where we use the font block so i just type random stuff in there and then i search for look block and then you see this you can also draw blocks um but i really like the font here so um i really like to use this because it's very handy and then put it next to this oh and then we have some random text because it's so small you can't read it anymore so you need to zoom in but this looks kind of cool when you look from here and then we make some variants like this and like this maybe perfect okay maybe a little bit more transparent and this should also have four lines all right i i always think about okay i need to talk i need to talk and but i don't want to talk that much so i just want to add stuff to to it here so you understand what are my my thoughts here so this is maybe um just a number for a section on the interface so section 2.9 so whenever the astronaut or whoever is using this interface searching for something and the interface says oh section 2.9 is it has a more function whatever they can easily find it i think it's um yeah it's logic so what we do then we can also add oh no what i created here um we can also because right now we don't need the arc tool um because we want to also align text to an axis or so to to the circle and this is what we want to do in illustrator but if you don't have illustrator after i created something like this i so because this is now the recording function here i will explain you or show you the actual here in the other actual arc plugin here in figma so what we do here is just the recording number of yeah this recording and then these are the seconds make them a little bit smaller i press k by the way um to make them smaller i don't want to jump all the time in these numbers even if they are not that they're good and they're 7.8584 but i like to use this arrow because it's a proportional scale and the other one is just the normal scale and then you just scale the bounding box like this so when you press v you have this normal error when you press k you have the this arrow for proportional scale just a small side note and then we select this and we make this a little bit more transparent and we next to this point we write something like recording whoa okay smaller and maybe a bigger gap like this okay great so this is our recording looks like this maybe a bit bigger [Music] great so what we want to do now is aligning the font to the circle here so which data we can use is for example time to time to spin on axes and then we write something days we make this all big like this and then we press the right click and uh so then we choose the this plugin arc sorry there are a lot of plugins here because i always play around but we choose arc and this looks like this and there we can align it on an arc when you go too far it's like this and we want to have something like this and it bends for you the the letters but it does not um bend the text layer so you can't change the text after that because yeah there's no function in in figma like that so yeah you will have a layer like this so you just get vectors so or no wait oh no okay you get each letter by itself so you can change sorry one misinformation but you get each layer away by yourself um and then you can change this but yeah right then in this angle so yeah not very useful then but if you are sure what you want to do then it's very useful so we want to put this text so this text here somewhere there and make it a little bit smaller that should align to this so what we're going to do is using the arc tool where we are again so run last plugin and then we made a band like more like this this is by the way a tiny problem because it lands always on top of your text layer and i don't know why it does not take the overall capital letters there so what we're going to do then is putting it somewhere here and then turning it white this is one opportunity or one possible technique that you can use to align text to your design and the other option is using illustrator and this is what i want to show you right now so now we are in illustrator we use the type on pass tool and this is very easy because you just draw a circle and then you select the type tool on the left side hold and press the left the mouse button to reach the type on path tool like here and then click on this circle and then it aligns the text to your pass so to have a reference we can copy and paste the shapes from figma easily to illustrator because everything is vector based here but what we need to do first is delete all fills and layers because illustrator can't interpret the image on your layer so just fill it with a gray shape it doesn't matter and then right click copy as svg delete it here because we don't need it anymore and then paste it here so now we have it in illustrator and we send this to back and there we have our text and our text was something like time to spin on axes i don't know why but my illustrator does not find the interfund so i use ionic when it's this small it does not matter much and it's also just to give you an example maybe it works on your side i don't know what i set up here but i i just want to mention this so um time to spin on axis maybe we put some days here so days so just uh some kind of random number not 900 maybe 400 days and then we can align this to our design so we can spin it around what i really hate is these handles here because they never i so this works but sometimes it doesn't work and then you have this i don't get it so i just turn uh instead the whole frame around and bring it to the to the right position and yeah if we like what we see here then we just press the right mouse button and then we say create outlines and then we copy and paste this text easily to figma because it's all vector based and then we bring it to this area here and then we turn it white and voila we have aligned our text to the circle and this is how you do it with everything that you want to align to the circle here if you have illustrator if you don't have illustrator it's fine use the arc tool or the other plugins in in the figma community hub because there are some i guess i have in mind there's one where you can align text to a path or objects to a path so i will paste the links down in the video box and i don't want to explain now all the stuff i paste in here because i already done this and this is how the final result will look like so i paste some more fill text in some other numbers and did the kerning a little bit different here on the left side and i already did something like changing the image as i said at the beginning if you change the image the whole character of this interface change so i tried it with that one and this looks a little bit darker i don't know which which one i prefer like both and yes now i will maybe uh i can finish the tutorial now you can just um close it but what i want to show you because on ins on twitter many people ask me of oh how have you done the tilt shift in in figma i just want to mention i have done this tilt shift of the goliath design in photoshop sure unfortunately there's no tilt shift function here but i created it to shift in figma and this is very easy because you because i i just want to find out okay can i create it here and it makes all the sense that you can because you just have a gradient here where you have on the left side some kind of grayish because i use the background color here some kind of grayish bluish tone that is 20 transparent and then you have zero percent of transparency and this is then the gap where nothing is happening and then again at the end you have again some kind of transparency so it gets blurred and the effect is then that you choose layer blur so the overall layer gets blurred so the corners are not that um there's not the hard cut at the end and you choose background blur so the background gets blurred what you don't have is motion blur so it looks a little bit more dynamic so i prefer to do it in photoshop but yeah you can do it also here in figma why not so this was everything i can tell you today if you have any questions just leave me a comment in english in german that's totally fine just write me on instagram on twitter and yeah if you have any feedback just let me also know and what i can change what i can tweak here and there maybe it's too long or i don't know but um yeah have fun with that and i hope to see some interfaces you create yeah see you then [Music] you

Channel: don't panic

Views: 11,255

Keywords: figma, ui, ux, interface, design, tutorial, uiux, cyberpunk, cyber, future, hud, planet, scifi, galaxy, sketch, carlhauser, dribbble, instagram, starship, interfacedesign, tut, userinterface, learn, teach, unsplash, Illustrator, Adobe, Universe, marvel

Id: bgEqU5D1xaI

Length: 54min 53sec (3293 seconds)

Published: Sun Jan 24 2021