Skip to content

Figma Basics

Figma is widely used for interface design, prototyping, and handoff.

  • Frames and auto layout.
  • Components and variants.
  • Typography and spacing systems.
  • Basic prototyping and interaction flow.
  • Use consistent naming for screens and components.
  • Define spacing and sizing tokens.
  • Document states (default, hover, error, disabled).
  • Share clear handoff notes for edge cases.

Design a small app flow:

  • Login
  • Dashboard
  • Settings

Then create a simple component library for buttons, inputs, cards, and alerts.

Figma is most useful when designs are systematic and implementation-ready, not just visually attractive.