Detailed description of every page

1. Getting Started

1. Open Figma and create a new project or file.

2. Define the dimensions of your frame to match the screen size of the target device (e.g., iPhone 14
or 15 Pro Max).
3. Use the frame's background color settings to set a plain white background.
4. Importing an existing illustration from an online resource.
5. Use the Text tool (T) to add the main headline: "From store to your door, whenever you need
more."
6. Customize the font, size, color, and alignment to match the app's branding. In this case, the main
headline uses a larger, bold font with green color for "door" and "more" to emphasize these words.
7. Add a subheadline: "Freshly: where fresh meets convenience."
8. Use a smaller font size and a lighter color for this text to make it less prominent than the main
headline.
2. Home Page

1. Add a tagline below the app name: "Order groceries delivered to your doorstep!"
2. Use the Rectangle tool (R) to draw a search bar just below the header.
3. Add a magnifying glass icon on the left side of the search bar to indicate its purpose.
4. Add placeholder text inside the search bar (e.g., "search").
5. Center the text vertically within the search bar and use a lighter color for the placeholder text.
6. Add a horizontal container for categories just below the search bar.
7. Use images or icons to represent each category (e.g., Snacks, Breakfast, Canned, Sauce).
8. Create a grid layout to display products below the category section.
9. For each product, include:
a. An image of the product.
b. The product name and size (e.g., "Mushroom sauce 24oz").
c. The price (e.g., ₹439).
d. A "plus" icon button to add the product to the cart.
10. Ensure the product grid is visually balanced and easy to navigate.
11. Create a bottom navigation bar with icons for different sections of the app (e.g., Home, Cart, Profile).
a. Use simple, recognizable icons and label each one if necessary.
3.Product details page

1. Create a top bar for navigation. Include a back arrow icon on the left to allow users to return to the
previous page.
2. Add a search icon on the right for quick access to the search function.
3. Add a placeholder or image of the product at the top center of the screen. Ensure the image is clear
and visually appealing.
4. Below the image, add the product name ("Avocado (Loose), 1kg") and the rating (e.g., 4.5 stars).
5. Include the MRP, the discounted price, and the percentage off. Display this information clearly to
highlight the discount.
6. Add an "Add to basket" button below the price information. Use a contrasting color like green to
make it stand out.
7. Include a "Save for later" button next to it for users who may want to purchase the item in the
future.
8. Mention the earliest delivery time below the action buttons. This informs users of how quickly
they can get the product.
9. List different pack sizes (e.g., 1kg and 500g) along with their prices and discounts. Use
checkmarks or indicators to show the currently selected pack size.
10. Add a footer with icons for navigation: home, categories, cart, favorites, and profile. This ensures
easy navigation throughout the app.
4. Checkout page

1. Add a top navigation bar with a back arrow icon on the left for navigating back to the previous page.
2. Include a search icon on the right for users who might want to search for additional products.
3. Display the product image and name ("Avocado (Loose), 1kg") prominently.
4. Show the price clearly (e.g., ₹202).
5. Include options to change the quantity (e.g., with "+" and "-" buttons) and a trash icon to remove the
item from the cart.
6. Add a button labeled "+ Add Item" below the product details. This allows users to add more items to
their cart without navigating away from the checkout page.
7. Highlight the savings information in green text, such as "You will save ₹74.71 on this order." Place
this prominently to ensure users notice the discount.
8. Create a section for detailed pricing information:
a. Price: Show the original price of the items.
b. Discount: Show the total discount applied.
c. Delivery Charges: Indicate whether delivery is free or if there is a charge.
d. Total: Show the final amount the user needs to pay.
9. Add a "Pay Now" button at the bottom of the pricing section. Use a distinct color like green to make it
stand out and encourage users to complete their purchase.
10. Include a footer with icons for navigation: home, categories, cart, favorites, and profile. This ensures
that users can navigate easily through the app.
4.Explore page

1. Add a top navigation bar with a search bar centered at the top. This allows users to quickly search for
products.
2. Include a filter icon to the right of the search bar for advanced search options or sorting preferences.
3. Below the header, add a title or section header like "Popular Items" to indicate the category of
products displayed.
4. Create individual product cards for each item. Each card should include:
a. A product image.
b. The product name (e.g., "Banana Robusta", "Gajar/Carrot").
c. The quantity/size (e.g., "6 pcs", "500 g").
d. The price (e.g., ₹59, ₹54).
e. An "Add" button (represented by a "+" icon) to quickly add the item to the cart.
5. Arrange the product cards in a grid layout with two columns to make efficient use of space and
provide a visually appealing structure.
6. Add a footer with icons for navigation: home, categories, cart, favorites, and profile. This ensures
users can easily navigate through different sections of the app.
7. Ensure the icons are evenly spaced and aligned correctly.
8. Ensure all elements (icon, text, button) are center-aligned within the container.
9. Adjust the spacing between elements to ensure a clean and balanced look.
6. Final Checkout page

1. Create a frame for the checkout page. This will be the base where you'll place all your elements.
Name it appropriately (e.g., "Checkout Page").
2. Insert icons for navigation (back button) and search. You can use Figma's icon library or import
SVGs.
3. Create a container for the items being purchased. Use rectangles or cards to represent each item.
4. For each item, add an image, the name of the item, price, quantity, and a delete icon. Arrange these
elements neatly within each card.
5. Use Figma's text tool to add item details like "Avocado (Loose), 1kg" and "Nutella Spread".
6. Add a "+" and "-" button for adjusting the quantity, along with an icon indicating the item type (if
needed).
7. Insert a button below the list of items for adding more items. Use a rounded rectangle and label it
"+ Add Item".
8. Create a separate container for the price details at the bottom.
9. Add text layers for "Price (2 items)", "Discount", "Delivery charges", and "Total".
10. Include the respective values next to these labels. Ensure the text is aligned properly for clarity.
11. Design a prominent "Pay Now" button at the bottom of the page. Use a contrasting color to make it
stand out.
7. Payment Success

1. Set the background color of the frame to white or any other suitable color that aligns with your
app’s theme.
2. Create a rounded rectangle in the center of the frame to act as the container for the success
message. Adjust the size and border radius to make it visually appealing.
3. Add a checkmark icon at the top of the container to indicate success. You can use Figma’s icon
library or import an SVG of a checkmark.
4. Center the icon horizontally within the container and give it a suitable size to ensure it's noticeable.
5. Use the text tool to add a bold "Success!" message below the checkmark icon. Set the font size and
color to make it stand out.
6. Create a button at the bottom of the container for the user to navigate back to the main page or
previous screen. Use a rounded rectangle for the button shape.
7. Label the button "Go Back" with appropriate font size and color.
8. Add a prototype interaction to the "Go Back" button, linking it to the appropriate screen (e.g., main
page or order history).
9. Test the prototype to ensure the interaction works smoothly and provides a good user experience.