الدرس الثاني: تعلم Figma من الصفر
اليوم سنتعرف على أهم أداة يستخدمها جميع مصممي UI/UX وهي Figma.
ما هو Figma؟
Figma هو برنامج لتصميم:
- واجهات التطبيقات.
- واجهات المواقع.
- لوحات التحكم (Dashboards).
- النماذج التفاعلية (Prototypes).
ومن مميزاته:
- يعمل عبر المتصفح أو كتطبيق على الكمبيوتر.
- يحفظ عملك تلقائيًا.
- يدعم العمل الجماعي.
- يستخدمه أغلب مصممي UI/UX حول العالم.
إنشاء حساب
- ادخل إلى موقع Figma.
- أنشئ حسابًا جديدًا.
- سجّل الدخول.
- اضغط New Design File لإنشاء مشروع جديد.
التعرف على الواجهة
ستجد أربعة أجزاء رئيسية:
1. شريط الأدوات (Toolbar)
في الأعلى، ويحتوي على:
- أداة التحديد (Move)
- إطار العمل (Frame)
- الأشكال (Rectangle, Circle)
- النص (Text)
- القلم (Pen)
2. اللوحة اليسرى (Layers)
تحتوي على جميع العناصر التي تضيفها إلى التصميم، مثل:
- الصفحات.
- الإطارات.
- النصوص.
- الأزرار.
3. مساحة العمل (Canvas)
هي المنطقة البيضاء الكبيرة التي ستصمم فيها.
4. اللوحة اليمنى (Properties)
ومن خلالها تستطيع تعديل:
- الحجم.
- اللون.
- الخط.
- الظل.
- الزوايا.
- المحاذاة.
أول مشروع
اضغط على أداة Frame ثم اختر:
Phone → iPhone 16 Pro (أو أي مقاس هاتف حديث متاح).
سيظهر لك إطار يمثل شاشة الهاتف.
إضافة خلفية
من اللوحة اليمنى:
- اختر لونًا أبيض أو رماديًا فاتحًا للخلفية.
إضافة عنوان
اختر أداة Text (T).
اكتب:
Welcome
ثم:
- حجم الخط: 32
- الوزن: Bold
- اللون: أسود
إنشاء زر
اختر أداة Rectangle (R).
ارسم مستطيلاً:
- العرض: 300px
- الارتفاع: 55px
- اجعل الزوايا دائرية (Radius): 12px
- اللون: أزرق
ثم أضف نصًا فوقه:
Login
واجعله:
- أبيض.
- في المنتصف.
- حجم 18.
إضافة أيقونة
يمكنك لاحقًا استخدام إضافات (Plugins) داخل Figma لإضافة أيقونات بسهولة، لكن الآن ركز على تعلم الأساسيات.
ترتيب العناصر
حدّد الزر والنص معًا، ثم استخدم أدوات المحاذاة حتى يصبح النص في منتصف الزر تمامًا.
حفظ المشروع
لا تحتاج إلى الضغط على زر حفظ، لأن Figma يحفظ كل شيء تلقائيًا.
اختصارات مهمة
| الاختصار | الوظيفة |
|---|---|
| V | أداة التحديد |
| F | إنشاء Frame |
| R | رسم مستطيل |
| O | رسم دائرة |
| T | كتابة نص |
| Ctrl + D | تكرار العنصر |
| Ctrl + Z | التراجع |
| Ctrl + G | تجميع العناصر |
تمرين عملي
أنشئ شاشة بسيطة تحتوي على:
- عنوان: Welcome
- وصف: Sign in to continue
- حقل لإدخال البريد الإلكتروني.
- حقل لإدخال كلمة المرور.
- زر Login.
لا تهتم بأن يكون التصميم مثاليًا، الهدف هو التعرف على الأدوات.
نصيحة احترافية
لا تحاول حفظ الأدوات كلها في يوم واحد. ركّز على استخدامها أثناء التصميم، وستصبح مألوفة مع الممارسة.
الدرس الثالث
في الدرس القادم سنتعلم:
- مبادئ الألوان في UI.
- اختيار الألوان المناسبة.
- إنشاء لوحة ألوان احترافية.
- الفرق بين Primary وSecondary وAccent.
- أخطاء الألوان التي يقع فيها معظم المبتدئين.
تعليقات
إرسال تعليق