Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 28

Designing Key Sections & Footer for Desktop Layout

Recommended resources

In our last lesson, you masterfully designed the core persuasive sections of a landing page—the benefits and social proof. You learned to translate features into compelling benefits and use specific evidence to build trust, creating the narrative heart of the page.

Today, we will build upon that narrative and design the "closing" sections: the final, critical parts of the page that turn a convinced user into a client or customer. You will learn to design clear pricing tables, frictionless forms, and a functional footer. Finally, we will assemble all the sections you've created over the last two lessons into a complete, polished desktop landing page. This is where your analytical skills from finance and your eye for design truly come together to drive business outcomes.

1. The Anatomy of a High-Converting Landing Page

Before diving into the designs, let's reinforce the ideal structure of a landing page. It's a logical flow designed to guide a user from initial interest to a final decision.

Figma Landing Page Tutorial Make a High Converting Layout

This article from DM Letter Studio provides a proven, conversion-focused structure for a landing page. It's a great roadmap for what we are assembling today.

Focus on the section titled "Essentials for High Converting Structure." The list presents a standard flow: Hero → Social Proof → Benefits → ... → Pricing → FAQ → Final CTA → Footer. Today, we are focusing on the last three items on that list.

2. Designing a Clear and Persuasive Pricing Section

The pricing section is one of the highest-friction points on any page. Your goal is to make the options clear, the value obvious, and the decision to purchase feel safe and simple. Your background in commerce gives you a unique advantage here, as you understand that clarity in pricing is a form of customer service.

A common and effective layout is a 2 or 3-column pricing table. Let's look at an example.

This example demonstrates a clean pricing structure. It uses visual hierarchy to highlight the price, bullet points for scannability, and a clear 'Choose Plan' CTA for each option. The toggle for yearly billing is a common persuasive technique.

Now, let's build a flexible and professional pricing component in Figma.

Create a Responsive PRICING Table Component Using Component Properties (Figma Tutorial)

This tutorial from Mavi Design is a masterclass in building a responsive pricing component using Auto Layout and component properties. It will give you the technical skills to create highly reusable and professional pricing tables.

This video is comprehensive. Follow it step-by-step: Element Structure: Watch from the start to understand the basic text elements needed. Styling & Hierarchy: From styling the elements, observe how font size and weight create a clear visual hierarchy. The price should be the most prominent element. Auto Layout Assembly: See how all the elements are grouped into a responsive card using nested Auto Layouts from grouping and combining. Pay close attention to how Fill container is used. Component Properties: The section from creating properties is crucial. This is how you make the component flexible, allowing you to toggle elements like a "Most Popular" badge or swap button styles. Final Assembly: Finally, watch how to use instances of your component to assemble the full section, creating a complete pricing table for a desktop layout.

Your Turn: Design a Pricing Section

Let's apply this to your bespoke gifting business. Create a pricing section that offers different tiers of service.

  1. In your Figma file, plan out 2-3 service tiers. For example:
    • Tier 1: "Single Bespoke Gift" (for one-off occasions)
    • Tier 2: "Event Gifting" (e.g., wedding favors, corporate gifts)
    • Tier 3: "Full Trousseau Curation" (your premium, end-to-end service)
  2. Following the Mavi Design tutorial, build a single pricing card component. Include a headline, price, a short description, 3-4 bullet points outlining the key deliverables, and a CTA button ("Get a Quote" or "Choose Plan").
  3. Create variants or use boolean properties for a "Most Popular" badge to highlight your recommended plan (likely Tier 2 or 3).
  4. Duplicate your component to create the full 3-column pricing section. Adjust the content for each tier and apply the "Most Popular" badge to one of them to guide the user's choice.

3. Designing a Frictionless Form

Whether for a newsletter signup, a contact request, or a detailed quote, the form is often the final step to conversion. Every unnecessary field or moment of confusion increases the risk of abandonment. Here, clarity and simplicity are paramount.

Building a form that is both beautiful and responsive requires a systematic approach with Auto Layout.

How to Create Responsive Forms in Figma with Auto Layout

This excellent tutorial from Frae Studio breaks down the process of building a complex, responsive form from the ground up. We'll focus on the core steps of building the fields and the container.

Follow these sections to build your form structure: "Step One: Creating the first field": This shows how to build the basic input field with a placeholder. "Step Two: Let's add some extra elements": Learn how to add a field heading (label) and structure it with the input field. "Step 3: Make it a component": This is key for reusability. "Step 5: It's all coming together": See how to duplicate your field component to start building the form. "Step 6: Start adding multi-column fields": Learn to use nested Auto Layout frames to place fields side-by-side (e.g., for "First Name" and "Last Name"). "Step 8: Adding buttons": Finish the form with a clear, full-width submit button.

Your Turn: Design a "Request a Quote" Form

For your business, a detailed quote form is a primary conversion tool.

  1. Design a form section with a clear heading like "Start Your Custom Creation" and a brief subheading.
  2. Using the frae.au tutorial as a guide, create a reusable form field component containing a label and an input area.
  3. Build out the form with the following fields:
    • First Name & Last Name (in a two-column row)
    • Email Address
    • Event Type (e.g., Wedding, Corporate, Birthday)
    • A larger text area for "Tell us about your vision..."
  4. Add a prominent, full-width CTA button at the bottom that says "Request My Custom Quote".

4. Designing a Functional Footer

The footer is your website's safety net. It's where users look when they are lost or need specific information like contact details or social links. A good footer builds trust and provides helpful navigation without being distracting.

Figma tutorial for Beginners: Complete Website from Start to Finish

Let's return to the "Figma tutorial for Beginners" by Flux Academy. It includes a straightforward section on designing a clean and organized footer.

Watch the segment on designing the footer. Notice how the designer organizes links into columns, includes a newsletter signup field, and ensures everything aligns with the page grid.

Your Turn: Design the Footer

  1. Create a footer section at the bottom of your landing page frame.
  2. Structure it into 2-3 columns.
  3. Column 1: Your business logo and a brief tagline.
  4. Column 2 (Links): Add essential navigation links like "Portfolio," "About," "Contact," and links to your social media profiles (especially Instagram, given your business).
  5. Column 3 (Action): Add a "Join our newsletter" call-to-action with a simple email input field and a submit button.
  6. Include a copyright notice at the very bottom (e.g., "© 2024 [Your Business Name]. All Rights Reserved.").

5. Assembling the Complete Desktop Layout

You've now designed every section of a high-converting landing page. The final step is to put them all together into a single, cohesive desktop frame.

  1. Ensure you have a 1440px wide desktop frame.
  2. Place all the sections you have designed in the correct order:
    • Hero (from previous module)
    • Social Proof (from last lesson)
    • Features/Benefits (from last lesson)
    • Pricing (from this lesson)
    • Request a Quote Form (from this lesson)
    • Footer (from this lesson)
  3. Audit for Consistency: This is where your auditor's attention to detail is invaluable. Go through the entire page and check for consistent spacing. Are the gaps between each major section the same (e.g., 96px)? Is your 8-point grid system being followed? Is the typography and color palette consistent?
  4. Make any necessary adjustments to ensure a smooth, professional, and logical flow from top to bottom.

Conclusion

Congratulations! You have successfully designed and assembled a complete, conversion-focused desktop landing page. You've moved beyond individual elements and are now thinking about the entire user journey, from the initial hook to the final click. By designing pricing tables that build confidence, forms that are easy to complete, and a footer that provides a safety net, you have created the essential "closing arguments" for your page.

Key Takeaways:

  • Conversion Sections are Critical: Pricing, forms, and the final CTA are the highest-stakes areas of your page. Clarity and simplicity are your primary goals.
  • Components are Your Best Friend: Building flexible pricing cards and form fields as components with Auto Layout will save you immense time and ensure consistency.
  • Structure Guides Conversion: The order of your sections creates a narrative that moves users from awareness to action.
  • Assembly Requires Precision: A final check for consistent spacing, alignment, and styles is what separates an amateur design from a professional one.

Preview of the Next Lesson:
Our beautiful desktop design is complete, but over half of all web traffic is mobile. In the next lesson, we will tackle this reality by diving into the core principles of responsive design. You will learn about fluid layouts, breakpoints, and how to think "mobile-first" to ensure your design delivers a seamless experience on any screen.