Figma for Beginners: How to Design Your First Landing Page (Step-by-Step Guide)

Let me be honest with you from the start.

As any novice knows, when first opening up Figma, he freezes. There are panels all around, unfamiliar tools to use, a blank canvas looking straight into your eyes, and an inner voice saying "I have no clue where to begin."

This is totally natural. And this guide is intended to fix it.

By the end of reading this, you will have progressed from "I've never even seen Figma before" to having an entire professional landing page created right in front of you from scratch. Not a partially done one. Not something taken from a template. Something original, that was designed right in front of your very eyes, choice by choice, step by step.

Not requiring any design degree. No prior experience needed either. Just an Internet connection, a free Figma account, and some two or three hours of your time.

Let's get started.

What Is Figma and Why Should Beginners Learn It in 2026?

Figma is a web application used by designers of UI and UX, product teams, startups, and freelancers to design websites, mobile applications, dashboards, logos, slides, and any other design that fits on the screen. As of 2026, it is the most popular design application for professionals.

The reason why Figma is an exceptional design tool for beginners is the fact that you use it only in your web browser. You do not have to install expensive software. You do not have to have an expensive laptop. You register yourself for a free account at figma.com, create a new file, and in 60 seconds you are designing.

Designing skills are one of the most demanded skills in Nepal's growing technology market. Irrespective of whether you want to become a UI/UX designer, work in digital marketing, design products as a developer, or become a freelancer working for foreign clients, knowing Figma would make you more employable. Knowing which tech skills are demanded in Nepal currently will give you an idea about the place of design skills in the overall career context.

And for students and freshers who want to start building a portfolio immediately, a well-designed landing page in Figma is one of the most impressive and versatile portfolio pieces you can create.

Step 1: Create Your Free Figma Account and Set Up Your First File

Go to figma.com and click "Get started for free." Sign up with your Google account or email. The free plan gives you unlimited personal projects with up to three collaborators, which is more than enough to build a complete landing page.

After entering into the Figma interface, clicking on the plus sign or “New design file” option would result in creating a new design file. The design file will automatically get the name “Untitled.” After double clicking on it, you need to change its name according to the need; for example, “My First Landing Page.” This is a simple trick which becomes very important in case you want to access any particular file from the twenty files that you have created.

You need to observe the four major sections in the Figma interface before starting anything.

The left section is your Layers section. All elements you create are saved there in an orderly fashion. In other words, it is just like pages of paper stacked up. An element that is at the top is always placed in front of all the elements in the design canvas.

Your Canvas is located at the center. All the designing process takes place here. Zoom in with Ctrl + “+” and zoom out with Ctrl + “-.” Press Shift + 1 to fit everything to your screen.             On your right, you see the Properties pane. The properties of whichever element on your canvas you select are displayed here in terms of size, color, typography, spacing, corner radius, etc.

The toolbar at the top gives you access to the essential tools that include Move Tool, Frame Tool, Shape Tools, Text Tool, and the Pen Tool. You are sure to use these tools within the confines of this tutorial.

Step 2: Create Your Frame (The Canvas for Your Landing Page)

Frame is the container of your design. It is like a page or a screen that you are designing. If it is a website landing page, the standard size of the frame would be 1440 by 900 pixels. This corresponds to the size of the viewport of a typical desktop browser.

To enable the Frame tool, press F on your keyboard. The options of presets will appear on the right. Select "Desktop" in order to receive a 1440 by 1024 pixel frame. Another way to create a frame is to click and drag on the canvas wherever you want in order to draw a frame, then set its width to 1440 pixels and height to 5000 pixels to make sure that you have enough vertical space for the landing page.

Now your frame appears as a white square on the canvas – everything will be located inside. Rename your frame in the Layers panel on the left: just double click on the name of your frame and enter "Landing Page".

Here is one useful fact regarding the frame: each section of your landing page will be a nested frame inside your main frame.

Step 3: Set Up Your Grid System

Before placing a single element, set up a grid. This is one of the most important habits you can build as a beginner designer, and it is the reason why professional designs look clean and intentional while beginner designs look random and misaligned.

Select your main frame by clicking on it. In the right panel, scroll down to the "Layout Grid" section and click the plus button to add a grid. Change the grid type from "Grid" to "Columns" in the dropdown. Set the number of columns to 12, the gutter (space between columns) to 24, and the margin (space on each side) to 80. Click the eye icon to make the grid visible on your canvas.

You will now see twelve columns overlaid on your frame in a soft blue color. Every element you place should align to these columns. Designing on a 12-column grid is the industry standard because it divides evenly into halves, thirds, quarters, and sixths, giving you maximum layout flexibility.

Grids are the invisible structure that makes good design feel effortless. Do not skip this step.

Step 4: Plan Your Landing Page Sections Before You Design

Here’s something that you will be skipping in your beginner tutorials which every professional designer always does – plan the structure of your page.

Your landing page isn’t an arbitrary set of sections. It’s a path through which the visitor goes from "I just landed on this site" to "I am ready to take action". Every section has its purpose and position in the order of events.

Use the following structure for your first landing page:

Navigation bar which is located at the top of the page and consists of your logo placed on the left side, navigation links which are placed in the middle, and call to action button on the right side. This is what your visitors will see first.

Hero section which is the most crucial part of your page. It is located immediately after the navigation and consists of a striking headline, a subheadline, call to action button and an illustration, mock-up, or an image. Your visitor should get the message in less than five seconds.

The Features Section gives an idea about what your product or service does. This section usually consists of three or four benefit blocks, each having an icon, a small title, and one or two lines of supporting text.

The Social Proof Section builds trust. This may be the client's logo, testimonials, statistics, or even snippets from case studies. The visitors need to trust that what you are selling is worth buying.

The Call to Action Section at the bottom of the page is your last chance to get your message through. This should be a clear-cut section with a strong headline and one button for action.

The Footer has links for navigation, copyright information, links to your social media accounts, and other necessary contact information.

Writing out these sections on paper beforehand will save you loads of time later in the design process.

Step 5: Design the Navigation Bar

To draw the frame, press F. Create a frame that covers the whole width of your main frame from left to right. The height of the frame should be 80 pixels in the right panel. Name this frame "Navbar" in the Layers panel.

Make the background of your navbar white. To do that, click on the Fill color in the right panel and write ffffff.

Now we can start adding your logo. To do that, press T. Click inside the navbar on the left side in alignment with your first column. Enter your brand name. Choose the Inter (default clean font in Figma) font, size 24, weight Bold. The color should be dark – 1A1A2E or 0F172A.

Add navigation links. Press the T key and write "Home." Select the text and set its font properties: Inter; size 16; weight Regular; color 4B5563. Copy and paste this text element two times and rename texts in copied elements "Features" and "About." Evenly space all three texts in the middle of the navbar.

In order to add a call to action button, press R to create a rectangle. Set rectangle parameters: width - 140; height - 44. In the right panel, select corner radius 8 in order to give your button rounded corners. Choose an attractive color to fill your button: 6C63FF is a beautiful purple; 3B82F6 is a nice blue. Create text on top of the button: press the T key, write "Get Started," set color white; size 15; weight SemiBold. Group rectangle and text by selecting both of these elements and pressing Ctrl and G keys. Name this group "CTA Button."

Align all navbar elements using align tools in the right panel. Your navbar is ready.

Step 6: Design the Hero Section

This is the heart of your landing page and the part which requires the most thinking on your part. Take your time.

Add another frame under your navigation bar. The width needs to be 1440 and the height is 700. Give it a name, "Hero Section." Pick a color according to your preference; light gray like F8FAFC looks good or gradient backgrounds look amazing for hero sections.

Put your heading. Hit T and put your heading in the left side of the hero section in five columns of the grid. The heading should be catchy and benefit-driven. The heading structure for those who are beginners and are practicing on a landing page can be "Design Beautiful Products Without Years of Experience." Use Inter font. The size is 56. Weight is Bold. Line height is 1.2. Font color 0F172A.

Subheading below your heading in the same column arrangement. Font size is 20. Weight regular. Font color is 6B7280. Line height is 1.6. Two sentences supporting your heading which tells what your product actually does. E.g. "Figma makes professional design available for everyone. Start designing stunning layouts right now without a design degree."                                              

Place your Call to Action button beneath the subhead. Use the same button that you created for your navbar and edit its text. Make sure your hero’s button is slightly bigger than the others. Width – 180, Height – 52, Font size – 17.

Place an image on the right side of your hero using the Unsplash plugin from Plugins menu. Or you can create a rectangle with a gradient fill or an app interface screenshot. Your image must take up the approximate width of the last five columns in your grid. Choose your headline, subhead, and button. Group them by pressing Ctrl + G and rename the group “Hero Left.”

Step 7: Design the Features Section

Draw a new frame below the hero. Set the height to 500. Name it "Features Section." Give it a white background.

Add a centered section heading using the Text tool. Set it to 36, Bold, dark color, centered alignment. Something like "Why Designers Love Figma" works well as a section title.

Now create one feature block. Draw a rectangle 320 pixels wide and 220 pixels tall. Give it a light background like F1F5F9 and a corner radius of 12. This is your feature card.

Inside the card, add an icon at the top using the Iconify plugin (Plugins menu, search Iconify, choose any relevant icon like a lightning bolt, star, or chart). Set the icon to 40 by 40 pixels and give it your brand color.

Below the icon, add a short heading: Inter, 20, SemiBold, dark color. Add two lines of supporting text below that:  Inter, 15, Regular, gray color 6B7280.

Group everything inside the card and name it "Feature Card 1." Duplicate it twice using Ctrl and D. Change the icon and text in each duplicate. Arrange all three cards in a row across your features section, evenly spaced, all aligned to your column grid.

Step 8: Design the Social Proof Section

Frame below Features Height 300 "Social Proof". Background F8FAFC.

Title below this in center position in a smaller font: 24, SemiBold: something like “Trusted by Designers from Nepal and All Over the Globe”.

Below the title insert three testimonials one under another. For each of them create a card with a rounded rectangle background, insert quoted text in italic light style, and insert the name of the speaker under the quote in a smaller, grayed font.

If you prefer having a social proof section based on logos instead of testimonials, search for famous logos using Google Images or Unsplash plugin and put them in a horizontal line, coloring them all in the same gray color via color fill.

Step 9: Design the Final Call to Action Section

Create a frame below Social Proof frame. The name is "Final CTA". The background for this part is going to be darker. It is possible either to choose 0F172A color or use your main color. It is essential to have the different background from the one you used above.

The text of this section will include a huge headline that will be center-aligned. It will be in white color with 42px font and Bold text format. The headline can sound like "Ready to Start Designing? Your First Project Starts Today".

It will be followed by the subheadline in light white color (color ffffff with 70% opacity). The size of the subheadline is 18px with the Regular text format.

It is also necessary to create a huge, contrast button. It will be center-aligned and placed below the text. White background and your brand color for the text or any bright accent color will look perfect in this case.

Step 10: Design the Footer

Create a final frame at the bottom of the page with height 200. Use background color 1E293B or any other dark background that works well with your CTA block.

Insert your brand name at the left-hand side of the page in white color, bold font. Insert your tagline below it in lighter gray color.

Insert three to four navigational links in the middle or towards the right side of your footer, in white color, small font, i.e., font size 14, Regular. Insert copyright information in slightly smaller font size and gray color below it.

You can optionally use icons from social networking sites via Iconify.

Step 11: Apply Consistent Styles Throughout

At this point in the design process, review your entire design for three things.

One, make sure you have consistency in your colors. Your headings should all be the same dark color, your body texts the same gray, and your buttons the same brand color. If not, fix them now.

Two, check your spacing. There needs to be consistency in the distance between your sections. At least 80-100 pixels of vertical padding between sections is advisable. Cramped spaces are a very common beginner error.

Three, check your typography scale. It is necessary for your headline to look significantly larger than your section headings, which in turn need to look significantly larger than your body texts. A good scale would be something like 56 for the hero headline, 36 for section headings, 24 for card headlines, and 15-16 for body texts.

Step 12: Add a Prototype Flow (Optional but Impressive)

This is where we transform your Figma file into a prototype that becomes interactive, and it will take around five minutes.

Head to the "Prototype" tab located on the right side panel. Select your CTA button within the hero section. You will notice a small blue circle located on the right side of the CTA button. Drag it to the Final CTA section. You will see that the line is connecting. Add an interaction of "On Click" and select "Smart Animate" for the animation.

Repeat the same steps for your navbar CTA button, linking it to the Final CTA section.

Hit Ctrl + Shift + Enter (or you can also hit play icon) and open your prototype in the preview mode. Click the buttons and see how the page moves between different sections.

Step 13: Export Your Design

When the landing page design is completed, there are two export options available.

For sharing it on one’s portfolio, the Share button should be clicked in the upper-right corner of Figma and then the link should be copied. The access to this link should be set to “Anyone with the link can view” and shared. The link will open a prototype mode where everyone who clicks it will be able to view the design without having to sign up in Figma.

To export as an image, one should select the main frame, right-click and then select the option “Copy as PNG” or open the right panel and select the Export tab, click + next to it, select PNG or JPG and click Export. The 2x export option doubles the resolution and provides a more detailed result.

What to Do After You Finish Your First Landing Page

Creating your first landing page in Figma is a truly important achievement. But it’s just that, an achievement, a point from which you can begin.

This is how you should continue to make this skill useful for you professionally.

Redesign the same landing page again but this time without using the guide provided. Design it again in another way: dark theme, minimalism, full of colors. This will teach you more than several tutorials.

Build three to five more landing pages and collect them into a portfolio. Read the portfolio building guide for Nepal to understand exactly how to present your design work in a way that gets you noticed.

Make your work available to others. Put your Figma prototype link on your LinkedIn account. Show it in design forums. You will receive feedback that will make you improve faster than anything else.

Find out the basics of UI/UX design. This is another dimension of being a designer. Knowing why some designs are superior to other designs because of things like visual hierarchy, contrast, or spacing is what makes designers different from tool users.The Graphics Design with AI course at Knowlary builds exactly this kind of informed design capability alongside AI tools that make your workflow faster and more professional.

Start targeting internships and freelance opportunities. Landing page design is one of the most directly monetizable skills in Nepal's digital economy. Small businesses, startups, and entrepreneurs across Kathmandu are constantly looking for people who can design professional web pages. A portfolio of three solid Figma designs is enough to start taking on paid projects. Read how to get your first internship in Nepal to understand how design skills fit into the internship pipeline.

The Most Common Beginner Mistakes in Figma (And How to Avoid Them)

Too many fonts. Limit yourself to one font family with different weights. Inter, Poppins, or Plus Jakarta Sans will be perfect for landing pages without forcing you to make any extra decisions.

Inconsistent spacing. Choose a spacing system prior to anything else: 8px, 16px, 24px, 48px, 80px, etc., and use the same for every section. It is consistent spacing that allows designs with an easygoing visual style to appear professional.

No hierarchy. Every design requires some elements to stand out more than the other elements. The headline should appear more significant than the body text; the CTA button should seem more important than the navigation links. Otherwise, no elements will get any significance at all.

Avoiding a grid. We already discussed this in Step 3, yet again, it is worth repeating. Designs created without the use of a grid appear inconsistent in their visual style in the way that cannot be diagnosed but recognized easily by anyone who sees the design.

Copying without thinking. Nothing is wrong with studying landing pages for inspiration. However, if you copy someone else's work without knowing the reasons for certain design choices, you will not be able to make good choices yourself.

Final Thought

Every professional designer in the world began precisely where you find yourself today, with an empty sheet of paper and no clue how to begin but determined to try.

Landing page design and Figma design are both skills that can really be learned. The combination of these skills in Nepal's rapidly developing digital economy in 2026 provides opportunities in UI/UX design, digital marketing, product development, and freelancing that would have been much harder to access back then by five years.

The step-by-step instructions provided above give you all the information you need to create your very own landing page. But the only thing you really need to do at this point is to just start Figma and get going. Now, not tomorrow. Not when you're done learning some more. Just now.

This first landing page will not be perfect in any way. This is the whole point. You've created it, and you have the groundwork from which all future designs will arise.

Want to go deeper into design with AI tools, understand the career pathway for designers in Nepal, and build a portfolio that gets you hired? Explore Knowlary's Graphics Design with AI course and follow the Knowlary blog for practical career guides built specifically for Nepal's digital generation.

External Resources to Bookmark

• Figma Official Website is where you create your free account and start designing immediately with no downloads required.
• Figma Community has thousands of free templates, UI kits, icon packs, and design resources that you can open, inspect, and learn from directly inside Figma.
• Google Fonts gives you hundreds of free, professional-quality fonts. Figma has Google Fonts built in, so you can use any of them directly in your designs.
• Unsplash provides free, high-quality photography for your design projects. The Unsplash Figma plugin lets you access the entire library without leaving your file.
• Behance is the leading portfolio platform for designers. Create a Behance profile and post your landing page as your first public design project.
• Iconify Plugin for Figma gives you access to over 40,000 free icons directly inside Figma, covering every possible design need.