FIGMA BASICS

 This post contains affiliate links, which means I will earn a small commission on purchases made through these links

Let’s cover Figma Basics — a simple guide to get you started.

Figma Basics

What is Figma?

 Figma is a cloud-based design tool used for:

UI/UX design

Wireframing

Prototyping

Collaboration

Unlike Photoshop or Sketch, Figma works entirely in your browser (or desktop app) and allows real-time collaboration.

1️⃣ Figma Interface Overview

Toolbar: Where your tools (Move, Frame, Shapes, Pen, Text, etc.) live.

Layers Panel: Shows all elements in your file (left side).

Properties Panel: Allows you to adjust size, color, alignment, etc. (right side).

Canvas: The main design area where you build your designs.

Assets Panel: Where you can store reusable components.

2️⃣ Basic Tools

Move Tool (V): Select and move objects.

Frame Tool (F): Create frames (artboards) to organize screens.

Shape Tools (R for rectangle, O for oval, etc.): Draw basic shapes.

Text Tool (T): Add text layers.

Pen Tool (P): Draw custom paths and shapes.

Hand Tool (H): Pan across the canvas.

Zoom Tool (Z): Zoom in and out.

3️⃣ Creating a Simple Design

Create a Frame

Select the Frame Tool (F).

Choose a device size (e.g., iPhone 14).

Add Shapes

Use Rectangle (R), Circle (O), or other shapes.

Resize and position them on the frame.

Add Text

Select Text Tool (T).

Type your text and format it in the Properties Panel.

Apply Colors

Select any object.

Use the Fill option in Properties Panel to set color.

Use Stroke for borders.

Align & Distribute

Use alignment tools to organize elements neatly.

4️⃣ Prototyping Basics

Click on the Prototype tab.

Drag arrows from one frame/button to another to create interactions.

Set transitions (e.g., slide, dissolve).

5️⃣ Collaboration Features

Comments: Click the comment button to leave feedback.

Sharing: Use share link to collaborate in real-time.

Version History: Access previous versions of your design.

6️⃣ Components & Styles

Components: Reusable design elements (e.g., buttons, icons).

Styles: Save colors, text styles, and effects for consistency.

7️⃣ Shortcuts to Remember

Action

Shortcut

Move Tool

V

Frame Tool

F

Rectangle

R

Circle

O

Text

T

Pen Tool

P

Zoom In/Out

Z

Copy

Ctrl+C

Paste

Ctrl+V

8️⃣ Exporting

Select any frame or object.

Click Export in Properties Panel.

Choose format (PNG, JPG, SVG, PDF).

🎯 TIP:

 The best way to learn Figma is to practice. Start a small project — like designing a simple mobile 

Excellent! Let's proceed with a Step-by-Step Figma Mini-Project — a great hands-on way to learn.

Mini-Project: Simple Mobile App Login Screen

Goal:

Design a basic login screen for a mobile app using Figma.

Step 1: Set Up Your File

1️⃣ Open Figma and create a new design file.

 2️⃣ Select the Frame Tool (F).

 3️⃣ On the right panel, under Phone, choose a device (e.g., iPhone 13 Pro — 390 x 844 px).

Step 2: Add the App Title

1️⃣ Select the Text Tool (T).

 2️⃣ Type:

 Welcome Back!

 3️⃣ Set font size to 32 px.

 4️⃣ Center the text horizontally in the frame.

Step 3: Create Input Fields

1️⃣ Select the Rectangle Tool (R).

 2️⃣ Draw a rectangle for the Email input:

Width: 320 px

Height: 50 px

Corner radius: 8 px

3️⃣ Apply a light gray fill color (#F2F2F2).

 4️⃣ Duplicate this rectangle (Ctrl + D) and place it below for the Password input.

 5️⃣ Use the Text Tool (T) to label each box:

Inside first box: Email

Inside second box: Password

Set font size: 16 px

Step 4: Add a Login Button

1️⃣ Use the Rectangle Tool (R).

 2️⃣ Draw a button:

Width: 320 px

Height: 50 px

Corner radius: 8 px

Fill color: #007BFF (or any blue).

3️⃣ Add text: Log In

Center it on the button.

Font size: 18 px

Text color: White

Step 5: Add "Forgot Password" Link

1️⃣ Use the Text Tool (T).

 2️⃣ Type: Forgot Password?

 3️⃣ Set font size: 14 px.

 4️⃣ Place it below the password field.

Step 6: Preview

1️⃣ Use the Present button (top-right corner) to preview your design.

 2️⃣ Zoom out to see the full frame if necessary.

Step 7: Prototype (Optional)

1️⃣ Switch to the Prototype tab (right panel).

 2️⃣ Link the Log In button to another frame or page to simulate navigation.

Step 8: Export

1️⃣ Select the full frame.

 2️⃣ Go to the Export section in the right panel.

 3️⃣ Export as PNG to share your design.

✅ Congratulations — You’ve built your first design in Figma!

Focus Ar

Interface, basic tools, frames, shapes,

Alignment, layers, properties, colors

Prototyping basics, transitions, interactions

Components, auto-layout, reusable styles

Design systems, advanced prototyping, 

Collaboration, feedback, version 

.