Figma - تصميم واجهات احترافية من الصفر
ما هو Figma؟
Figma هو أداة التصميم الأكثر شعبية في 2024! تطبيق ويب (يعمل في المتصفح) لتصميم واجهات المستخدم، التطبيقات، والمواقع. استخدمته شركات عملاقة: Google, Microsoft, Uber, Airbnb. الأفضل؟ مجاني تماماً للمبتدئين!
لماذا Figma؟
- مجاني: خطة مجانية سخية جداً
- سحابي: اعمل من أي جهاز، في أي مكان
- تعاوني: عمل جماعي فوري (Real-time)
- سهل التعلم: واجهة بديهية للمبتدئين
- قوي: أدوات احترافية للخبراء
- Prototyping: إنشاء نماذج تفاعلية
- Developer Handoff: تسليم سلس للمطورين
البداية - حساب مجاني
- اذهب إلى figma.com
- اضغط "Sign up free"
- سجّل بالبريد الإلكتروني أو Google
- ابدأ التصميم فوراً!
ملحوظة: لا حاجة لتحميل برنامج - كل شيء في المتصفح!
الواجهة الأساسية
1. Toolbar (شريط الأدوات العلوي):
- Move (V): تحريك واختيار العناصر
- Frame (F): إنشاء إطارات (شاشات)
- Shape (R, O, L): مستطيلات، دوائر، خطوط
- Text (T): كتابة نصوص
- Pen (P): رسم أشكال مخصصة
2. Layers Panel (يسار):
جميع العناصر في تصميمك، منظمة هرمياً
3. Properties Panel (يمين):
التحكم في الخصائص: الألوان، الحجم، الخطوط، الظلال
4. Canvas (المنتصف):
مساحة العمل - حيث تُبدع!
إنشاء تصميمك الأول
خطوة 1: إنشاء Frame
- اضغط F (أو أيقونة Frame)
- من اليمين، اختر iPhone 14 Pro
- سيظهر إطار بحجم شاشة الآيفون
خطوة 2: إضافة مستطيل (Header)
- اضغط R للمستطيل
- ارسم مستطيل في أعلى الشاشة
- من اليمين، غيّر اللون (Fill) إلى أزرق #4285F4
خطوة 3: إضافة نص
- اضغط T للنص
- اكتب "مرحباً بك"
- غيّر الخط، الحجم، واللون من اليمين
خطوة 4: إضافة صورة
- ارسم مستطيل بحجم الصورة
- من Layers، اضغط كليك يمين > Place Image
- اختر صورة من جهازك
ميزات قوية يجب معرفتها
1. Auto Layout - السحر الحقيقي
تنظيم تلقائي للعناصر (مثل Flexbox في CSS):
- اختر عناصر متعددة
- اضغط Shift + A
- ستُرتب تلقائياً مع مسافات متساوية
- عند إضافة/حذف عنصر، تُعدّل تلقائياً!
2. Components - إعادة الاستخدام
مثل القوالب - صمّم مرة، استخدم ألف مرة:
- صمّم زر مثلاً
- اختره واضغط Ctrl/Cmd + Alt + K
- أصبح Component!
- عند تعديله، جميع النسخ تتحدث تلقائياً
3. Variants - أشكال متعددة
نفس العنصر بحالات مختلفة (Normal, Hover, Disabled):
- أنشئ 3 أزرار (عادي، عند التحويم، معطّل)
- اختر الكل واضغط Combine as Variants
- الآن يمكنك التبديل بينهم بسهولة!
4. Constraints - Responsive Design
لجعل التصميم متجاوب:
- اختر عنصر
- من اليمين تحت "Constraints"
- اختر كيف يتصرف عند تغيير حجم الشاشة
Prototyping - إنشاء نموذج تفاعلي
حوّل تصميمك الثابت لتطبيق تفاعلي!
الخطوات:
- صمّم شاشتين (مثلاً: Home و Settings)
- انتقل لتبويب Prototype (أعلى اليمين)
- اختر الزر في الشاشة الأولى
- اسحب من الدائرة الزرقاء للشاشة الثانية
- اختر التأثير (Instant, Dissolve, Slide)
- اضغط Present (أعلى اليمين) للتجربة!
Plugins - قوة خارقة
إضافات تسرّع عملك:
أفضل Plugins المجانية:
- Unsplash: ملايين الصور المجانية
- Iconify: آلاف الأيقونات
- Lorem Ipsum: نصوص تجريبية
- Stark: فحص accessibility
- Remove BG: حذف خلفية الصور
- Content Reel: بيانات واقعية
كيفية التثبيت:
اضغط كليك يمين > Plugins > Browse plugins
نصائح التصميم الاحترافي
1. استخدم Grid System:
- اختر Frame
- من اليمين، اضغط + بجانب Layout Grid
- اختر 12 Columns
- صمّم بناءً على الشبكة للتناسق
2. الألوان المتناسقة:
- استخدم 3-5 ألوان فقط
- أنشئ Styles للألوان المتكررة
- استخدم أدوات: Coolors.co، Adobe Color
3. Typography (الخطوط):
- استخدم 2-3 خطوط فقط
- العناوين: خط Bold كبير
- النصوص: خط Regular صغير
- اضبط Line Height (1.5 مثالي)
4. Spacing (المسافات):
- استخدم نظام 8px: 8, 16, 24, 32, 40...
- المسافات المتساوية = تصميم أنظف
مشروع عملي: تطبيق Todo
ما ستصممه:
- شاشة البداية: لوجو وزر "ابدأ"
- شاشة المهام: قائمة المهام + زر إضافة
- شاشة إضافة مهمة: حقل نص + زر حفظ
الخطوات:
- أنشئ 3 Frames (شاشات)
- صمّم Header لكل شاشة (Component واحد)
- أضف العناصر (Text, Buttons, List Items)
- استخدم Auto Layout لكل شيء
- اربط الشاشات بـ Prototyping
- جرّب وشارك!
مصادر تعلم مجانية
- Figma Learn: دورات رسمية مجانية
- YouTube: قنوات Flux, DesignCourse
- Figma Community: آلاف التصاميم المجانية للدراسة
- UI8, Uplabs: Templates مجانية
الخلاصة
Figma حوّل تصميم الواجهات من معقّد لممتع! في أسبوع واحد من الممارسة اليومية، ستتقن الأساسيات. بعد شهر، ستصمم تطبيقات احترافية. المفتاح: صمّم كل يوم، ادرس تصاميم الكبار، واطلب feedback. ابدأ الآن مجاناً!