Figma tutorial: How to create a stunning website ui in figma.

buymeacoffee.c...
Resources Link
www.figma.com/...
Ready to take your UI design skills to the next level? Join us in this comprehensive step-by-step tutorial where we unravel the secrets of creating stunning and effective user interfaces (UI). Whether you're a seasoned designer or just starting, this guide is crafted to enhance your UI design proficiency. ‪@Figma‬
This tutorial was inspired by a design posted on instagram by mr.masuds

[@tanveerali8073]

great, will use in my next project.

[@icodeng]

Great!

[@siddharthmishra1005]

nice

[@icodeng]

Thank you

[@blessingjohn2518]

So useful 👏🏾

[@icodeng]

Glad it was helpful!

[@umerzafar]

why are the grids hidden when making the bento blocks. the red box twchnique is used when a grid is not present

[@icodeng]

The red block is use to maintain the Same space between the items, if u use grid for this type of design it will be difficult to maintain, that’s why is easier to use the red block or the rulers.

[@UmairUlhaque]

Thanks for the tutorial broher and you explained very well but I am confused why you made grid at first place and you are making just opposite to that grid like you just hide the grid and doing it manually with the 16 pixels of box created while your grid gutte gap is 20 pixels. Conflict isn't?

[@icodeng]

The layout of the tutorial do not require a grid. I added the grid for clarity, if u notice the grid was immediately replaced with the rulers. The only time the gutter will conflict with the design is when we r using the grid system fully in the tutorial.

[@umerzafar]

why are the grids hidden when making the bento blocks. the red box twchnique is used when a grid is not present

[@icodeng]

The red block is used to maintain the Same space between the items, if u use grid for this type of design it will be difficult to maintain, that’s why is easier to use the red block or the rulers.