تعلّم كيف ‹ 🎨 تصوير وتصميم وحرف
🎨 فيجما للمبتدئين
أساسيات فيجما لتصميم الواجهات والمنشورات: الإطارات، الأشكال والنصوص، التخطيط التلقائي Auto Layout، المكونات Components، الأنماط، العمل الجماعي، النماذج التفاعلية، والتصدير.
لماذا فيجما؟
- تعمل من المتصفح (وبرنامج للكمبيوتر)، وفيها خطة مجانية.
- عمل جماعي مباشر: أكثر من شخص يصمم ويعلق في نفس الملف.
- المعيار الأشهر لتصميم واجهات المواقع والتطبيقات، وتصلح للمنشورات والعروض.
المفاهيم الأساسية
- الإطار (Frame - F): مثل لوحة الرسم: شاشة جوال، صفحة موقع، منشور. اختر مقاسًا جاهزًا من اللوحة اليمنى.
- الأشكال: مستطيل (R)، دائرة (O)، خط (L).
- النص (T).
- المجموعات (
Ctrl+G).
التخطيط التلقائي (Auto Layout)
أقوى ميزة: يجعل العناصر تترتب وتتباعد تلقائيًا (مثل الزر الذي يكبر مع طول النص، أو قائمة تتباعد عناصرها بالتساوي). Shift+A على العناصر المحددة.
المكونات (Components)
صمّم الزر أو الأيقونة مرة كمكون (Ctrl+Alt+K)، واستخدم نسخًا منه. أي تعديل على الأصل يتغير في كل النسخ.
الأنماط (Styles)
احفظ الألوان والخطوط كأنماط للمشروع؛ يبقى التصميم متناسقًا وسهل التعديل.
النموذج التفاعلي (Prototype)
من تبويب Prototype، اربط زرًا بشاشة أخرى، ثم شغّل العرض؛ يبدو كتطبيق حقيقي لاختباره قبل البرمجة.
التصدير
حدد العنصر، ومن أسفل اللوحة اليمنى «Export»: PNG، JPG، SVG، PDF، بالأحجام المطلوبة.
خطة البداية
- قلّد 5 شاشات من تطبيقات تحبها.
- تعلم Auto Layout بتصميم أزرار وبطاقات.
- صمم شاشة تسجيل دخول كاملة بالمكونات.