خطة تعلم Figma في 4 أسابيع (من الصفر)

قبل ما تبدأ

• جهاز كمبيوتر (ويندوز أو ماك) واتصال إنترنت
• حساب بريد إلكتروني (مثل Gmail)
• رابط التسجيل: figma.com
• للمراجعة لاحقا: كورس فيجما بالعربي 2025 - عادل جبر و كورس Figma 2026 - إيهاب فايز

كلمات سريعة ستمر عليك

1 إنشاء حسابك وفهم الواجهة

الهدف: تفتح Figma بأمان وتعرف تتحرك داخل الملف بدون خوف.

الخطوات

1. ادخل على figma.com واضغط Get started، ثم أنشئ حسابا مجانيا بالبريد.
2. بعد الدخول اختر فتح Figma من المتصفح (أسهل للمبتدئ). إن أحببت لاحقا يمكنك تحميل تطبيق سطح المكتب.
3. من الصفحة الرئيسية اضغط Design file لإنشاء ملف جديد، وسمّه مثلا: تدريبي-الاسبوع-1.
4. جرب التحريك والتكبير:
   • زر الوسط في الماوس أو Space مع السحب = تحريك اللوحة
   • عجلة الماوس أو Cmd/Ctrl + + / - = تكبير وتصغير
   • Shift + 1 = عرض كل شيء، Shift + 2 = التركيز على العنصر المحدد
5. من الشريط الأيسر جرب أدوات: Move (السهم)، Frame (F)، Rectangle (R)، Text (T).
6. ارسم مستطيلا صغيرا، حدده، ثم احذفه بـ Delete، وكرر مرتين حتى ترتاح.

الفيديوهات

2 الأشكال والنصوص والألوان والإطارات

الهدف: تبني شاشة بسيطة من أشكال ونصوص وألوان داخل Frame.

الخطوات

1. افتح ملف الأمس (أو أنشئ ملفا جديدا).
2. اضغط F واختر مقاس جوال جاهز مثل iPhone 14 (هذا هو الإطار = شاشة التطبيق).
3. داخل الإطار ارسم: مستطيلا في الأعلى (شريط عنوان)، دائرة صغيرة (أيقونة)، ومستطيلين أو ثلاثة كبطاقات محتوى.
4. اضغط T واكتب عنوانا مثل مرحبا ونصا أقصر تحتها. غيّر الحجم ونوع الخط من الشريط الأيمن.
5. من الشريط الأيمن غيّر لون التعبئة (Fill) ولون الحدود (Stroke). احفظ لونا واحدا على الأقل إن ظهرت لك Styles.
6. رتّب العناصر بالمحاذاة (Align) من الشريط العلوي حتى تبدو مرتبة.

الفيديوهات

3 Auto Layout (التنسيق التلقائي)

الهدف: تفهم كيف ترتّب العناصر تلقائيا مع المسافات، بدل تحريك كل شيء يدويا.

ما معنى Auto Layout؟ خاصية تجعل العناصر داخل صندوق تتصطف أفقيا أو عموديا بمسافات ثابتة، وتشبه ترتيب العناصر في التطبيقات الحقيقية.

الخطوات

1. أنشئ زرا بسيطا: مستطيل + نص فوقه (أو داخله).
2. حدد الاثنين معا واضغط Shift + A لتفعيل Auto Layout.
3. من الشريط الأيمن جرب: الاتجاه (أفقي أو عمودي)، المسافة بين العناصر (Gap)، والحشو الداخلي (Padding).
4. اصنع قائمة عمودية من 3 صفوف (أيقونة + نص) كلها بـ Auto Layout.
5. غيّر طول النص وشاهد كيف يتمدد الصندوق لوحده.

الفيديوهات

4 المكونات (Components) والمتغيرات (Variants)

الهدف: تصنع عنصرا قابلا لإعادة الاستخدام (مثل زر) بدل نسخه يدويا في كل مرة.

كلمات مهمة

• Component: العنصر الأساسي (الأصل)
• Instance: نسخة مرتبطة بالأصل؛ أي تعديل على الأصل ينعكس عليها
• Variants: أشكال متعددة لنفس المكون (مثلا زر عادي / زر مضغوط)

الخطوات

1. صمّم زرا جميلا (نص + خلفية + زوايا دائرية).
2. حدده واختر Create component (أو اختصار Cmd/Ctrl + Alt + K).
3. اسحب نسختين (Instance) وضعهما في أماكن مختلفة.
4. عدّل لون الأصل وشاهد النسختين تتغيران.
5. أنشئ Variant ثانية لنفس الزر بحالة مختلفة (مثلا لون أغمق أو نص تم).
6. من الشريط الأيمن بدّل بين الحالات في النسخة.

الفيديوهات

5 الأنماط (Styles) والمتغيرات اللونية (Variables)

الهدف: توحّد الألوان والخطوط في ملفك حتى يبقى التصميم متناسقا وسهل التعديل.

الخطوات

1. أنشئ Text Style للعناوين وآخر للنصوص العادية (حدد النص ثم احفظ Style من الشريط الأيمن).
2. احفظ لونين كـ Color Styles على الأقل: أساسي وثانوي.
3. طبّق نفس الـ Styles على 3 عناصر مختلفة.
4. غيّر الـ Style مرة واحدة ولاحظ أن العناصر تتحدث معا.
5. إن ارتحت، افتح Local variables وجرّب إنشاء متغير لون واحد وربطه بعنصر (لا تقلق إن بدا متقدما؛ يكفي تجريب بسيط).

الفيديوهات

6 النموذج التفاعلي (Prototype)

الهدف: تربط شاشتين بحيث الضغط على زر ينقلك كأنها تطبيق حقيقي.

الخطوات

1. انسخ إطار الجوال ليصبح لديك شاشتان: الرئيسية و التفاصيل.
2. في الشاشة الأولى ضع زرا عرض التفاصيل.
3. من أعلى الصفحة انتقل لتبويب Prototype.
4. اسحب السهم من الزر إلى شاشة التفاصيل.
5. اختر التفاعل: On click / Navigate to، ونوع الحركة Instant أو Dissolve.
6. اضغط أيقونة التشغيل (Preview) وجرب كأنك مستخدم.
7. أضف زرا رجوع من التفاصيل إلى الرئيسية.

الفيديوهات

7 مشروع صغير + مشاركة وطلب ملاحظات

الهدف: تصمّم شاشة تطبيق بسيطة كاملة، تشارك الرابط، وتطلب رأيا واضحا.

مشروع مقترح (اختر واحدا)

• شاشة تسجيل دخول: شعار + حقلين (إيميل / كلمة مرور) + زر دخول + رابط نسيت كلمة المرور
• أو شاشة رئيسية لمتجر بسيط: عنوان + شريط بحث + 3 بطاقات منتجات + شريط تنقل سفلي

خطوات التنفيذ

1. أنشئ ملفا جديدا باسم المشروع.
2. Frame بجوال واحد (أو شاشتين إن أحببت).
3. استخدم Auto Layout في القائمة والزر.
4. حوّل الزر وبطاقة المنتج إلى Components.
5. طبّق Styles للألوان والخطوط.
6. إن وجدت شاشة ثانية، اربطها بـ Prototype.
7. نظّف أسماء الطبقات والإطارات بالعربية أو الإنجليزية بوضوح.
8. اضغط Share في أعلى اليمين، انسخ الرابط، وضع صلاحية العرض على الأقل: can view.
9. أرسل الرابط لصديق واطلب 3 ملاحظات فقط: ما الواضح؟ ما المربك؟ ما الذي تحسّنه أولا؟
10. داخل Figma يمكنه وضع تعليقات (Comments)؛ راجعها ورد عليها.

الفيديوهات

قائمة تحقق نهاية الأسبوع

• أعرف أفتح ملفا وأتنقل في اللوحة
• أصمّم Frame لجوال فيه نصوص وأشكال وألوان
• أستخدم Auto Layout
• أصنع Component بسيط
• أحفظ Style واحد على الأقل
• أعمل Prototype بسيط
• أشارك رابط الملف لطلب ملاحظات

نصيحة أخيرة

إن تعثّرت في يوم، لا تنتقل بسرعة؛ أعد نفس التمرين في اليوم التالي. الثبات أهم من الكمال.