FIGMA BASICS
This post contains affiliate links, which means I will earn a small commission on purchases made through these links
Figma Basics
Figma is a cloud-based design tool used for:
Wireframing
Prototyping
Collaboration
Unlike Photoshop or Sketch, Figma works entirely in your browser (or desktop app) and allows real-time collaboration.
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.
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.
Click on the Prototype tab.
Drag arrows from one frame/button to another to create interactions.
Set transitions (e.g., slide, dissolve).
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.
Components: Reusable design elements (e.g., buttons, icons).
Styles: Save colors, text styles, and effects for consistency.
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
.
Comments