Design a SaaS Landing Page in Figma

Build a professional content-first design process for a SaaS landing page.

Introduction

30 Second Summary

Ever opened a design tool, stared at a blank canvas, and started pushing pixels without a plan? Most landing pages are built this way. The result is hours of rework when the copy changes, the layout feels off, or the page just does not convert.

In this project, you will follow a professional content-first design process to build the strategic foundation for a fictional SaaS product's landing page. You will go from a structured brief through competitive research, content architecture, wireframing, and visual direction.

What You'll Build

A complete design process artifact in Figma for a fictional SaaS product landing page, covering every strategic phase from brief to visual direction.

By the end of this project, you'll have:

A design brief and structured competitive research board that define your product, audience, goals, and real-world patterns.
A content architecture map with real copy, heading hierarchy, and section purposes that drive every layout decision.
A low-fidelity wireframe and visual direction page (moodboard, type pairing, and color palette) that translate research into actionable design decisions.
Secret Mission: Design a responsive mobile wireframe that adapts your desktop layout for small screens.

Are there any prerequisites?

You should have basic familiarity with Figma before starting. If you can create frames, add text layers, and draw basic shapes, you have everything you need.

Set Up Your Figma File and Define the Brief

Every great landing page starts with clarity about what you are building and who you are building it for. Most designers skip this step and jump straight into pushing pixels. The result is a page that looks nice but does not convert visitors into users.

In this step, you will create your project file in Figma and write a structured design brief for a fictional SaaS product called Taskflow. This brief defines your product, audience, goals, and content requirements before any visual decisions are made.

In this step, get ready to:

Create a Figma Design file with a professional multi-page structure.
Fill in a complete design brief for Taskflow on the Brief page.
Define the content requirements your landing page must communicate.

Create your Figma file and page structure

Professional design projects separate each phase of the process into its own workspace. You will create a single file with five pages, one for each phase you will work through in this project.

In Figma, click Drafts in the left sidebar.
Click + Create in the top-right corner.
Select Design from the dropdown menu.

A new untitled Figma Design file opens in the editor.

Double-click the file name at the top center of the editor (it will say Untitled).
Type SaaS Landing Page - Design Process and press Enter.

Now add the five pages. Your file starts with one default page called Page 1.

In the left sidebar, double-click the page name Page 1 to rename it.
Type 01 - Brief and press Enter.
Click the + icon next to the page name to add a new page.
Name it 02 - Research.
Add another page and name it 03 - Content Architecture.
Add another page and name it 04 - Wireframe.
Add a final page and name it 05 - Visual Direction.

You should see all five pages listed in the left sidebar.

Why five separate pages?

Each page represents a distinct phase of the design process: strategy, research, content planning, layout, and visual direction. Keeping them separate prevents your canvas from becoming a cluttered mess and mirrors how professional design teams organize their work.

Only seeing 3 pages allowed?

The 3-page limit applies only to files inside team projects on the Starter plan. Files in your Drafts space have unlimited pages. Make sure your file lives in Drafts, not inside a team project.

If you need help, ask why your Figma file has a page limit and how to fix it.

Fill in the design brief on the Brief page

A design brief captures the strategic decisions that drive every visual choice later. You will define the product, audience, goal, differentiator, tone, and success metric for a fictional task management tool called Taskflow.

Click the 01 - Brief page in the left sidebar to navigate to it.
Select the Frame tool in the toolbar (or press F).
Draw a frame on the canvas that is 1440 pixels wide and 900 pixels tall. Set the dimensions in the right sidebar under W and H.
Select the Text tool (or press T) and click inside the frame to start adding text layers.

Type the following design brief content as separate text layers inside the frame. Each label and value should be its own text layer so you can arrange them clearly:

Product: Taskflow - a lightweight task management tool for freelancers.
Target audience: Solo freelancers and independent contractors who juggle multiple clients.
Primary goal of the landing page: Get visitors to sign up for a free trial.
Key differentiator: Simplicity. No complex project management features, just tasks, deadlines, and client labels.
Tone: Friendly, clear, confident. Not corporate.
Success metric: Free trial sign-ups.

What does each field do?

The product and audience fields anchor every decision about what content to include. The primary goal tells you what single action the page should drive. The differentiator prevents you from creating a generic page that could belong to any competitor.

The tone field guides word choice and visual style later. The success metric gives you something concrete to evaluate your design against.

Arrange for scannability

Try making each label bold or larger, with its value below in regular weight. This mirrors how you would present a brief to a client or stakeholder.

Define the page's content requirements

The brief tells you what the product is and who it is for. Now you need to decide what the landing page must communicate to reach the goal. These are content requirements, not layout decisions.

Still on the 01 - Brief page, add a new heading text layer below your design brief that says Content Requirements.
Below that heading, add a text layer listing what the landing page must communicate. Type each item on its own line:

What the product does (one sentence).
Who it is for.
How it is different from alternatives.
Social proof (testimonials or logos).
Clear call-to-action.
Pricing or "free trial" framing.

Why content-first?

This is content-first design in action. By listing what the page must say before deciding how it looks, you ensure that layout and visuals serve the message. Designers who skip this step often end up reworking entire sections when real content arrives and does not fit the layout they designed around placeholder text.

Review your Brief page. You should see a 1440x900 frame containing both the design brief and the content requirements list. No colors, no styling decisions, no layout choices. Just clarity about what you are building and why.

Text layers overlapping or hard to read?

Select all your text layers and use Auto Layout (Shift+A) to stack them vertically with consistent spacing. This keeps everything readable without manual repositioning.

If you need help organizing your layers, ask how to arrange text layers neatly inside a Figma frame.

Your project foundation is set. You have a clear brief and a list of what the page must communicate. Next up, you will research real SaaS landing pages to see how successful products solve the same design challenge.

Conduct Structured Competitive Research

Your design brief is locked in. You know what Taskflow is, who it serves, and what the landing page needs to accomplish.

Now it is time to look at how other products in your space solve the same problem. Competitive research is not about copying. It is about identifying proven patterns so you can adopt what works and intentionally break what does not fit your brand.

In this step, get ready to:

Study 3-5 real SaaS landing pages from curated inspiration galleries.
Annotate each screenshot with structured observations about headline patterns, content order, CTAs, and visual approach.
Synthesize your findings into a patterns summary that will drive your design decisions.

Find and study competitor landing pages

You need real-world examples to study. Free SaaS inspiration galleries curate hundreds of landing pages, making it easy to find products similar to Taskflow without aimless Googling.

Open your browser and visit one or more of these free inspiration galleries:

saaslandingpage.com (940+ curated SaaS landing page examples).
Saaspo at saaspo.com (1300+ examples with industry and style filters).
Land-book.com (section-level filtering by hero, pricing, testimonials).

Search or browse for landing pages from task management, productivity, or simple SaaS tools.
Pick 3-5 pages that are in a similar space to Taskflow (lightweight tools for individuals or small teams).
Spend 2-3 minutes studying each page. Pay attention to the headline, the order of sections, where the main call-to-action sits, and the overall visual feel.
Take a full-page screenshot of each landing page.

Taking full-page screenshots

On macOS, press Cmd+Shift+5 and select the area you want to capture. On Windows, press Windows+Shift+S to open the snipping tool.

For longer pages, many browsers support scrolling screenshots through DevTools or extensions. Alternatively, take multiple screenshots and paste them all into Figma.

Annotate your screenshots in Figma

Raw screenshots are not research. The value comes from structured annotations that force you to articulate what each competitor is doing and why it works.

Switch to your 02 - Research page in Figma.
Paste your screenshots onto the canvas.
Arrange them in a grid so you can compare them side by side.

For each screenshot, add text layers beside or below it answering these four structured questions:

What is the headline pattern? (outcome-led, feature-led, or question-based)
What content sections appear and in what order? (hero, social proof, features, pricing, CTA)
Where is the primary CTA and what does it say?
What visual approach are they using? (dark/light, illustration vs. screenshots, minimal vs. dense)

Why these four questions?

These questions correspond to the four decisions you will make for your own page: what to say first (headline), how to sequence information (section order), how to drive conversion (CTA), and what feeling to create (visual approach).

Answering them for real products gives you a library of proven solutions to draw from when you build your content architecture in the next step.

Not sure how to categorize a headline?

Outcome-led headlines describe a result the user will get ("Get more done in less time"). Feature-led headlines name what the product does ("Task management for teams"). Question-based headlines pose the user's problem ("Tired of losing track of deadlines?"). If it does not fit neatly, write what you observe and move on.

help me categorize the headline patterns I'm seeing in my research

Create your patterns and takeaways summary

Individual annotations capture what each site does. The patterns summary captures what the industry does. This is where scattered observations become actionable design intelligence.

Below your annotated screenshot grid, add a text heading that says "Patterns and Takeaways".
Write 3-5 bullet observations about what you consistently saw across the sites you researched.
Focus on recurring patterns, not one-off choices. These are the design conventions your audience already expects.

What good pattern observations look like

Strong observations are specific and directional. They tell you what to do (or consciously avoid) when you build your own page.

For example: "Most lead with an outcome-led headline, not a feature description." Or: "Social proof appears within the first scroll." Or: "Primary CTA uses benefit-driven language like 'Start free' not 'Submit.'"

For each pattern, briefly note whether you plan to follow it or break it for Taskflow. This primes your thinking for the content architecture step.

Why document patterns you might break?

Breaking a pattern intentionally is a design decision. Breaking a pattern because you did not know it existed is a mistake. By documenting what is common, you give yourself permission to deviate with purpose.

Your research page should now have a clear grid of annotated screenshots and a written summary of the patterns you identified.

You now have a research foundation that is grounded in real-world evidence. Next up, you will turn your brief and research into a complete content architecture, writing every headline and defining every section before touching layout.

Build the Content Architecture

Your research board now holds real patterns from real SaaS products. You know what works, what is common, and what the audience expects.

Now it is time to build the backbone of your landing page. The content architecture is a structured map of every section, its purpose, and the actual words that will appear on the page. This is where you commit to real copy instead of placeholder text, because layout decisions should serve specific content, not the other way around.

In this step, get ready to:

Create a complete content map with real headings and body copy for all 7 landing page sections.
Validate your content structure against the design brief and research patterns.
Annotate your content with a heading hierarchy (H1, H2, H3, body, CTA) for semantic clarity.

Create the content map for all 7 sections

The content map defines every section of your landing page as a text block with a clear job to do. Each section gets a name, a purpose statement, a real heading, supporting copy, and a CTA where applicable.

Switch to the 03 - Content Architecture page in your Figma file using the page list in the left sidebar.
Create a frame at 1440px wide. You can make it tall enough to fit all your content vertically.
Build your content map as a vertical stack of text blocks inside this frame. Each text block represents one landing page section.

For each section, define these five elements using text layers:

Section name (e.g., "Hero").
Purpose statement describing the job this section does (e.g., "Communicate what Taskflow is and who it is for in under 5 seconds").
Heading with the actual text you want on the page. No lorem ipsum. Use your brief and research to inform the copy.
Supporting content of 1-2 sentences of real body copy.
CTA text (the exact button label, if this section has a call-to-action).

Build all 7 sections in this order:

Hero.
Social Proof.
Features/Benefits (include 3 key benefits as sub-sections).
How It Works.
Testimonial.
Pricing/CTA.
Footer.

What is a content architecture?

A content architecture is the strategic plan for what goes on the page and in what order. It separates the "what do we say" question from the "how does it look" question.

By writing real copy now, your wireframe in the next step will reflect actual content lengths and priorities. Designers who skip this step often end up with layouts that break when real text replaces placeholder content.

Use your brief as a writing prompt

Refer back to your "01 - Brief" page while writing copy. Your key differentiator (simplicity), target audience (freelancers), and tone (friendly, clear, confident) should guide every headline and sentence you write.

Here is an example of what your Hero section text block might look like in Figma:

Section: Hero.
Purpose: Communicate what Taskflow is and who it is for in under 5 seconds.
Heading: "Finally, task management that doesn't get in the way."
Supporting: "Taskflow gives freelancers a simple way to track tasks, deadlines, and clients. No bloated features, just what you need to stay on top of your work."
CTA: "Start your free trial."

Follow this same structure for all 7 sections. Your headings and copy will be unique to your interpretation of the brief. The example above is just a reference for format.

Stuck on writing the copy?

If you are staring at a blank text layer, start with the purpose statement for each section. Once you know the job the section does, the heading often follows naturally. Your research patterns will also help. If most competitors use outcome-led headlines in their hero, try that pattern first.

Remember: this copy does not need to be perfect. It needs to be real enough to design around. You can refine later.

Help me write landing page section copy for a SaaS product based on my brief

Review your content map against the brief

Before moving on, your content map needs to pass a quality check. The map should fulfil the goals you set in your design brief and reflect the patterns you uncovered in research.

Open your 01 - Brief page in a second tab (right-click the page name and select Open in new tab) so you can compare it side by side with your content architecture.
Check that your content map answers these three questions from the brief: What is the product? Who is it for? Why is it different from alternatives?
Verify there is a clear path to the conversion goal (free trial sign-up). Your CTA text should appear at minimum in the Hero and Pricing/CTA sections.
Compare your section order to the patterns you documented on the 02 - Research page. If your order matches common patterns, that is fine. If it deviates, add a brief note explaining why.

Why check the content map against the brief?

This review step catches gaps before you invest time in wireframing. A missing section or a weak conversion path is cheap to fix in a text document. It is expensive to fix once you have laid out an entire visual wireframe around it.

Define the heading hierarchy with semantic labels

A heading hierarchy ensures your page has a logical reading structure. It tells both users and search engines which text is most important and how sections relate to each other.

Return to your content map on the 03 - Content Architecture page.
Annotate each text element with its semantic level. Use a different text color (such as a blue or red) or place a label next to each element. Mark them as: H1, H2, H3, body, or CTA.

Follow these rules when assigning levels:

Your page has exactly one H1. This is your Hero heading.
Each major section heading (Social Proof, Features, How It Works, Testimonial, Pricing/CTA) gets an H2.
Sub-headings within a section (like the 3 individual benefit names inside Features/Benefits) get an H3.
Supporting sentences and descriptions are labeled body.
Button text is labeled CTA.

Why annotate with heading levels?

Heading hierarchy is an information architecture tool, not just a visual styling choice. A single H1 tells the reader (and screen readers) what the page is fundamentally about. H2s create scannable landmarks. H3s add detail within those landmarks.

When you move to wireframing, these levels translate directly into visual weight. Your H1 will be the largest text on the page. H2s will be noticeably smaller but still prominent. This hierarchy guides the reader's eye down the page in the order you intend.

Once all elements are labeled, do a final scan. Confirm you have exactly 1 H1, 5-6 H2s, 3 H3s (one for each benefit), and at least 2 CTAs.

Not sure where to place the labels?

You can place your hierarchy labels either inline before the text (like "[H2] Simple task management for busy freelancers") or as small colored text layers positioned to the left of each content block. Pick whichever method keeps your page readable.

If your annotations are hard to distinguish from the content itself, try using a bright color like red or blue at a small font size (10-12px) next to the content text.

Help me organize my heading hierarchy labels in Figma

Your content architecture is now locked in. Every section has a clear purpose, real copy, and a defined place in the hierarchy. Next up, you will translate this text-only plan into a spatial layout with your first wireframe.

Create Low-Fidelity Wireframes

Your content architecture is complete. You have real copy, a clear heading hierarchy, and a defined section order. Now it's time to test whether that structure actually works when arranged spatially on a page.

A wireframe is the spatial proof of your content strategy. By using only grey shapes and real text, you strip away all visual distraction and force yourself to validate one thing: does the information hierarchy make sense when a visitor scrolls through it?

In this step, get ready to:

Build a full-page desktop wireframe using grey rectangles, lines, and real text from your content architecture.
Annotate key layout decisions with reasoning tied to your competitive research.
Review the wireframe for reading pattern alignment and above-the-fold visibility.

Set up the wireframe frame

A wireframe uses no color, no real images, and no decorative styling. Grey and white only. This constraint is intentional.

It keeps you focused on placement, spacing, and visual weight through size alone. If the page makes sense in grey, it will make sense with any visual treatment applied later.

In the left sidebar of your Figma file, switch to the 04 - Wireframe page.
Press F to activate the Frame tool.
In the right panel under Design, set the frame width to 1440 pixels. Leave the height unconstrained for now. You will extend it as you add sections.
Click on the canvas to place your frame.

Now build each of the 7 sections from your content architecture as blocks inside this frame. Follow these rules strictly:

Use grey rectangles as placeholder boxes for any images. Label each placeholder with an x or a descriptive label like "Hero Image" or "Testimonial Avatar."
Use your actual heading and body text from the content architecture page. Do not use lorem ipsum. Copy your H1, H2, H3, body copy, and CTA text directly from Step 3.
Use only grey and white. No brand colors, no gradients, no shadows.
Use lines or subtle grey dividers to separate sections visually.

Start at the top of the frame with your Hero section. Place the H1 heading text large and prominent.
Add a grey rectangle beside or below the headline as the hero image placeholder.
Place your CTA button text inside a grey rounded rectangle.
Continue down the frame adding Social Proof, Features/Benefits, How It Works, Testimonial, Pricing/CTA, and Footer sections in order.

Why real text instead of placeholder content?

Lorem ipsum hides problems. Real copy reveals whether a heading is too long for its container, whether body text creates awkward line breaks, and whether CTAs feel natural in their position.

By using the exact text from your content architecture, you are testing both the layout and the copy simultaneously. If something feels off here, you can fix it before investing in visual design.

Size reflects hierarchy

Make your H1 visually dominant (large text, generous whitespace around it). H2 headings should be noticeably smaller than H1 but still clearly section headers. Body text stays small and compact. This size difference alone should communicate the page's information hierarchy.

Annotate your layout decisions

Every layout choice you make should be intentional. Annotations prove that your decisions come from research, not guesswork.

For each section, decide on the specific layout approach. Is your hero split (text on the left, image on the right) or centered? Are your feature cards in a 3-column grid or stacked vertically? Is the CTA floating in the hero or anchored at the bottom of a section?
Reference your research annotations from Step 2 to justify each choice. What did you observe working well on competitor sites?

Select the sticky note tool by pressing Shift+S or by clicking the arrow next to the shape tools in the toolbar.
Place a sticky note beside each key layout decision in your wireframe.
Write a short explanation of why you chose that layout, referencing your research patterns.

Aim for at least 3-4 annotations across your wireframe. Focus on the decisions that would not be obvious to someone seeing the wireframe for the first time.

What do good annotations look like?

A useful annotation connects the what to the why. Here are some examples:

"Split hero: keeps headline scannable while showing product UI. 4 out of 5 competitors used this pattern."
"Social proof directly under hero: research showed all top performers place trust signals within the first scroll."
"3-column feature grid: mirrors the 3 key benefits from our brief. Avoids long vertical scrolling."

Review the wireframe as a user would

Your wireframe is not finished until you have reviewed it through the lens of a first-time visitor. This review catches spatial problems that are invisible when you are building section by section.

Press Cmd+1 (macOS) or Ctrl+1 (Windows) to zoom the frame to fit your screen.
Scroll slowly from top to bottom, simulating a visitor landing on the page for the first time.

As you scroll, check these three things:

Above-the-fold visibility. Is your headline and primary CTA visible without scrolling? If not, move elements up or reduce spacing until both are visible in the top ~900px of the frame.
Visual rhythm. Is there consistent spacing between sections? Do dense sections alternate with breathing room? Adjust any section that feels cramped or lost in whitespace.
Reading pattern alignment. Consider the natural F-pattern (scanning left-aligned content top to bottom) or Z-pattern (eyes move across a hero, down diagonally, then across again). Does your content placement match how eyes naturally travel?

Make any adjustments to spacing, element sizes, or placement based on your review.
If you moved anything significant, add a sticky-note annotation explaining the change.

What are F-pattern and Z-pattern?

These are well-documented eye-tracking patterns for how people scan web pages. The F-pattern applies to text-heavy pages: readers scan the top horizontally, then move down the left edge, scanning shorter horizontal lines. The Z-pattern applies to pages with strong visual blocks: eyes go across the top, diagonally down to the left, then across the bottom.

For a SaaS landing page with a split hero, the Z-pattern is most relevant. Your headline catches the eye top-left, the hero image pulls it top-right, then it drops down to the next section. Placing your CTA along this natural path increases its visibility.

Wireframe feeling too long or overwhelming?

If your wireframe scrolls excessively, check whether your section spacing is too generous. Tighten the gaps between sections. Also check whether your features section is taking up too much vertical space. A 3-column grid compresses three benefits into one row instead of three stacked blocks.

Help me decide how much spacing to use between wireframe sections.

Your wireframe validates that your content architecture works as a spatial layout. Every section has its place, every heading carries visual weight through size, and your annotations document the reasoning behind each decision. Next up, you will translate this structural foundation into a visual direction with mood, color, and typography.

Establish Visual Direction

Your wireframe proves that the content architecture works spatially. Every section has a clear place, the hierarchy reads well, and you know the layout decisions are grounded in research.

Now it is time to answer the question: what should this page feel like? In this step, you will create a visual direction artifact that translates your brief's tone into concrete design decisions.

In this step, get ready to:

Build a moodboard with visual references and a direction statement.
Choose a type pairing with written rationale.
Define a 5-color palette labeled with hex values and purposes.

Create a moodboard

A moodboard captures the emotional direction of a design before you commit to specific fonts or colors. It is the bridge between your brief's tone words and actual visual decisions.

Switch to the 05 - Visual Direction page in your Figma file using the page list in the left sidebar.
Open your browser and search for visual references that match the tone from your brief: friendly, clear, confident, not corporate.
Collect 6-10 images. These can be screenshots of websites you admire, color photographs, texture references, or typography specimens.
Paste each image onto the 05 - Visual Direction page and arrange them into a loose grid or cluster.
Below (or beside) your images, add a text layer with a 1-2 sentence direction statement summarizing the visual feeling.

What is a direction statement?

A direction statement distills your moodboard into words. It gives you a quick gut-check when making later decisions: does this font feel like what I described? Does this color match the mood?

For Taskflow, yours might read: "Clean and airy with warm accent colors. Feels approachable, like a helpful friend, not a corporate dashboard." Adjust the wording to match whatever feeling your collected references communicate.

Where to find visual references

Dribbble, Behance, and the same SaaS galleries you used in Step 2 are great starting points. You can also pull from outside the web design world. A warm photograph, a book cover, or a piece of packaging that captures the right feeling works just as well.

Your moodboard should have 6-10 images arranged on the page with your direction statement visible nearby.

Choose a type pairing

Typography carries tone. The font you choose for headings communicates personality at a glance, while the body font determines whether the page feels readable and trustworthy.

Open Google Fonts in your browser (fonts.google.com) and browse for a heading font that matches your direction statement.
Select a body font that pairs well with your heading choice. It can be the same family at a different weight, or a complementary font.
Back in Figma, create a new section on your 05 - Visual Direction page below the moodboard.
Type your heading font name and display it at three sizes: H1 (48-64px), H2 (32-40px), and H3 (20-24px).
Type your body font name and display it at 16-18px.
Below the font samples, add a text layer with a brief rationale explaining why this pairing works for the Taskflow brand.

What makes a good rationale?

Connect the font's visual characteristics back to the brand tone. For example: "Inter for headings: geometric, modern, friendly. The rounded terminals feel approachable. Paired with Inter for body at regular weight for consistency and clarity."

Name specific features you notice (rounded vs. sharp terminals, tall x-height, open apertures) and explain how they reinforce the tone from your brief.

Fonts available in Figma

Figma includes a curated selection of Google Fonts in its native font menu. Search directly in Figma's font picker. If a font you found on Google Fonts is not showing up, you may need to install it locally on your computer first.

You should now see your heading font at three sizes and your body font at one size, with a written rationale connecting the choices to Taskflow's tone.

Define a color palette

Color is the most emotionally immediate design decision. A palette grounded in your moodboard and brief prevents the common trap of picking colors that "look nice" but conflict with the brand's intended feeling.

On the 05 - Visual Direction page, create a new section below your type pairing.
Draw 5 rectangles side by side. These will be your color swatches.
Choose up to 5 colors with these roles:

One primary action color (for CTAs and buttons).
One neutral dark (for text).
One neutral light (for backgrounds).
1-2 accent or supporting colors.

Fill each rectangle with its chosen color using the fill panel on the right side of Figma.
Below each swatch, add a text label with the hex value and its purpose (e.g., "#FF6B6B - Primary action / CTA").
Below the full palette, add a text layer with a brief rationale explaining how the colors connect to your moodboard and brief tone.

How do I pick the right colors?

Look at the dominant colors in your moodboard. What hues keep appearing? Pull directly from your reference images using an eyedropper or color picker tool.

For Taskflow's "friendly, clear, confident" tone, warm colors (corals, soft oranges, warm yellows) tend to feel approachable. Cool neutrals (slate greys, off-whites) keep things professional without feeling corporate. Your primary action color should have enough contrast against white to pass as a clickable button.

Palette feeling disconnected from the moodboard?

If your colors look good individually but do not feel cohesive with your references, try using Figma's eyedropper tool directly on your moodboard images. Pull 2-3 colors from the images themselves, then adjust for accessibility and clarity.

Help me connect my palette to my moodboard

Your visual direction page should now contain three distinct sections: a moodboard with direction statement, a type pairing with rationale, and a labeled color palette with rationale.

Secret mission

Design a Mobile Wireframe

Your desktop wireframe works beautifully at 1440px. But most visitors will see your landing page on their phone first. Can you adapt your layout for a 375px screen without just shrinking everything down?

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project runs entirely in Figma's free Starter plan, so there are no ongoing costs.

Resources you used:

Figma Design file "SaaS Landing Page - Design Process" in your Drafts.
Any competitor screenshots saved locally during the research step.

Keep everything running

No action needed. Choose this if you're still actively building or plan to reference your design process file for future projects.

Your Figma file stays in Drafts indefinitely at no cost.
Drafts are unlimited on the Starter plan, so this file will not count against your 3-file team project limit.

Pause - I'll come back to this later

Since your file lives in Figma's cloud and there are no running processes, there is nothing to pause. Your file is already in a dormant state by default.

Your file will remain in Drafts whenever you return.
If you want to tidy up, rename the file with a date suffix (e.g. SaaS Landing Page - Design Process - June 2026) so future-you knows where you left off.

Delete - I don't want to use this again

Remove all project resources and start fresh.

In Figma, open your Drafts from the left sidebar.
Right-click the SaaS Landing Page - Design Process file and select Delete.
If you saved any competitor screenshots to your local machine during the research step, delete those from your Downloads or Desktop folder.

That's a Wrap!

Nice work! You just completed a professional content-first design process for a SaaS landing page, all inside a single Figma file.

You've learned how to:

Conduct structured competitive research from curated SaaS inspiration galleries and extract actionable design patterns that inform layout and content decisions.
Build a content-first architecture map with real copy, semantic heading hierarchy, and defined section purposes before touching any visual layout.
Create a complete design foundation from design brief through low-fidelity wireframe and visual direction (moodboard, type pairing, and color palette) where every decision traces back to research and strategy.
Secret Mission: Adapted your desktop wireframe into a responsive mobile layout with intentional decisions about content reflow, touch targets, and progressive disclosure.

Ready to quiz yourself?