What is Figma?


STEP 1-Understanding What Figma Is & Opening Your First File

What I will teach you in Step 1

In this step, you will learn:

  1. What Figma is used for 

  2. How to open Figma

  3. How to create your first blank design file

  4. How the Figma screen is divided (very important)

1. What is Figma?

Figma is not for coding.
Figma is used to:

  • Design website pages

  • Design mobile app screens

  • Show visual demos to clients

  • Plan UI/UX before development

Think of Figma as:

A digital whiteboard where you design websites and apps visually

2. Open Figma 

  1. Open Google Chrome

  2. Go to: figma.com

  3. Click Log in (or Sign up if new)

  4. Choose Free plan

After login, you will see the Figma Dashboard.

3. Create Your First Design File

On the dashboard:

  1. Click “New design file”

  2. A new tab will open — this is your design workspace


4. Understand the Figma Screen 

Image

Image

Your screen has 4 main areas:

(A) Canvas — Middle Area

  • This is your working area

  • You design everything here

  • Think of it as a blank paper

(B) Toolbar — Top

  • Tools like:

    • Move

    • Frame

    • Shapes

    • Text

  • We will use these one by one later

(C) Layers Panel — Left Side

  • Shows what elements exist

  • Like Photoshop layers

  • Very important for organizing designs

(D) Properties Panel — Right Side

  • Controls:

    • Size

    • Color

    • Fonts

    • Alignment

  • This is where design control happens

5. Your First Hands-On Action

  1. Look at the middle blank area

  2. Zoom using:

    • Ctrl + Mouse Scroll (Windows)

    • Cmd + Mouse Scroll (Mac)

  3. Practice:

    • Zoom in

    • Zoom out

  4. Drag the canvas with:

    • Hold Spacebar

    • Drag mouse

This builds basic hand control in Figma.

What You Should Have Achieved Now

You should now be comfortable with:

  • Opening Figma

  • Creating a file

  • Understanding where things are

  • Moving and zooming inside the canvas

No design yet — this foundation is critical.


STEP 2 — Frames (Creating Website & Mobile Screens)

What you will learn in this step

By the end of this step, you will:

  • Understand what a Frame is

  • Create website and mobile screens

  • Learn why everything in Figma starts with a Frame

This is the most important concept in Figma.

1. What is a Frame? 

In real life:

  • A website opens inside a browser window

  • A mobile app opens inside a phone screen

In Figma:

A Frame = Screen

No frame = no proper design.

2. Select the Frame Tool 

  1. Look at the top toolbar

  2. Click the Frame tool
    (Shortcut: press F on keyboard)

Image

Image

Image

When Frame tool is active:

  • The right panel changes

  • You will see device presets

3. Create a Website (Desktop) Frame

  1. With Frame tool selected

  2. On the right panel, find Desktop

  3. Click Desktop – 1440px

You will see:

  • A big white rectangle appear in the canvas

This is your website screen.

4. Rename the Frame (Very Important)

  1. Look at the left Layers panel

  2. You will see something like: Frame 1

  3. Double-click on it

  4. Rename it to:

Website – Home Page

(Professional habit. Never skip this.)

5. Create a Mobile App Screen (Side by Side)

  1. Press F again

  2. On the right panel → Phone

  3. Select iPhone 14 / 15 (any is fine)

Now you have:

  • One Website frame

  • One Mobile frame

Image

Image

Image

6. Move Frames Properly

  1. Press V (Move tool)

  2. Click on the frame border (not inside)

  3. Drag frames side by side

Practice selecting:

  • The frame

  • Not empty space

7. Resize Frame Height (Real Website Behavior)

Websites scroll vertically.

  1. Select Website – Home Page frame

  2. Drag the bottom handle downward

  3. Make it taller (around 2000px)

This simulates scrolling website content.

What You Should Have Now

You must have:

  • 1 Desktop frame (Home Page)

  • 1 Mobile frame

  • Both renamed properly

  • Frames placed neatly

This is the base of all UI design.



Popular posts from this blog