DEV Community

Cover image for Designing a Full Website UI using Figma
Adrian Twarog
Adrian Twarog

Posted on

Designing a Full Website UI using Figma

Figma is a great application for designers.

In this video, I was given a real-world application by a business that needs a website front-end. I decided to design a single page in Figma and go through the thought process each step of the way.

Included in this video:

  • Creating the logo,
  • Creating Website UI section by section
  • Using different colours and why they are chosen
  • The reasoning behind why the user interface looks a certain way
  • Design decisions such as fonts, sizing, shades and more.

Top comments (4)

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

Great stuff! Question: What shortcuts are you using to set margins/padding? I'm having trouble figuring that out in Figma.

Collapse
 
adriantwarog profile image
Adrian Twarog

Just up and down arrows on the keyboard, and holding shift to do increments of 10. It’s the same I think as photoshop :)

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

Thanks for the quick response!

Thread Thread
 
adriantwarog profile image
Adrian Twarog

That's why this site is so great! I really like dev.to, they have some really good people and articles on here!