Figma from Scratch — Your First Interface

About this course

Figma is the industry standard — every product team in MENA from Vezeeta to Careem to small agencies use it daily. We don't teach Figma in the abstract; we design a real food-delivery app together over the course, picking up tools as we need them. By the end you've made onboarding screens, a home feed, a product detail, and a checkout — all with components, auto-layout, variants, and a clickable prototype to share.

What you'll cover

• 1

  Figma in 30 minutes — frames, shapes, and the basics

  Set up your file. Frames vs groups. The 5 keyboard shortcuts you actually need.

• 2

  Color, type, and the foundations of UI

  Picking a palette. Type scale. The visual rules that separate amateur from professional.

• 3

  Auto-layout — the single biggest time-saver

  Make designs that respond to content. Stop manually nudging elements forever.

• 4

  Components and variants

  Build a reusable button, then a card, then an icon set. Variants for state (hover, active, disabled).

• 5

  Designing the home and product screens

  Pulling in real images, real prices in EGP/SAR, and the layout that actually converts.

• 6

  Checkout flow and edge cases

  Empty states, error states, success. The screens that betray amateurs.

• 7

  Prototyping and the handoff

  Make screens click together. Share a prototype URL. The dev-handoff dance.

Skills you'll build

• Figma
• UI design
• auto-layout
• components
• variants
• prototyping
• design systems
• mobile design