Figma Interface Overview

Introduction

• Focus on Figma's interface within the file browser.
• Cover general and core tools along with useful features.

Desktop App for Mac

• Tab Bar: Shows all open Figma files.
  • Right-Click Shortcuts:
    • Copy a link to the file.
    • Move file to a new window.
    • Open in split view (new feature).

File Interface Elements

• Sidebar (Left):
  • File Name: Editable, click to change.
  • Project Storage: Location of file.
  • Minimize UI Button: Shift + / to toggle UI.
    • Focus mode hides layers but shows properties.
    • Command + . hides everything except the canvas.
• Layers Panel:
  • Displays all elements on the canvas.
  • Shortcuts:
    • Collapse all layers with Option + L (Mac) or Alt + L (Windows).

Properties Panel (Right)

• Design and Prototyping:
  • Includes position, layout, appearance, and effects.
  • Selection Colors: Shows all colors in selection.
  • Export Options: PNG, JPEG, SVG, PDF.
  • Copy Design as PNG: Shift + Command + C.
  • Prototype Tab: Toggle with Shift + E.

Toolbar Overview

• Move Tool: Default tool for selection and navigation.
  • Selecting Items:
    • Command key for direct item selection.
    • Control + right-click to view layers under cursor.
• Scale Tool:
  • Resizes designs proportionally.
  • Shift key to lock proportions.
• Frame Tool:
  • Provides preset sizes for devices.
  • Customize frames for designs.

Creation Tools

• Shape Tool: Includes rectangles, ellipses, etc.
• Arrow Tool:
  • Shift key ensures straight or angled lines.
• Text Tool:
  • Insert text boxes with manual, auto-height, or auto-width options.

Useful Shortcuts

• Zoom and Fit:
  • Shift + 1: Zoom to fit everything.
  • Shift + 2: Zoom to selection.
• Layer Navigation:
  • Return: Drill down layers.
  • Shift + Enter: Move up layers.

Additional Features

• Actions Menu: Quick access to Figma commands.
• Responsive Prototypes: New feature for responsive design.
• Math and Scrubbing in Fields:
  • Perform calculations directly in input fields.
  • Scrub to adjust field values dynamically.

Conclusion

• This module covers the basics of Figma's interface.
• More features and details to be explored in future modules.
• Reach out with questions or for further assistance.