Lesson Note: Getting Started with Figma (UI Tools & Frames)

Session Objectives

By the end of this session, students will be able to:

• Understand Figma’s interface and key features.

• Create and manage frames (artboards).

• Use essential UI tools (shapes, text, pen, images).

• Apply basic alignment, grouping, and layer organisation.

• Navigate the Figma workspace effectively.

1. Introduction (10 mins)

• Briefly explain what Figma is (a cloud-based collaborative design tool).

• Compare with other design tools (Adobe XD, Sketch, Photoshop).

• Emphasize real-time collaboration and accessibility (browser & desktop app).

2. Exploring the Figma Interface (15 mins)

• Walk students through the Figma dashboard (files, teams, templates).

• Open a new design file → explain the workspace layout:

  • Toolbar – move, frame, shapes, pen, text, hand, comments.

  • Layers panel – organizes all objects and frames.

  • Properties panel – edit properties (size, colors, effects).

  • Canvas – the main workspace.

• Demonstrate how to zoom, pan, and navigate efficiently.

3. Frames (Artboards) (20 mins)

• Explain what frames are (containers for UI design, similar to artboards in Adobe tools).

• Show how to:

  • Create a new frame (Frame tool “F”).

  • Resize frames using presets (desktop, tablet, mobile).

  • Nest elements inside frames.

• Practical Demo: Create a mobile screen frame (iPhone 14).

• Explain groups vs frames.

4. UI Tools Overview (25 mins)

• Shapes (R, O, L): Draw rectangles, circles, lines.

• Text Tool (T): Add headings, body text, adjust font, size, alignment.

• Pen Tool (P): Create custom shapes and icons.

• Image Tool: Place and mask images inside frames.

• Show alignment/distribution tools (top toolbar).

• Demonstrate grouping & layers arrangement.

5. Hands-on Practice (20 mins)

Mini Project:

• Students create a simple mobile login screen using:

  • A frame (mobile preset).

  • A rectangle (background).

  • Text fields (Username, Password).

  • A button (rectangle + text).

  • A logo/image at the top.

• Guide them step by step, encouraging them to explore the tools.

6. Best Practices & Tips (10 mins)

• Always use frames for screens instead of loose elements.

• Name layers and groups clearly for organization.

• Use alignment and spacing tools to maintain consistency.

• Explore shortcuts (e.g., T for text, R for rectangle, F for frame).

• Save work regularly (though Figma auto-saves).