Make a Simple Furniture Landing Page Site Design in Figma

In this article, we’ll dive into the intriguing process of crafting a furniture web design using figma. I’m Sumaryadi Tri, and I invite you to explore the practical steps in creating captivating and functional designs. Let’s embark on this creative journey together!

First thing that you want to do is make an icon, but no worry in freepik.com it has a ton of free icon there, you just need to download it and make a copy to your figma design

Then make an icon with the text, your creativity and auto layout, then make them just look like the Icon.

Then you need to create a desktop frame. And if you want to make your design more tidy, you need to make column grid in your desktop in the right bar.

Now you have a desktop frame, then move your icon into your main frame. In my case, I’ve made a main menu and login button.

After that you need a hero image. Search it on freepik.com again, or you can use freepik plugin in figma.

In this article I design a furniture company site, so I type in search bar “furniture”. So here what Iget.

Then you drag and drop the image to your canvas.

Then, optimize your hero image in the canvas. Don’t forget to put a button and a powerfull words that can attract the visitor.

Now, make a copy of text “Our Product” with pressing alt and drag and the same time to the text, and direct the text bellow.

Then, make the text bigger for the tittle.

After that you need to find a different image in freepik, the methode is just like before. Don’t forget to make a radius in the image, adjust the scale and make drop shadow effect. Here’s the result

Don’t forget the distant.

Now you need description for this image. Don’t worry, you just need go to chatgpt type what you need.

(You may need different words for your project).

(If you think that you need to change it, so do it).

Make a tittle for this paragraph, of course you need to make the tittle bigger than the words.

Now, to direct this kitchen room set to their page, you need to make a button. Here the best way to create a button from scratch.

First, you need a word and icon (you know where to go right?), then click the word and make auto layout from this word (hold shift + A). After that drag the icon to this auto layout, then fill the button with the color you want. After that make radius for this button and boom your button is ready to serve.

Now you have a button, then put the button to bellow the article, then select all part, and then make them auto layout. Dont forget to adjust the size of you auto layout.

Now, you have an image and the description. So you need to make them united in one frame, so click the image and hold shift, click the description and hold shift + a.

Now, you have a card. Repeat this method for 3 time for different category and you can edit the content of this element by click the element and press right/left button.

Now you have a content of “Our Product” menu. Then now you need to make a content of “Contact” menu.

To to that, you need an image. Search in freepik, grab the landscape one, make it radius, then you need to make this image to be half black.

To do it, click the image, on the right menu, find fill menu and add 1, click gradient, change to be linear and customize it according to your wishes.

After that you can customize the text with the address, contact, and email, and of course the tittle of text.

Now you need a message box for people who want to ask this site anything. First you make a text, a simple text with 300 long box, then make frame with this box, after that click stroke and choose the bottom one, then choose the color.

Now make it three with different word, then make them to one frame.

Then, after you make the three of it, you need title and button, don’t forget to make them in one frame.

Congratulation, you have a message box now.

After this step, you need to join this frame to the card that you build before

Well, this message box is not finish yet, you need to make a box with this auto layout with fill the box with white color. But first, you need to make the text black.

Then adjust the size, radius and the color if necsesarry.

Well, now you have a full card “Contact” on menu.

Before we finish, we need to make a footer for this web design. To do that, you need to download a template on community in figma, just type “footer template” then a lot of template will showed.

Then, choose one of them and open it, then make a copy to your canvas.

I already have one, just like this.

Choose one, and copy to your canvas and customize according to your wishes.

Finally Your design is finish and ready to develop.

As we wrap up, may your design endeavors be as seamless as your Figma creations. Happy designing!👋