فيجما (Figma) أداة تصميم تشتغل من المتصفح، وصارت الخيار الأول لتصميم واجهات المواقع والتطبيقات (UI/UX) في الشركات الناشئة والكبيرة.
ليش فيجما مشهور؟
- يشتغل من المتصفح: ما تحتاج جهاز قوي، وفيه تطبيق لويندوز وماك.
- تعاون لحظي: أكثر من شخص يشتغلون على نفس الملف بنفس الوقت.
- النماذج الأولية: حوّل التصميم لنموذج تفاعلي تقدر تضغط عليه كأنه تطبيق حقيقي.
- المكونات وأنظمة التصميم: صمم الزر مرة واستخدمه في كل الصفحات.
أدوات داخل منظومة فيجما
Figma Design
تصميم الواجهات والنماذج الأولية.
FigJam
سبورة تعاونية للعصف الذهني ورسم المخططات ورحلة المستخدم.
Dev Mode
يساعد المبرمجين يقرأون المقاسات والألوان والأكواد من التصميم مباشرة.
Figma Slides
عروض تقديمية تصممها بنفس أدوات فيجما.
لمين يناسب فيجما؟
- مصممي الواجهات وتجربة المستخدم.
- المبرمجين ومديري المنتجات.
- أصحاب الشركات الناشئة اللي يبون نموذج أولي لفكرتهم.
- طلاب التصميم وعلوم الحاسب.
فيجما أو أدوبي أو كانفا؟
فيجما للواجهات والتطبيقات، أدوبي للصور والفيديو والطباعة، وكانفا للتصاميم التسويقية السريعة.
كيف تشترك في فيجما برو؟
من ون بلو تقدر تختار اشتراك فيجما برو شهر بضمان أو اشتراك فيجما برو سنة بضمان وهو الأوفر. تصفح باقات فيجما.
مثال: كيف يمشي مشروع تطبيق في فيجما؟
- يبدأ الفريق في FigJam برسم رحلة المستخدم وترتيب الأفكار.
- المصمم يرسم الشاشات بشكل مبدئي (Wireframes) بدون ألوان.
- يبني نظام تصميم فيه الألوان والخطوط والأزرار كمكونات قابلة لإعادة الاستخدام.
- يحول الشاشات لنموذج أولي تفاعلي ويجربه مع مستخدمين حقيقيين.
- يسلم التصميم للمطور عبر Dev Mode مع المقاسات والأكواد المقترحة.
نصائح للمبتدئين في فيجما
تعلم Auto Layout من البداية لأنه يوفر عليك ساعات في ترتيب العناصر، واستخدم المكونات (Components) لأي عنصر يتكرر. استفد من ملفات المجتمع المجانية لتشوف كيف ينظم المصممين المحترفين ملفاتهم، وخلك منظم في تسمية الطبقات من أول يوم.
مفاهيم أساسية لازم تعرفها في فيجما
الإطارات (Frames)
الإطار هو الشاشة أو الحاوية اللي تصمم داخلها. تختار مقاس جوال أو لابتوب أو تحدد مقاس خاص، وكل العناصر تكون داخله.
المكونات (Components)
أي عنصر يتكرر مثل الزر أو البطاقة تحوله لمكون. تعديل المكون الرئيسي ينعكس على كل نسخه في التصميم، وهذا يوفر وقت كبير في المشاريع الكبيرة.
Auto Layout
يخلي العناصر ترتب نفسها تلقائيًا مع المسافات. إذا كبر نص الزر، يكبر الزر معه بدون ما تعدله يدويًا.
الأنماط (Styles) والمتغيرات
احفظ ألوانك وخطوطك وتأثيراتك كأنماط ثابتة تستخدمها في كل الملف، عشان أي تغيير في الهوية يطبق على كل التصميم مرة وحدة.
النماذج الأولية (Prototype)
اربط الشاشات ببعض بأسهم وحدد وش يصير عند الضغط على الزر، وبعدها شغل العرض وجرب التطبيق كأنه حقيقي.
مشروع تطبيقي أول: صفحة هبوط لمتجر
- أنشئ إطار بمقاس لابتوب وإطار بمقاس جوال.
- صمم الهيدر: الشعار والقائمة وزر "تسوق الآن".
- أضف قسم المنتجات بثلاث بطاقات باستخدام مكون واحد.
- أضف قسم آراء العملاء والأسئلة الشائعة.
- طبق Auto Layout على كل الأقسام.
- اربط زر "تسوق الآن" بقسم المنتجات في النموذج الأولي.
هذا المشروع البسيط يعلمك أغلب الأساسيات في يوم أو يومين.
فيجما للفرق والشركات
قوة فيجما الحقيقية تبان مع الفرق. المصمم والمطور ومدير المنتج يشتغلون على نفس الملف، يعلقون مباشرة على العناصر، ويشوفون آخر نسخة دائمًا بدون إرسال ملفات. ومع فيجما برو تحصل على المكتبات المشتركة وسجل الإصدارات وDev Mode اللي يسهل التسليم للمطورين.
اقرأ أيضًا
- تعلم فوتوشوب للمبتدئين: 10 نصائح تختصر عليك الطريق
- أفضل برامج مونتاج الفيديو لصناع المحتوى
- فوتوشوب أو كانفا: أيهم يناسبك؟
للتحديثات والتفاصيل الرسمية راجع مركز مساعدة فيجما الرسمي.
أسئلة شائعة
هل فيجما يدعم العربي؟
نعم، يدعم الكتابة العربية واتجاه النص من اليمين لليسار.
هل فيجما يحتاج جهاز قوي؟
لا، يشتغل من المتصفح وأغلب الأجهزة الحديثة تشغله بسهولة.
هل فيجما يشتغل بدون إنترنت؟
فيجما يعتمد على السحابة بشكل أساسي، ويحتاج اتصال إنترنت للمزامنة والعمل الجماعي.
هل فيجما يناسب تصميم السوشال ميديا؟
يقدر، لكن كانفا أسرع لتصاميم السوشال اليومية، وفيجما أقوى في تصميم الواجهات.
هل أقدر أصدر تصاميم فيجما كصور؟
نعم، تقدر تصدر أي إطار أو عنصر بصيغ PNG وJPG وSVG وPDF.