Skip to main content

Figma Basics

Content Plan: This document will cover essential Figma skills for developers working with design files.

Planned Sections​

Getting Started​

  • Creating a Figma account
  • Understanding the Figma interface
  • File organization (files, pages, frames)
  • Navigating the canvas (zoom, pan, shortcuts)

Working with Design Files​

  • Opening shared design links
  • Understanding view vs edit permissions
  • Locating specific pages/frames
  • Using the layers panel

Inspecting Designs (Dev Mode)​

  • Enabling Dev Mode
  • Reading spacing and dimensions
  • Extracting colors (hex, RGB, HSL)
  • Copying CSS properties
  • Exporting assets (SVG, PNG, JPG)

Understanding Components​

  • Recognizing components vs instances
  • Viewing component variants
  • Finding the source component
  • Understanding auto-layout properties

Extracting Assets​

  • Selecting exportable elements
  • Export format options and when to use each
  • Batch exporting multiple assets
  • Export settings for retina/responsive

Typography & Styles​

  • Identifying fonts and weights
  • Reading text styles
  • Understanding line height and letter spacing
  • Copying text content

Communicating with Designers​

  • Adding comments to designs
  • Asking clarification questions
  • Marking items as resolved
  • Version history basics

Keyboard Shortcuts​

  • Essential shortcuts for navigation
  • Selection shortcuts
  • Zoom controls
  • Quick actions