Design a SaaS Landing Page in Figma

Design a professional SaaS landing page in Figma using spacing, typography, and color rules.

Introduction

30 Second Summary

Every time you stare at a blank canvas wondering where to place things, you're experiencing the number one blocker for aspiring designers: decision paralysis. The fix isn't more creativity. It's rules that make every decision for you.

In this project, you will design a complete SaaS landing page in Figma for a fictional product called "FlowBoard," following explicit rules for spacing, typography, color, and layout that eliminate guesswork and produce professional results.

What You'll Build

A full desktop landing page design (1440px wide) with a hero section, features grid, testimonials, and call-to-action, built on a reusable design system of saved styles and components.

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

A complete SaaS landing page design with hero, features, testimonials, and CTA sections, all following an 8pt spacing grid and 12-column layout grid.
A reusable design system with saved text styles, color styles, and spacing rules you can apply to any future project.
A repeatable design process for going from a blank canvas to a polished UI using rules instead of guesswork.
Secret Mission: Make your landing page responsive by creating a mobile version (375px) using your existing components and design system.

Are there any prerequisites?

Just a free Figma account (Starter plan). No prior design experience required.

Set Up Your Figma File and Grid System

Every polished design starts with structure, not creativity. Before you add a single headline or button, you need a canvas with a grid system that tells you exactly where content belongs.

In this step, you'll create your Figma file, set up a desktop frame, and add a 12-column layout grid. You'll also establish the 8pt spacing system that eliminates guesswork for every padding and gap decision in the project.

In this step, get ready to:

Create a new Figma Design file with a Desktop frame.
Add a 12-column layout grid to your frame.
Establish your 8pt spacing reference for the entire project.

Create a new Figma Design file and frame

A frame in Figma is your design canvas. It defines the exact dimensions of the screen you're designing for. You'll use the Desktop preset to get a standard 1440 x 1024px frame.

In Figma, click Drafts in the left sidebar.
Click + Create in the top-right corner, then select Design file from the dropdown.
A new untitled file opens in the Figma Design editor.

Shortcut for creating a new file

You can also type figma.new in your browser's address bar to instantly create a new Design file.

Press F on your keyboard to enable the Frame tool.
In the right sidebar, expand the Desktop section.
Click the Desktop preset to add a 1440 x 1024px frame to the canvas.
Double-click the frame name in the left sidebar (it will say something like "Desktop") and rename it to FlowBoard Landing Page.

You should see a white rectangle on your canvas with the name "FlowBoard Landing Page" visible in the Layers panel on the left sidebar.

What is a frame in Figma?

A frame is a container with explicit dimensions that holds your design elements. Think of it as the browser window your landing page will be displayed in.

Frame presets give you standard device sizes so you never have to guess dimensions. The Desktop preset (1440 x 1024px) is the standard width for desktop web design.

Don't see frame presets in the right sidebar?

Make sure the Frame tool is active (press F). Frame presets only appear in the right sidebar when the Frame tool is enabled.

help me find the frame presets in Figma

Add a 12-column layout grid

A layout grid divides your frame into evenly spaced columns. It tells you exactly where to align content so everything looks intentional instead of randomly placed.

Click anywhere on your FlowBoard Landing Page frame to select it.
In the right sidebar, find the Layout guide section.
Click Add layout guide (the + icon). A uniform grid appears by default.
Click the layout guide settings icon (the grid icon to the left of the new guide entry) to open the settings.
Change the type from Uniform grid to Columns.
Set Count to 12.
Set Type to Center.
Set Width to 1140.
Set Gutter to 24.

Your frame now shows 12 red (or pink) vertical columns overlaid on the canvas, centered within the frame. This grid is your alignment guide for the rest of the project.

Why a 12-column grid?

Twelve divides evenly into 2, 3, 4, and 6. This gives you maximum layout flexibility. You can place content across 4 columns for a 3-column layout, 6 columns for a 2-column layout, or use all 12 for full-width sections.

The 24px gutters create breathing room between columns. The 1140px total width is a standard content width that leaves comfortable margins on a 1440px screen.

Don't see the grid overlay on your frame?

Make sure the frame itself is selected (not a layer inside it). Layout guides can only be applied to frames.

Also check that the layout guide visibility toggle in the right sidebar is turned on (the eye icon next to the guide entry should be visible).

help me see my layout guide columns in Figma

Set your 8pt spacing reference

Every padding, margin, and gap value in this project will use multiples of 8. This single rule eliminates the guesswork of "how much space should I put here?" for every decision you make.

Note these values somewhere visible (a sticky note, a note on your phone, or a comment on your Figma canvas): 8, 16, 24, 32, 48, 64, 96.
These are the only spacing values you will use for padding and gaps throughout this project.

What is the 8pt spacing grid?

The 8pt grid means every spatial value in your design is a multiple of 8 pixels. It creates a visual rhythm that makes layouts feel consistent and intentional.

Fewer choices mean faster decisions. Instead of debating between 13px, 15px, or 17px of padding, you pick 16px (2 x 8) or 24px (3 x 8). The math does the design for you.

Your canvas is ready. Next up, you'll build a typography system using a mathematical scale that makes font size decisions automatic.

Build Your Typography System

Your frame is set up with a 12-column grid that controls where content sits on the page. Now you need to decide how that content looks.

Typography is the single biggest factor in whether a design looks professional or amateur. Instead of guessing font sizes, you will use a mathematical ratio to generate a set of sizes that naturally look good together.

In this step, get ready to:

Create text layers using a mathematical type scale (Major Third ratio).
Save 5 reusable text styles in Figma.
Test that your type hierarchy reads correctly from largest to smallest.

Create your type scale text layers

A type scale is a set of font sizes generated by multiplying a base size by a fixed ratio. You will use the Major Third ratio (1.25x) with a 16px base, which produces clear contrast between levels without being too dramatic.

What is a type scale?

Instead of picking font sizes by feel, you multiply a base size (16px) by a ratio (1.25) to calculate each level. This means 16 x 1.25 = 20, 20 x 1.25 = 25, 25 x 1.25 = 31, 31 x 1.25 = 39, 39 x 1.25 = 49.

The result is a set of sizes that feel balanced because they share a mathematical relationship. You are not guessing. The math guarantees visual harmony.

Here are the five sizes you will create, with their properties:

Small = 13px, Regular weight, line-height 1.5.
Body = 16px, Regular weight, line-height 1.5.
H3 = 20px, Semi Bold weight, line-height 1.2.
H2 = 25px, Bold weight, line-height 1.2.
H1 = 49px, Bold weight, line-height 1.2.

Create the first text layer (H1) by following these steps:

Press T on your keyboard to activate the Text tool.
Click anywhere on the canvas (outside your frame is fine for now) and type Heading 1.
In the Typography section of the right sidebar, confirm the font is set to Inter. This is Figma's default font.
Set the font weight to Bold.
Set the font size to 49.
Set the line-height to 1.2 (click the line-height field next to the font size and type the value).

Now repeat this process to create the remaining four text layers:

Create a new text layer, type Heading 2, set it to Inter, Bold, size 25, line-height 1.2.
Create a new text layer, type Heading 3, set it to Inter, Semi Bold, size 20, line-height 1.2.
Create a new text layer, type Body text, set it to Inter, Regular, size 16, line-height 1.5.
Create a new text layer, type Small text, set it to Inter, Regular, size 13, line-height 1.5.

Why these specific weights?

Using three distinct weights (Regular, Semi Bold, Bold) creates clear visual separation between text levels. Headings use heavier weights so they anchor the eye. Body text uses Regular so it is comfortable to read in longer passages.

You should now have five separate text layers on your canvas, each with different sizes and weights.

Text not showing Inter font?

Inter is Figma's default font for new text layers. If you see a different font, click the font name in the Typography section of the right sidebar and type Inter to search for it.

help me fix my font settings in Figma

Save each text layer as a reusable style

Right now your text properties are set manually on individual layers. Saving them as text styles means you can apply the same properties to any future text layer with a single click.

Select your H1 text layer (the 49px one).
In the Typography section of the right sidebar, click the style icon (the four-dot grid icon to the left of the font name).
Click the + button to create a new style.
Name it H1/Bold and click Create style.

Repeat this for the remaining four text layers:

Select the 25px text layer, create a new text style, and name it H2/Bold.
Select the 20px text layer, create a new text style, and name it H3/Semi Bold.
Select the 16px text layer, create a new text style, and name it Body/Regular.
Select the 13px text layer, create a new text style, and name it Small/Regular.

Why the slash naming convention?

Figma uses the slash (/) in style names to create folder groups. Naming your style H1/Bold puts it in an "H1" folder, keeping your styles organized as the list grows.

Verify your styles are saved by clicking anywhere on an empty area of the canvas to deselect everything. In the right sidebar, look under Local styles to see all five text styles listed.

Don't see Local styles in the sidebar?

The Local styles section only appears after you have created at least one style. Make sure you clicked Create style (not just closed the modal) when saving your first text style.

help me find my saved text styles in Figma

Test your visual hierarchy

A good type scale creates a natural reading order. Your eye should move from the largest text down to the smallest without any two levels feeling the same.

Arrange all five text layers in a vertical stack on your canvas, from H1 at the top down to Small at the bottom.
Leave about 24px of space between each layer (eyeball it or hold Alt/Option while hovering to see spacing measurements).
Step back and look at the stack. Each level should feel distinctly different from its neighbours.

What should I see?

Your H1 (49px Bold) should immediately grab attention. H2 (25px Bold) should feel clearly secondary but still prominent. H3 (20px Semi Bold) sits between heading and body. Body (16px Regular) and Small (13px Regular) should feel comfortable for reading.

If any two adjacent levels feel too similar, the ratio is wrong. With the Major Third (1.25x) scale, you should see clear steps between each level.

✔️ Each level looks distinct

Your type scale is working. The mathematical ratio created natural visual contrast without any guesswork.

ⓧ Two levels look too similar

Double-check the font sizes and weights match the values above. The most common issue is accidentally setting H3 to Regular instead of Semi Bold, which makes it blend with Body text.

Select the text layer that looks wrong.
Check the font size and weight in the Typography section of the right sidebar.
Correct any values that do not match the table above.

You now have a complete typography system saved as reusable styles. Next up, you will build your color palette using another rule-based approach that guarantees accessible, professional-looking results.

Build Your Color Palette

Your typography system gives the page a clear reading hierarchy. Now you need color to bring that hierarchy to life and guide the reader's eye to the right elements.

In this step, you will pick 5 colors using a simple distribution rule, save them as reusable styles, and verify they meet accessibility standards. The rule-based approach means you never have to wonder "does this look right?" because the math answers for you.

In this step, get ready to:

Choose 5 colors using the 60-30-10 distribution rule.
Save each color as a reusable style in Figma.
Verify your color combinations pass WCAG AA accessibility contrast checks.

Choose your 5 colors using the 60-30-10 rule

The 60-30-10 rule is a color distribution formula borrowed from interior design. It tells you how much of each color to use across your page so the palette feels balanced without trial and error.

60% is your dominant, neutral background. It covers most of the page.
30% is your brand or primary color. It draws attention to CTAs and key sections.
10% is your accent color. It highlights small details like card backgrounds or icons.

Here are the 5 colors you will use for FlowBoard:

Background (60%): #F8F9FA — a near-white that feels clean without the harshness of pure white.
Surface (cards and sections): #FFFFFF — pure white for cards that sit on top of the background.
Text (body copy): #1A1A2E — a dark navy-gray that is softer than pure black.
Primary (30%, brand and CTAs): #2563EB — a confident blue that pops against the neutral background.
Accent (10%, highlights): #DBEAFE — a light blue tint for feature card backgrounds.

Why not pure black for text?

Pure black (#000000) on a white background creates maximum contrast, which sounds good but actually causes eye strain on screens. A dark navy-gray like #1A1A2E is easier to read for long passages while still passing accessibility checks.

Save each color as a reusable style

Saving colors as styles means you can apply them with one click across your entire design. If you ever want to change a color later, you update the style once and every element using it updates automatically.

Select the Rectangle tool from the toolbar (or press R) and draw a small rectangle anywhere on your canvas.
With the rectangle selected, look at the Fill section in the right sidebar.
Click the colored swatch next to Fill to open the color picker.
Type F8F9FA into the hex field at the bottom of the color picker.
Close the color picker by clicking anywhere outside it.

Now save this fill as a named color style:

With the rectangle still selected, click the style icon (four dots in a grid) next to the Fill color swatch in the right sidebar.
Click the + icon in the style picker panel to create a new style.
Name it Background/Light and click Create style.

What does the slash in the name do?

Figma treats slashes in style names as folder separators. Naming your style Background/Light creates a "Background" group with a "Light" style inside it. This keeps your styles organized as the list grows.

Repeat this process for the remaining 4 colors. For each one, change the rectangle's fill to the new hex value, then save it as a style:

Change the fill to #FFFFFF and save it as Surface/White.
Change the fill to #1A1A2E and save it as Text/Dark.
Change the fill to #2563EB and save it as Primary/Blue.
Change the fill to #DBEAFE and save it as Accent/LightBlue.

Verify your styles are saved by clicking the style icon next to Fill again. You should see all 5 color styles listed in the panel.

Don't see all 5 styles?

Make sure you clicked the + to create (not just apply) for each color. If a style is missing, select the rectangle, change its fill to the missing hex value, and repeat the save steps.

Help me find my saved color styles in Figma.

Verify your contrast passes WCAG AA

Accessible color contrast ensures that people with visual impairments can read your text. WCAG AA requires a minimum contrast ratio of 4.5:1 for body text and 3:1 for large text. You need to check two critical pairings in your palette.

Create a text layer on the canvas and type any word (e.g. "Test").
Set the text color to #1A1A2E (your Text/Dark style).
Draw a rectangle behind the text and fill it with #F8F9FA (your Background/Light style).
Select the text layer, then click the colored swatch next to Fill in the right sidebar to open the color picker.
In the color picker, click Check color contrast to open Figma's built-in contrast checker.
Confirm the contrast ratio shows at least 4.5:1 and that the AA indicator shows a pass (no warning icon).

What does this contrast ratio mean?

The ratio measures the brightness difference between your text color and its background. A 4.5:1 ratio means the text is 4.5 times brighter (or darker) than its background. Your Text/Dark #1A1A2E on Background/Light #F8F9FA produces a ratio of approximately 15:1, which comfortably passes.

Now check your second critical pairing:

Create another text layer and type "Button" in white (#FFFFFF).
Draw a rectangle behind it and fill it with #2563EB (your Primary/Blue style).
Select the white text layer, open the color picker, and click Check color contrast.
Confirm the ratio is at least 4.5:1 for normal text. For button text at 16px bold, the large text threshold of 3:1 also applies.

Auto-correct to the nearest compliant color

If the contrast checker shows a warning icon next to AA, click the indicator. Figma will automatically adjust the color to its nearest compliant value, so you do not have to guess.

Both pairings pass WCAG AA. Your palette is accessible by design, not by accident.

Contrast checker not appearing?

The contrast tool compares your selected layer's color (the foreground) against whatever is directly behind it on the canvas. Make sure the background rectangle is positioned behind your text layer. If the text is sitting on an empty canvas, the tool may not detect a background to compare against.

Help me use Figma's contrast checker to verify my colors.

✔️ Awesome, I've got all 5 color styles!

Great work. Double check that your Local styles panel shows all 5 entries: Background/Light, Surface/White, Text/Dark, Primary/Blue, and Accent/LightBlue.

ⓧ I'd like to double check my color styles

Here are the exact style names and hex values you should have:

Background/Light — #F8F9FA
Surface/White — #FFFFFF
Text/Dark — #1A1A2E
Primary/Blue — #2563EB
Accent/LightBlue — #DBEAFE

If any are missing, select your rectangle, change the fill to the correct hex, and save it as a new style with the matching name.

Your color palette is locked in with accessible contrast and a clear distribution. Next up, you will use these styles to design the hero section of your landing page.

Design the Hero Section

You now have a complete design system ready to go. Text styles, color styles, and a grid are all saved and waiting.

Time to put them to work. The hero section is the first thing visitors see on any landing page. It needs to communicate what FlowBoard does and invite users to act. You will build it piece by piece, applying your saved styles so every choice is intentional.

In this step, get ready to:

Create the hero section frame with auto layout and 8pt spacing.
Add a headline, subtitle, and CTA button inside the hero.
Apply your saved text styles and color styles to every element.

Create the hero section frame

Every section of a landing page lives inside its own frame. Auto layout makes that frame behave like a smart container that automatically spaces its children.

In the Layers panel on the left sidebar, click your FlowBoard Landing Page frame to select it.
Press F to activate the Frame tool, then draw a frame inside the landing page frame.
In the right sidebar, rename this new frame to Hero.
With the Hero frame selected, press Shift+A to add auto layout.
In the auto layout settings on the right sidebar, set the direction to Vertical.
Set alignment to Center.
Set the vertical (top/bottom) padding to 96.
Set the horizontal (left/right) padding to 24.
Under the width resizing dropdown, select Fill container so the hero stretches to the full width of the landing page frame.

Why 96px for the padding?

96 is 12 x 8. Every spacing value in this project is a multiple of 8. This makes your spacing feel consistent and rhythmic without having to eyeball anything.

Large sections like the hero use bigger multiples (96, 64) while internal gaps use smaller multiples (24, 16). The math does the design work for you.

Your Hero frame should now show auto layout controls in the right sidebar with all your padding values visible.

Don't see auto layout settings?

Make sure you selected the Hero frame itself (not the parent landing page frame) before pressing Shift+A. Check the Layers panel to confirm Hero is highlighted.

If you accidentally added auto layout to the wrong frame, select it and press Shift+A again to remove it, then re-select the correct frame.

Help me fix my auto layout settings in Figma.

Add the headline, subtitle, and button

A hero section needs three things: a headline that grabs attention, a subtitle that explains the product, and a call-to-action button that invites users to try it.

Double-click into your Hero frame to enter it.
Press T to activate the Text tool and click inside the Hero frame to create a text layer.
Type Ship projects faster with FlowBoard as the headline.
Press T again and click below the headline to create another text layer.
Type The project management tool that gets out of your way. as the subtitle.

Now you will build the CTA button. In Figma, buttons are built as frames with auto layout so the padding adjusts automatically around the text.

Press F to activate the Frame tool and draw a small rectangle below the subtitle text.
With the new frame selected, press Shift+A to add auto layout.
Set the vertical padding to 16 and horizontal padding to 24.
In the right sidebar, set the corner radius to 8.
Click the Fill color swatch in the right sidebar. Click the style icon (four dots) and select your Primary/Blue color style.
Double-click into the button frame. Press T and type Start Free Trial.
Select the button text. In the right sidebar, set the font weight to Bold and the text color to white (#FFFFFF).

Why build a button as a frame?

A rectangle with text on top breaks if you change the text. A frame with auto layout keeps padding consistent no matter what text you put inside it. This is how production-quality buttons are built in Figma.

Click the Hero frame name in the Layers panel to select the parent frame.
In the auto layout settings, set the gap between items to 24.

You should see your headline, subtitle, and button stacked vertically with equal 24px spacing between them.

Elements not stacking vertically?

Make sure all three elements (headline text, subtitle text, button frame) are direct children of the Hero frame. Check the Layers panel. They should be nested one level inside Hero.

If the button is sitting outside the Hero frame, drag it into the Hero frame in the Layers panel.

Help me fix the layout of my hero section in Figma.

Apply your saved styles and constrain the text width

The content is in place, but right now the text sizes are arbitrary. Applying your saved text styles ensures the visual hierarchy is mathematically correct.

Select the headline text layer ("Ship projects faster with FlowBoard").
In the Typography section of the right sidebar, click the style icon (four dots).
Select your H1/Bold text style.
Select the subtitle text layer and apply your Body/Regular text style using the same method.
Select the headline text. In the right sidebar under Fill, click the style icon and apply your Text/Dark color style.
Select the subtitle text and apply the same Text/Dark color style.

Now you will constrain the text width. Lines of text that stretch across the entire 1440px frame are unreadable. The ideal line length for body text is 50-75 characters.

Select both the headline and subtitle text layers (hold Shift and click each one).
Press Shift+A to wrap them in a new auto layout frame. This creates a text container.
With this text container selected, set its width to a fixed value of 680 in the right sidebar. This keeps your line lengths in the readable range.
Set the gap in this text container to 24 to maintain consistent spacing between headline and subtitle.

Why 680px for the text width?

At 49px (H1 size), 680px gives you roughly 50-60 characters per line. At 16px (Body size), it gives roughly 70-80 characters. Both fall in the comfortable reading range.

Without this constraint, your headline would stretch across all 1140px of the grid. That forces the reader's eye to travel too far between lines.

Your hero section is now complete. You should see a centered section with a large bold headline, a smaller subtitle beneath it, and a blue button at the bottom. All spacing is in multiples of 8.

Text styles not applying?

If you do not see your styles listed when clicking the style icon, make sure you are clicking the four-dot icon in the Typography section (for text styles) or next to Fill (for color styles). They are different style pickers.

If your styles appear but look different than expected, double-check that you saved them in the previous step. Look for them listed under Local styles in the right sidebar.

Help me apply text styles and color styles in Figma.

Your hero section is locked in with proper spacing, applied styles, and a readable text width. Next up, you will build the features, testimonials, and CTA sections to complete the full landing page.

Design the Features, Testimonials, and CTA Sections

Your hero section is live. Now it is time to fill out the rest of the landing page with the content sections that build trust and drive conversions.

Every landing page follows a pattern: hook the visitor (hero), show them why they should care (features), prove others trust you (testimonials), and ask for the action (CTA). In this step, you will build all three remaining sections using the same auto layout and spacing system you have been using.

In this step, get ready to:

Build a features section with a 3-column card layout.
Build a testimonials section with side-by-side quote cards.
Build a final CTA section with a bold blue background.

Build the features section

The features section shows visitors why your product is worth their time. You will create a section frame, an H2 heading, and a row of three feature cards.

Click an empty area of the canvas (outside the landing page frame) to deselect everything.
Select the Frame tool from the top toolbar (or press F).
Draw a new frame inside your FlowBoard Landing Page frame, directly below the Hero section.
With the new frame selected, press Shift+A to add auto layout.
In the right sidebar, set the auto layout flow to Vertical.
Set alignment to Center using the alignment box in the right panel.
Set Vertical padding (top and bottom) to 64 and Horizontal padding (left and right) to 24.
Set the width to Fill container so it stretches to the full width of the parent frame.
Rename this frame to Features in the Layers panel.

Why 64px padding?

64 is 8 x 8. Every spacing value in this project is a multiple of 8. This keeps the rhythm consistent across sections without you having to eyeball anything.

Inside the Features frame, add a text layer and type Why teams choose FlowBoard.
Select this text layer and apply your H2/Bold text style from the style picker in the right sidebar.
Apply your Text/Dark color style to this text layer.

Now you will create the three feature cards. Each card is its own auto layout frame arranged horizontally in a row.

Inside the Features frame (below the H2 text), add a new frame.
Press Shift+A to apply auto layout and set the flow to Horizontal.
Set the gap between items to 24.
Rename this frame to Cards Row.

Next, create the first feature card inside the Cards Row frame.

Inside the Cards Row frame, add a new frame.
Press Shift+A to apply auto layout and set the flow to Vertical.
Set padding to 24 on all sides.
Set the gap between items to 16.
Set the width to a fixed value of approximately 350px.
Set the corner radius to 12.
Click the + next to Fill in the right sidebar and apply your Accent/LightBlue color style.
Inside the card, add a text layer with a feature title (e.g. Visual Boards) and apply the H3/Semi Bold text style.
Add a second text layer below with a short description (e.g. Drag and drop tasks across customizable columns.) and apply the Body/Regular text style.
Apply your Text/Dark color style to both text layers.

Select the completed card frame, then duplicate it twice (Cmd+D on macOS or Ctrl+D on Windows) to create 3 cards total.
Update the titles and descriptions on cards 2 and 3. For example: Smart Automations and Team Insights.

Select the Features frame and set the gap between the H2 text and the Cards Row to 48.

What does this layout do?

You now have a vertical section frame containing an H2 heading with a horizontal row of three cards below it. The outer frame uses auto layout to stack items vertically, and the inner Cards Row uses auto layout to arrange cards horizontally.

This nesting pattern (vertical parent containing horizontal children) is how you build multi-column layouts with auto layout in Figma.

You should see a section with a bold heading and three light blue cards arranged in a row beneath it.

Cards stacking vertically instead of side by side?

Make sure the Cards Row frame has its auto layout flow set to Horizontal, not Vertical. Select the Cards Row frame and check the flow setting in the right sidebar.

If the cards overflow the frame, reduce each card's fixed width or widen the Cards Row frame.

Why are my feature cards stacking vertically instead of appearing in a row?

Build the testimonials section

Social proof builds trust. This section shows real quotes from users, displayed in clean cards on a subtly different background.

Below the Features section inside your landing page frame, add a new frame.
Press Shift+A to apply auto layout and set the flow to Vertical.
Set alignment to Center.
Set Vertical padding to 64 and Horizontal padding to 24.
Set the width to Fill container.
Click the + next to Fill and apply your Background/Light color style. This gives the section a slightly different tone from the features section above.
Rename this frame to Testimonials.

Inside the Testimonials frame, add a text layer and type What our users say.
Apply your H2/Bold text style and Text/Dark color style.

Now create the testimonial cards row.

Below the H2, add a new frame inside the Testimonials section.
Press Shift+A and set the flow to Horizontal.
Set the gap between items to 24.
Rename this frame to Testimonials Row.

Create the first testimonial card inside the row.

Inside the Testimonials Row, add a new frame.
Press Shift+A and set the flow to Vertical.
Set padding to 32 on all sides.
Set the corner radius to 12.
Apply your Surface/White color style as the fill.
Inside the card, add a text layer with a quote (e.g. FlowBoard cut our sprint planning time in half.) and apply the Body/Regular text style.
Below the quote, add another text layer with an author name (e.g. — Sarah Chen, Engineering Lead) and apply the Small/Regular text style.
Apply Text/Dark color style to both text layers.

Select the testimonial card frame and duplicate it once (Cmd+D or Ctrl+D) to create 2 cards total.
Update the quote and author name on the second card.

You should see two white cards side by side on a light gray background, each containing a quote and an author name.

Cards not appearing side by side?

Check that the Testimonials Row frame has its auto layout flow set to Horizontal. Also ensure the cards are nested inside the row frame, not directly inside the Testimonials section frame.

Help me fix my testimonial cards layout in Figma.

Build the final CTA section

The final CTA section is a bold, full-width block that gives visitors one last clear action. A strong background color makes it impossible to miss.

Below the Testimonials section inside your landing page frame, add a new frame.
Press Shift+A to apply auto layout and set the flow to Vertical.
Set alignment to Center.
Set Vertical padding to 96 (top and bottom). Set Horizontal padding to 24.
Set the width to Fill container.
Apply your Primary/Blue color style as the fill. This makes the section visually distinct.
Rename this frame to Final CTA.

Inside the Final CTA frame, add a text layer and type Ready to ship faster?.
Apply your H2/Bold text style.
Change the text color to white (#FFFFFF) so it is visible on the blue background.

Now add the CTA button.

Below the H2 text, add a new frame for the button.
Press Shift+A to apply auto layout.
Set Horizontal padding to 24 and Vertical padding to 16.
Set the corner radius to 8.
Set the fill to white (#FFFFFF) or apply your Surface/White color style.
Add a text layer inside the button with the label Get Started.
Set the button text to Bold weight and apply your Primary/Blue color style to the text. This creates a white button with blue text that inverts the section's color scheme.

Set the gap between the H2 and button in the Final CTA frame to 24.

Why invert the button colors here?

When a button sits on a colored background, you flip the color relationship to maintain contrast. The hero button was blue on white. The CTA button is white on blue. Same design system, different context.

You should see a bright blue section at the bottom of your page with white text and a white button.

White text not visible on the blue background?

Make sure the Final CTA frame's fill is set to your Primary/Blue color style, not the background color. Select the frame and check the Fill section in the right sidebar.

Help me fix the colors in my CTA section.

Secret mission

Make It Responsive (Mobile Version)

Your desktop landing page looks polished, but real users browse on phones. Can you adapt your entire design to a 375px mobile viewport using only your existing design system? The catch: your colors, type scale ratios, and spacing multiples stay the same. Only the layout direction and specific values change.

Clean Up Your Resources

This project runs entirely in Figma's free Starter plan, so there are no ongoing costs. Decide whether to keep your design file as-is, archive it to reduce clutter, or delete it entirely.

Resources you used:

Figma Design file containing both the desktop frame ("FlowBoard Landing Page") and the mobile frame ("FlowBoard Landing Page - Mobile").
Saved text styles (H1/Bold, H2/Bold, H3/Semi Bold, Body/Regular, Small/Regular).
Saved color styles (Primary/Blue, Background/Light, Text/Dark, Accent/LightBlue, Surface/White).
Reusable components (CTA Button, Feature Card, Testimonial Card).

Keep everything running

No action needed. Choose this if you plan to keep iterating on your FlowBoard design or want to reference your design system in future projects.

Your Figma file stays in your Drafts (or the project you saved it in) indefinitely on the free Starter plan.
Your saved text styles, color styles, and components remain available inside this file whenever you reopen it.

Pause - I'll come back to this later

Move the file out of your active workspace to reduce visual clutter. Your work is preserved and easy to find later.

In Figma, return to your file browser by clicking the Figma logo in the top-left corner.
Right-click your FlowBoard file and select Move to project... to move it into a dedicated "Archive" project, or simply leave it in Drafts.
Your styles, components, and both frames will be exactly as you left them when you reopen the file.

Delete - I don't want to use this again

Remove the entire Figma file. This deletes your frames, saved styles, and components permanently.

In Figma, return to your file browser by clicking the Figma logo in the top-left corner.
Right-click the FlowBoard file.
Select Delete.
The file moves to your Trash. To permanently remove it, click Drafts in the left sidebar, then click Deleted at the bottom of the sidebar, right-click the file, and select Delete forever.

Nice Work!

You just designed a complete SaaS landing page in Figma from a blank canvas. Every spacing value, font size, and color choice followed an explicit rule instead of guesswork.

You've learned how to:

Design a professional SaaS landing page (hero, features, testimonials, CTA) using the 8pt spacing grid and a 12-column layout grid for precise, intentional placement.
Build a reusable design system with saved text styles, color styles, and components that you can apply to any future project.
Create an accessible color palette using the 60-30-10 rule and verify it passes WCAG AA contrast requirements.
Secret Mission: Adapted your desktop design to a 375px mobile layout, proving your design system works across screen sizes without a full redesign.

Ready to quiz yourself?