4.3 Booking App

In the Figmaster - Lessons Figma file, open the 4.3 Booking App page.

Introduction

In this chapter, you will learn how to build a simple Booking App page. Then, I will cover some more advanced auto layout schemes.

Step 1. Page

  1. Open the frame tool (F).
  2. Create a frame with Macbook Pro size, 1440x900 px (Desktop > Mackbook Pro - in the Frame panel on the right).
  3. Resize it to be 1678 px high.
  4. Rename the frame to Booking App.
  5. Set the page's Fill to Neutral/10.
  6. In the Layout grid panel on the right, add 12 col style.

Step 2. Navbar

Part 1. Navigation

  1. Grab the Logo component from the Assets panel and drop it on the canvas.
  2. Create a text layer with Buy text inside 48 px to the right of the Logo.
  3. Change its text style to Text M/Medium.
  4. Change its color to Neutral/90.
  5. Duplicate the text layer 24 px to the right, so there are four text layers in total.
  6. Group them with auto layout.
  7. Change the group's name to Links.
  8. In the auto layout settings, set the alignment to Left - Center.
  9. Change the second layer's text to Sell.
  10. Change the third layer's text to Rent.
  11. Change its color to Primary/Main.
  12. Change the last layer's text to Compare.
  13. Select the Logo and Links and group them with auto layout.
  14. Rename the group to Navigation.

Part 2. Search

  1. Grab the Input field component from the Assets panel and drop it on the canvas ~200 px on the right of the Navigation group.
  2. Change its placeholder text to Search.
  3. Grab the Button component from the Assets panel and drop it on the canvas 4 px on the right of the input field.
  4. Select both Input field and Button and group them with auto layout.
  5. Rename the group to Search.
  6. Select the Input field inside and set its Resizing (width) property to Fill container.
  7. Select the Button inside.
  8. Change its Content property to Icon Only in the Instances panel.
  9. Swap the Icon to Icon / MagnifyingGlass.
  10. Resize the Search group to 248 px in width.

Part 3. Grouping it all together

  1. Select Navigation and Search groups.
  2. Group them with auto layout.
  3. Rename the group to Navbar.
  4. Set the group's Fill to Neutral/10.
  5. Add Shadow 2 effect.
  6. In the auto layout settings:
  7. Alignment: Space between - Center.
  8. Padding Top and Bottom: 20 px.
  9. Padding Left and Right: 48 px.
  10. Move it inside the Booking App frame.
  11. Press ALT + W to align it to the top.
  12. Resize it so it spans across the entire width of the Booking App frame.

Step 3. Header

Part 1. Title

  1. On the canvas, create a text layer with the following properties:
  2. Text: Paradise Luxury Hotel Hawaii.
  3. Text style: Heading/L.
  4. Text color: Neutral/100.

Part 2. Details

  1. Below the heading, on the canvas, drop the Icon / Star from the Assets panel.
  2. Resize the icon to 20x20 px.
  3. Change the icon color to Primary/Main.
  4. Create a text layer 4 px on the right of the Icon with the 4.24/5 (456 Reviews) text inside.
  5. Change the text style to Text M/Regular.
  6. Change the text color to Neutral/90.
  7. Select both Icon and Text layer.
  8. Group them with auto layout.
  9. Rename the group to Detail.
  10. In the auto layout settings, set the Alignment to Left - Center.
  11. Duplicate the Detail group 16 px to the right two times, so there are three items in total.
  12. Select all Detail items and group them with auto layout.
  13. Rename the group to Details.
  14. In the second Detail:
  15. Swap Icon to Icon / Medal.
  16. Icon color to Primary/Main.
  17. Text to Superhost.
  18. In the third Detail:
  19. Swap icon to Icon / MapPin.
  20. Text to 1901 Thornridge Cir. Shiloh, Hawaii 81063.

Part 3. Action Icons

  1. Grab the Icon / BookmarkSimple from the Assets panel and drop it on the canvas ~200 px on the right of the Details group.
  2. Duplicate the Icon 8 px to the right.
  3. Select the second Icon and swap it to be Icon / ShareNetwork.
  4. Change the color of both icons to Neutral/70.
  5. Group both icons with auto layout.
  6. Rename the group to Action Icons.

Part 4. Details Wrapper

  1. Select both Details and Icons and group them with auto layout.
  2. Rename the group to Details Wrapper.
  3. In the auto layout settings:
  4. Alignment: Space between, Center.

Part 5. Grouping it all together

  1. Select the Heading and Details Wrapper.
  2. Group them with auto layout.
  3. Rename the group to Header.
  4. In the auto layout settings, set the Spacing between items to 16 px.
  5. Press Enter to select elements inside.
  6. Change their Resizing (width) property to Fill container.
  7. Move the Header to Booking App frame 48 px below the Navbar.
  8. Resize the Header in width to be aligned with the Logo and Search (48 px from the left and right edges of the Booking App frame).

Step 4. Gallery

Part 1. Main Image

  1. Inside the Booking App frame, 32 px below the Header, create a rectangle that is 1115x680 px.
  2. Fit it inside ten columns on the left. Make sure to have your layout grid visible. You can turn it on/off with CTRL + SHIFT + 4.
  3. Set the rectangle's corner radius to 4 px.
  4. Rename the rectangle to Main Image.

Part 2. Lightbox

  1. Inside the Booking App frame, 16 px on the right of the Main Image, create a rectangle that is 212x158 px.
  2. Set its corner radius to 4 px.
  3. Duplicate it 16 px to the bottom three times, so there are four rectangles in total.
  4. Select all four small rectangles and group them with auto layout.
  5. Rename the group to Lightbox.
  6. Select all rectangles inside and set their Resizing (width) property to Fill container.

Part 3. Grouping it all together

  1. Select the Main Image and Lightbox group.
  2. Group them and apply auto layout.
  3. Rename the group to Gallery.
  4. Select the Main Image inside and set its Resizing to Fill container.
  5. Go to www.unsplash.com and copy some random hotel-related photo.
  6. Select the Main Image and paste the photo.
  7. Repeat the action for the rest of the rectangles.

Step 5. Tabs

  1. Grab the Tabs component from the Assets panel and drop it 48 px below the Gallery.
  2. Remove the Inner shadow effect from the component.
  3. Change texts of the Tabs in the following order from the left: Description, Features, Virtual, Location.
  4. Select and hide the last Tab item with CTRL + SHIFT + H.
  5. Grab the long Lorem ipsum paragraph from the Resources frame. I've used the Lorem ipsum plugin to generate it. The plugin is pretty straightforward to use, so I didn't want to waste your time describing how to use it.
  6. Move it 48 px below the Tabs component.
  7. Select both elements and group them with auto layout.
  8. Rename the group to Content.
  9. Select the paragraph inside and set its Resizing (width) property to Fill container.
  10. Resize the Content so it spans across seven columns from the left in the Booking App frame.

Step 6. CTA

Part 1. Title Wrapper

  1. On the canvas, create a text layer with the following properties:
  2. Text: Add dates for prices.
  3. Text style: Heading/S.
  4. Test color: Neutral/100.
  5. In the Header group, inside the Details group, select the Reviews Detail.
  6. Copy it and paste it 8 px below the Add dates for prices heading.
  7. Select the heading and Detail and group them with auto layout.
  8. Rename the group to Title Wrapper.
  9. Select the elements inside and set their Resizing (width) property to Fill container.

Part 2. Form

  1. Grab the Input component from the Assets panel and drop it 24 px below the Title Wrapper group.
  2. Select the Input helper text and hide it.
  3. Change the Label of the Input to Check-in.
  4. Change the placeholder of the Input to MM/DD/YYYY.
  5. Duplicate the Input instance 8 px to the right.
  6. Change the Label of the second Input to Check out.
  7. Select both elements and group them with auto layout.
  8. Rename the group to Dates.
  9. Select the elements inside and set their Resizing (width) property to Fill container.
  10. Grab the Select + Label component from the Assets panel and drop it 16 px below the Dates group.
  11. Hide its helper text.
  12. Change its Label to Guests.
  13. Change the Select placeholder to 1 guest.
  14. Select Dates and Select + Label.
  15. Group them and apply auto layout.
  16. Rename the group to Form.
  17. Select the elements inside and set their Resizing (width) property to Fill container.

Part 3. Grouping it all together

  1. Grab the Button component from the Assets panel and drop it 24 px below the Form group.
  2. Resize the Button, so its width matches the Form group.
  3. Change the Button's text to Check availability.
  4. In the Instances panel, change the Button's Size to Big.
  5. Select Title, Form, and Button.
  6. Group them by adding auto layout.
  7. Rename the group to CTA.
  8. Select the elements inside and set their Resizing (width) property to Fill container.
  9. In the auto layout panel, set the padding (all sides) to 48 px.
  10. Set the Fill of the CTA to Neutral/10.
  11. Add a Stroke that is 1 px Inside Neutral/40.
  12. Add the Shadow 2 effect.
  13. Set the group's corner radius to 4 px.
  14. Move the CTA group inside the Booking App frame.
  15. Set it 48 px below the Gallery.
  16. Resize its width across the four last columns of the Booking App frame.

Step 7. Main Content

  1. Select the Content and CTA.
  2. Group them and apply the auto layout.
  3. Rename the group to Main Content.
PreviousNext