Lesson 4: Navigating Figma

In this lesson, Mickey, the head of design, guide us through navigating Figma, the platform used for designing ads and landing pages.

This lesson covers the Figma layout, drafting process, revision identification, and best practices for communication with the design team.

Introduction to Figma

We cover the importance of Figma as the primary tool for designing all ads and landing pages for Ad Conversion clients.

The key areas that will be covered in the lesson are:

1. Figma Layout Overview: Understanding the hierarchy and structure within Figma.

2. Drafting Process: How designs progress through revisions.

3. Leaving Comments and Communication: Best practices for interacting with the design team.

Figma Layout Overview

Project and Design File Hierarchy

• Project Folder: Clients are invited to a folder named after their company.

• Design Files: Each ad campaign gets its own design file within the project folder.

• Pages: Within each design file, there are various pages for landing pages, ad pages, and reference assets. Archive pages store old revisions of designs.

We demonstrate navigating these levels, starting from the project folder, moving into a specific design file, and then showing the pages within that file.

Drafting Process

• Initial Design: The first draft is created and labeled as R1.

• Revisions: As changes are made, new revisions are created (R2, R3, etc.). The most recent revision is always placed at the top of the ad space within the design file.

Leaving Comments and Communication

How to leave comments in Figma and communicate with the design team:

1. Finding the Most Recent Revision: Designers will provide a direct link to the relevant section in Figma, ensuring clients can easily locate the latest version.

2. Adding Comments:

• Hover over the desired area, press “C” on the keyboard or click the comment icon.

• Enter your comment and tag relevant team members (e.g., the designer or yourself) to ensure they receive notifications.

• Comments can include images, emojis, and links for clarity.

3. Best Practices for Comments:

• After leaving several comments, notify the designer via ClickUp by tagging them and linking to the Figma file. This ensures designers are aware of the feedback.

• Use the comment icon to view and manage comments in the right-hand panel, marking them off as addressed.

Navigating Figma

Tips and shortcuts for navigating Figma efficiently:

• Selection Tool (V): Allows you to select elements on the canvas.

• Hand Tool (H): Enables you to drag around the canvas.

• Zooming: Use the trackpad gestures or keyboard shortcuts (Command +/-, Z to zoom in, and Z + Option to zoom out).

• View Management:

• Use Command + Backslash to toggle sidebars.

• Use the presentation view for a full-screen display of individual frames, with options to fit to screen for a clearer view.

Note on Editors in Figma: As a standard, we reserve editor access for our internal design team. For clients, we share view access which allows viewing, sharing, commenting, and downloading from Figma. If a certain person from the client's team needs editor access, it can be granted temporarily, but will be removed later in a monthly audit.

Previous: Lesson 3 - Navigating ClickUp Next: Lesson 5 - Help Center