Tools

Figma

02The curriculum

Modules and topics

15 modules, 118 topics.

المحتوى الأساسي8 modules

المحتوى الأساسي في المساحة، وبيشرح أساسيات المهارة دي.

01 — Figma Fundamentals Beyond the Basics

The Basics Most Designers Skip

Written

اللي اتعلم Figma بالتجربة و الخطأ فوّت التفاصيل اللي بتوفر ساعات. رجوع للأساسيات بعين أدق.

8 موضوع

  • The Basics Most Designers Skip
  • Frames vs Groups: The Real Difference
  • Layer Hierarchy That Matters
  • Selection and Keyboard Shortcuts for Speed
  • Constraints Before Auto Layout
  • The Properties Panel: Features We Ignore
  • Multiple Files vs One Big File
  • Performance: Why Files Slow Down and How to Avoid It

02 — Auto Layout Mastery

Auto Layout Is a Mindset, Not a Feature

Written

أكتر feature بيتستخدم غلط، و في نفس الوقت أكتر واحد بيفرق بين junior و senior.

8 موضوع

  • Auto Layout as a Mindset, Not a Feature
  • When to Use, When to Avoid
  • Padding, Spacing, Alignment as Design Language
  • Nested Auto Layout
  • Wrap Behavior
  • Min and Max Width and Height
  • Auto Layout vs Absolute Positioning
  • The 80/20 of Auto Layout

03 — Components & Variants

The System Inside Every Figma File

Written

الـ components مش symbols، دي system كامل ليه إدارة. الفهم ده بيوفر أسابيع.

8 موضوع

  • Component vs Instance vs Variant
  • Component Thinking: What Deserves to Be a Component
  • Variants Systems
  • Boolean Properties
  • Instance Swap
  • Component Overrides That Matter
  • Component Composition
  • Maintaining a Component Library

04 — Variables

The Foundation of Modern Design Systems in Figma

Written

الـ design system بقى بيتبني على variables مش styles. و الـ modes بتفتح باب الـ dark mode و الـ RTL و الـ multi-brand.

8 موضوع

  • Variables as Design System Foundation
  • Color Variables
  • Number Variables
  • String Variables
  • Boolean Variables
  • Modes: Dark Mode, RTL, Multi-Brand
  • Variable Scoping
  • Variables vs Styles: When What

05 — Styles & Design Tokens

The Token Layer Behind Every Great Library

Written

الـ styles و الـ variables طبقتين مختلفتين في نفس الـ system مش بدائل لبعض.

8 موضوع

  • Styles vs Variables: The Difference
  • Color Styles
  • Text Styles
  • Effect Styles
  • Grid Styles
  • Building a Token System From Figma
  • Token Naming Conventions
  • Exporting Tokens for Development

13 — Weekly Figma Challenges

One Technical Decision a Week

Challenge

تحدي بـ قيد تقني واضح كل أسبوع. الهدف تتدرب على جزء واحد من الأداة مش تصمم شاشة.

8 موضوع

  • Build a responsive landing page using only Auto Layout (no manual sizing)
  • Create a component with 5 variants and 8 boolean properties
  • Build a design system foundation (colors, type, spacing) using variables
  • Recreate a real app screen with proper Auto Layout structure
  • Build a prototype with interactive components and variables
  • Audit a Figma file: is the structure right? Auto Layout proper?
  • Build a component library for a small project (10 components minimum)
  • Set up Dev Mode for a real screen ready for handoff

14 — Figma Breakdowns

Learning From Real Design Files

Breakdown

أحسن طريقة تتعلم Figma إنك تفتح ملفات فرق بتشتغل بـ craft عالي و تشوف الـ structure بتاعهم.

8 موضوع

  • How Linear Designs in Figma
  • The Stripe Component Library on Figma Community
  • How Material Design 3 Is Organized in Figma
  • The Apple Design Resources Figma File
  • How Agencies Structure Client Files
  • The Vercel Design System in Figma
  • The Notion Design Library
  • Inside Figma's Own Figma File

15 — Workflow Sessions

Live Practice With the Community

Session

Figma بتتعلم بالممارسة مش بالمشاهدة. جلسات حية تشوف فيها مصممين تانيين بيفكروا إزاي جوه الأداة.

6 موضوع

  • Live Figma audits with community
  • Component design walkthroughs
  • Auto Layout debugging sessions
  • Variables workshop
  • Prototyping demos
  • Plugin recommendations and demos

محتوى السياق7 modules

المكان اللي المهارة دي بتقابل فيه باقي المساحات.

06 — Prototyping in Figma

From Static Mockups to Living Experiences

Written

مع الـ interactive components و الـ variables بقى ممكن تعمل prototypes فيها conditional logic.

8 موضوع

  • Prototyping Levels: Simple, Interactive, Advanced
  • Smart Animate
  • Interactive Components
  • Variables in Prototyping
  • Conditional Logic
  • After Delay and Triggers
  • Prototyping for Usability Testing
  • When to Use Figma, When to Use Another Tool

07 — Dev Mode & Handoff

The Bridge Between Design and Code

Written

Dev Mode مش preview mode، ده workflow كامل بيوفر على الـ developer أسابيع.

8 موضوع

  • Dev Mode Is Not Preview Mode
  • Setting Up Dev Mode Properly
  • Annotations
  • Measurements
  • Code Export Options
  • Tokens and Variables in Dev Mode
  • Communicating With Developers via Figma
  • The Handoff Workflow

08 — Collaboration & Multiplayer

Figma as a Team Sport

Written

أغلب الفرق بتستخدم Figma زي ما كانوا بيستخدموا Sketch. القوة الحقيقية في الـ collaboration.

8 موضوع

  • Real-Time Collaboration vs Async
  • Comments and Conversations
  • Branching
  • Merging Branches
  • Library Publishing
  • Working With Locked Files
  • Team Library Management
  • Permission Systems

09 — Plugins & Widgets

The Ecosystem That Multiplies Your Speed

Written

التحدي مش إنك تعرف plugins كتير، التحدي إنك تعرف تستخدم أنهي و تتجنب أنهي.

8 موضوع

  • Plugin Ecosystem Overview
  • Plugins Every Designer Should Have
  • AI Plugins
  • Productivity Plugins
  • Design System Plugins
  • Animation Plugins
  • Custom Plugin Development (Overview)
  • Widgets vs Plugins

10 — Figma for Design Systems

Building Systems That Scale

Written

الـ design system مش component library. ده system فيه tokens و documentation و governance، و بناؤه تفكير مختلف عن تصميم الشاشات.

8 موضوع

  • Design System in Figma as a System
  • Library Architecture
  • Foundation Tokens
  • Component Library Structure
  • Documentation in Figma
  • Version Control
  • Adoption Metrics
  • Maintaining the System Over Time

11 — FigJam for Design Process

The Collaboration Layer Most Designers Ignore

Written

FigJam أداة لوحدها بنقاط قوة مختلفة. اللي بيدمجها في الـ workflow بينقل الـ discovery و الـ research لمستوى تاني.

8 موضوع

  • FigJam vs Figma: When What
  • Discovery Workshops
  • Wireframing in FigJam
  • User Flow Mapping
  • Brainstorming Sessions
  • Client Collaboration
  • Templates for FigJam
  • FigJam in the Research Phase

12 — Figma Make & AI Features

The Future That's Already Here

Written

Figma بقت platform مش tool. اللي مش بيتابع تطورها بيخسر advantage كل سنة.

8 موضوع

  • Figma Make: What It Is and How It Works
  • AI Features in Figma
  • Make.com Integration
  • The Future of Figma and AI
  • Image Generation From Figma
  • Code Generation
  • Auto-Complete Features
  • When to Use AI Features, When Not To

افتح المساحة دي

المساحة دي جزء من الاشتراك. خطة واحدة بتفتحها وبتفتح كل اللي متاح غيرها.