Advanced Web Shapes in Framer Using Figma | Free Remix | Part 1

hey everyone so this video I am covering a basic um fundamentals of shapes like how you can apply this type of shapes on your framer website using figma and uh also going to breaking down those things so that you can understand the basic and create those by yourself like for the first one uh I applied some basic uh shapes for user head shots and you can apply ticker here as well of from Famer to apply interactions there and the second one is something like you can put your input Fields here and you can also fetch

those input field on those sections by fetching data from your backend side or database and also another card for your CMS so that you can connect those from your CMS and apply those interactions something like this and another one to create those basic shapes and fing data from your server to show your data here or you can also keep the Statics it's all up to you so I am providing all this remix file on my comment section and also breaking down how you can create uh like these type of shapes on your frame website using

figma but yeah I am using this one and this one for now to show you so that you can understand better like how you can create those by yourself so let's jump into it well uh let's create this one I have already created the shapes and structures for this so if I zoom in you can see for this two shapes the central point is um similar uh square shape uh appearing as you can see so let's click on Union section and then flatten this section so that all the um shapes can conjugate with each other

now you can apply um radius 30 for all so it will look something like this and uh if I want to apply the paint tools on this image section you need to delete the image first and then apply the fill section and now I can double click on it and click on the pain tools and conjugate here because I need to okay let's drag our rules here and another one this one so if I click on it now you can see like this one uh I'm going to click on pen here here plus icon is

appearing and click on done and double click again and apply the same pen method here as well so if I double click you can see there are two pen point is appearing at this moment let's click on the corner one and drag this here so it can get vanished now you can apply your 30 pixels radius for all the shapes corner and and as you can see here our shape is ready and let's apply our image now click uh copy image and then paste it here see it's done and now you can plug in click

on it and it will copy your elements and let's copy this and paste on our framer so let's create this shape so I am grabbing this and taking the inspiration from there and this is our circle shape right so let's create our first ruler so it will look something like this and then paste everything inside it so you can see now it's actually covering the whole things right so let's double click on the rectangle shape and click on the point the point you want to create let's create this from here 1 2 3 4 right

this one and this one will be 1 2 3 4 okay now again double click on it create a point here and another Point here so yeah our point is ready something like this double click on it and click here so our point is ready right now again double click and click this one the corner one and drag this from here to here so it will look something like this and if you hover on it you can see the blue icon hovering icon is actually popping up so that means it's actually enabled the selection right

so then you can change the radius from here something like this so I'm keeping this 15 and if I click the corner but uh corner on and change the radius again I can change that from here five and also this one is also five if it's up to you but I'm keep keeping this five right so yeah our shape is ready if you want to change the rest of the corner radius just uh press shift on your keyboard and click all the points here and change it five on your radius section so you will be

able to achieve something like this and then just grab all the say uh rectangles and circle shapes and go to the plug-in and there is figma to HTML right so it will copy everything from here copy from here and let's paste this here see it's already pasted now so now if I go to layers see there is two section is not visible from here but you can see this are separated so now you can do whatever you want so let's click on rectangle shape because it's still an object I need to double click on it

then you can see it's a part icon is showing so if I click d uh again double click you have to click double click if I double click again you can see there is a path option appearing and the color is showing here right you can change color or image or whatever you want so I am taking an image from online [Music] and I am focusing here so you can see it's appearing but I want to make it more perfect so let's click on here and see yes now it looks good but I want to

make it more Focus um another one yes I think now it's fine okay so this is our rectangle shape I'm sorry and this is our and now you can grab all and right click on it and add frame and well now you can convert this as a component oh yeah now you can hover this button and everything you want and uh it's all up to you the way you want to uh manage this section and cards and everything so that's it for today and if you have any queries you can comment below or you can

join my community uh till then have a good time bye