هل تعلم أن فيجما أصبحت الأداة الأولى للمصممين في جميع أنحاء العالم؟
بالفعل، هذه المنصة السحابية غيرت مشهد التصميم بالكامل بفضل مرونتها وسهولة استخدامها. لكن رغم بساطتها النسبية، يشعر الكثير من المبتدئين بالإرهاق عند محاولة تعلمها للمرة الأولى.
لا داعي للقلق! لقد صممنا هذا الدليل العملي لمساعدتك على إتقان فيجما في 30 يوماً فقط، حتى لو كنت تبدأ من الصفر تماماً.
على مدار الأسابيع القادمة، ستتعلم كل ما تحتاجه بداية من أساسيات الواجهة وأدوات التصميم الأساسية، ومروراً بإنشاء مشروعك الأول، وصولاً إلى تطوير نماذج تفاعلية احترافية يمكنك مشاركتها مع العملاء والمطورين.
بنهاية هذه الرحلة، لن تكتسب فقط المهارات التقنية اللازمة، بل ستمتلك أيضاً الثقة للانتقال من مبتدئ إلى مصمم محترف قادر على المنافسة في سوق العمل.
هل أنت مستعد لبدء رحلتك مع فيجما؟ دعنا ننطلق!
اليوم 1-5: التعرف على Figma وبيئة العمل
خلال الأيام الخمسة الأولى من رحلتنا، سنبدأ بالتعرف على الأساسيات التي ستبني عليها مهاراتك في التصميم. دعنا نستكشف عالم فيجما ونتعلم كيف نخطو خطواتنا الأولى نحو الاحتراف.
ما هو Figma ولماذا هو مهم؟
فيجما هو أداة تصميم رقمية تعتمد على السحابة الإلكترونية، تُستخدم بشكل أساسي لتصميم واجهات المستخدم (UI) وتجربة المستخدم (UX). تميزت هذه الأداة عن غيرها من برامج التصميم بميزة فريدة: إمكانية العمل الجماعي في الوقت الفعلي، حيث يمكن للعديد من المصممين العمل على مشروع واحد في وقت واحد.
ما يجعل فيجما مهماً في عالم التصميم اليوم:
سهولة الاستخدام - يُعتبر من أبسط برامج التصميم التي تؤدي وظائف متعددة بواجهة مبسطة وسلسة.
مرونة الوصول - يعمل عبر مختلف أنظمة التشغيل سواء Windows أو MacOS، كما يمكن استخدامه مباشرة من خلال المتصفح دون الحاجة لتنزيله.
التعاون الفعال - يتيح مشاركة التصميمات عبر روابط مباشرة، مع إمكانية مشاهدة التعديلات مباشرة.
تبنّت العديد من الشركات العالمية فيجما كأداة أساسية في سير عملها مثل Dribbble وGitHub وZoom وUber وMicrosoft وAirBnB وSpotify، مما يدل على قوته وفعاليته في مجال التصميم الرقمي.
إنشاء حساب جديد وتثبيت التطبيق
لبدء رحلتك مع فيجما، اتبع هذه الخطوات البسيطة:
أولاً، توجه إلى الموقع الرسمي لفيجما (www.figma.com) واضغط على زر "Sign Up" للتسجيل. يمكنك إنشاء حساب باستخدام بريدك الإلكتروني أو الاستمرار مباشرة باستخدام حساب Google الخاص بك.
بعد إدخال بياناتك، ستتلقى رسالة تحقق على بريدك الإلكتروني - افتحها واضغط على رابط التفعيل لتأكيد حسابك. بمجرد الانتهاء من ذلك، ستصل إلى واجهة فيجما الرئيسية.
هناك طريقتان لاستخدام فيجما:
استخدام النسخة السحابية: يمكنك استخدام فيجما مباشرة من متصفحك دون الحاجة لتثبيت أي برنامج - خيار مثالي للعمل على أجهزة متعددة.
تثبيت التطبيق: يمكنك تنزيل تطبيق سطح المكتب لأنظمة Windows أو Mac للحصول على تجربة أكثر سلاسة.
بعد إكمال التسجيل، قد يطلب منك فيجما إنشاء فريق للعمل - يمكنك اختيار "Do this later" لتخطي هذه الخطوة والانتقال مباشرة للعمل على مشروعك الأول.
جولة في واجهة المستخدم
عند فتح فيجما للمرة الأولى، ستواجه واجهة قد تبدو بسيطة لكنها قوية جداً. تنقسم واجهة فيجما إلى عدة أجزاء رئيسية:
الجزء الأول: على يسار الشاشة، توجد لوحة تنظيم الملفات والإعدادات الأساسية التي تساعدك على ترتيب المشاريع والطبقات.
الجزء الثاني: مساحة العمل الرئيسية (الكانفاس) وتظهر كمساحة رمادية واسعة حيث ستقوم بإنشاء تصاميمك.
الجزء الثالث: على يمين الشاشة، تظهر لوحة الخصائص والإعدادات الخاصة بالعناصر المحددة، مثل الألوان والخطوط وخصائص التصميم الأخرى.
الجزء الرابع: الشريط العلوي يحتوي على الأدوات الأساسية والقوائم المختلفة.
شرح الأدوات الأساسية في الشريط العلوي والجانبي
لتبدأ العمل في فيجما، من المهم فهم الأدوات الأساسية التي ستستخدمها بشكل متكرر:
أداة الإطار (Frame): وهي من أهم الأدوات، تسمح لك بإنشاء إطارات العمل لمختلف أحجام الأجهزة، سواء كانت لتطبيقات الهاتف أو مواقع الويب. يمكن الوصول إليها بالضغط على حرف "F".
أداة التحريك (Move): تساعدك على تحديد وتحريك العناصر داخل مساحة العمل، ويمكن الوصول إليها بالضغط على حرف "V".
أدوات الأشكال: تتيح لك رسم الأشكال الأساسية مثل المستطيلات والدوائر والخطوط. تجدها في الشريط العلوي تحت أيقونة المربع.
أداة النص (Text): تستخدم لإضافة النصوص إلى التصميم، ويمكن الوصول إليها بالضغط على حرف "T".
قائمة الإجراءات (Actions): وهي قائمة خفية قوية تساعدك في الوصول السريع إلى الأوامر المختلفة، يمكن فتحها بالضغط على Command+K (في MacOS) أو Control+K (في Windows).
مع نهاية الأيام الخمسة الأولى، ستكون قد تعرفت على الأدوات الأساسية في فيجما وبيئة العمل الخاصة به، مما يضع الأساس القوي لتعلم مهارات متقدمة في الأيام القادمة.
اليوم 6-10: أدوات التصميم الأساسية
بعد أن أتقنت أساسيات واجهة فيجما، حان الوقت للانتقال إلى المرحلة التالية. خلال الأيام من 6 إلى 10، سنتعمق في أدوات التصميم الأساسية التي ستحول أفكارك إلى تصاميم مرئية ملموسة.
الرسم بالأشكال الأساسية
تُشكل الأشكال الأساسية حجر الأساس لأي تصميم في فيجما. يمكنك الوصول إلى أدوات الأشكال من القائمة المنسدلة في شريط الأدوات العلوي، أو بالنقر على السهم بجانب أيقونة المستطيل.
لرسم المستطيلات، اضغط على حرف "R" في لوحة المفاتيح أو اختر أداة المستطيل من شريط الأدوات. انقر في أي مكان على اللوحة واسحب لرسم المستطيل بالأبعاد المطلوبة. يمكنك تدوير زوايا المستطيل باستخدام المقابض الدائرية في كل زاوية.
لإنشاء الدوائر والأشكال البيضاوية، استخدم أداة Ellipse بالضغط على حرف "O". اسحب على اللوحة لرسم الشكل البيضاوي، وستظهر أبعاده أسفل الشكل مباشرة.
بالنسبة للخطوط، اضغط على "L" واسحب في أي اتجاه لرسم خط مستقيم. يمكنك تخصيص سمك الخط ونمطه ولونه من لوحة الخصائص على اليمين.
أما الأشكال النجمية والمضلعات، فيمكن الوصول إليها من قائمة الأشكال. عند رسم النجمة، ستجد ثلاثة مقابض للتحكم في عدد الرؤوس ونسبة الداخل إلى الخارج.
عند العمل مع الأشكال، استخدم مفتاح Shift للحصول على أشكال متناسقة كالمربعات والدوائر المثالية. ولتغيير حجم الشكل من المركز، استخدم Option/Alt أثناء السحب.
إضافة النصوص وتنسيقها
في فيجما، يُعد التحكم بالنصوص عملية سلسة ومرنة. لإضافة نص، اضغط على حرف "T" في لوحة المفاتيح أو اختر أداة النص من شريط الأدوات، ثم انقر على اللوحة وابدأ بالكتابة.
لتحرير نص موجود، يمكنك النقر المزدوج عليه مباشرةً، أو تحديده والضغط على Enter. عند تحديد النص، تظهر خيارات التنسيق في لوحة الخصائص على اليمين، حيث يمكنك تغيير الخط والحجم والوزن واللون.
استفد من اختصارات لوحة المفاتيح لتنسيق النصوص بسرعة، مثل Ctrl+B (أو Command+B على Mac) لجعل النص غامقاً، وCtrl+I للنص المائل.
تُعد أنماط النص من الميزات المفيدة للحفاظ على اتساق التصميم، حيث يمكنك إنشاء أنماط قابلة لإعادة الاستخدام توفر عليك الوقت وتضمن تناسق الطباعة في كامل المشروع.
استخدام الألوان والخطوط
تُقدم فيجما مجموعة قوية من أدوات الألوان التي تساعدك على تحقيق التناغم اللوني المطلوب. إضافة "Color Designer" تتيح لك العمل مع تدرجات الألوان المختلفة بطريقة احترافية، وتوفر تدرجات أفتح وأغمق لكل لون أساسي.
يمكنك استخدام ثلاثة أنواع من التدرجات اللونية: التدرج الخطي، والتدرج الدائري الذي يبدأ من مركز الشكل، والتدرج الزاوي الذي ينشئ تأثيرات على طول دائرة.
لتطبيق لون على شكل، حدد الشكل ثم انقر على خاصية "Fill" في اللوحة اليمنى. يمكنك اختيار الألوان من لوحة الألوان أو إدخال قيمة HEX مباشرة.
من الممارسات الجيدة إنشاء دليل ألوان خاص بمشروعك للحفاظ على اتساق التصميم. استخدم وظيفة أنماط الألوان لإنشاء لوحة ألوان قابلة لإعادة الاستخدام بسهولة.
الاختصارات التي توفر الوقت
تُعد اختصارات لوحة المفاتيح في فيجما أداة قوية لتحسين سير العمل وتوفير الوقت. إليك أهم الاختصارات التي ستحتاجها:
Ctrl + / أو Cmd + / — فتح قائمة الإجراءات السريعة
Ctrl + D أو Cmd + D — تكرار العناصر المحددة
Ctrl + G أو Cmd + G — تجميع العناصر المحددة
Ctrl + Shift + G أو Cmd + Shift + G — فك التجميع
Ctrl + Alt + G أو Cmd + Option + G — وضع العناصر المحددة في إطار
Ctrl + R أو Cmd + R — إعادة تسمية العناصر المحددة
Shift + 0-9 — ضبط شفافية العنصر المحدد
استخدام هذه الاختصارات سيوفر عليك ساعات من العمل، وسيساعدك على التركيز أكثر على جوهر التصميم بدلاً من إضاعة الوقت في التنقل بين القوائم.
تنظيم العناصر باستخدام Frames وGroups
في فيجما، هناك طريقتان أساسيتان لتنظيم العناصر: الإطارات (Frames) والمجموعات (Groups). على الرغم من تشابههما، فإن لكل منهما خصائص واستخدامات مختلفة.
المجموعات هي طريقة لجمع عدة عناصر معًا كطبقة واحدة. تتكيف حدود المجموعة تلقائيًا مع العناصر الداخلية. لإنشاء مجموعة، حدد العناصر واضغط على Ctrl+G (أو Cmd+G على Mac). المجموعات مثالية عندما تريد تحريك مجموعة من العناصر المترابطة معًا، مثل الشعارات أو الأزرار.
أما الإطارات، فهي أكثر قوة وتعمل كحاويات للعناصر الأخرى. على عكس المجموعات، لا تتغير أبعاد الإطار تلقائيًا عند تغيير العناصر الداخلية. لإنشاء إطار، اضغط على F واختر الحجم المطلوب، أو حدد عناصر واضغط Ctrl+Alt+G (أو Cmd+Option+G على Mac).
الإطارات تدعم ميزات متقدمة مثل الشبكات التخطيطية (Layout Grids) وقص المحتوى (Clip Content) والقيود (Constraints) التي تحدد كيفية تفاعل العناصر عند تغيير حجم الإطار.
استخدم الإطارات عندما تحتاج إلى بناء تخطيطات معقدة أو تصميمات استجابية، واستخدم المجموعات للتنظيم البسيط للعناصر المترابطة.
اليوم 11-15: تصميم أول مشروع عملي
حان وقت التطبيق العملي! في هذه المرحلة، سنضع المهارات التي اكتسبناها سابقاً موضع التنفيذ من خلال تصميم مشروع عملي: شاشات تطبيق موبايل متكامل.
تخطيط شاشة تطبيق موبايل
أولاً، نبدأ بتخطيط شاشة تطبيق الموبايل باختيار الإطار المناسب. في لوحة الأدوات، اضغط على حرف "F" لاختيار أداة Frame، ثم اختر حجم الجهاز المستهدف (مثل iPhone SE أو iPhone 12).
بعد إنشاء الإطار، أضف شبكة التخطيط بالنقر على "+" في قسم "Layout grid" بلوحة الخصائص. اضبط الإعدادات كالتالي:
عدد الأعمدة: 3 (للتصميم البسيط)
المسافة بين الأعمدة: 16 بكسل
الهوامش: 16 بكسل على الجوانب
هذه الشبكة ستساعدك على ترتيب العناصر بشكل متناسق ومتوازن على الشاشة.
استخدام Auto Layout لتسهيل الترتيب
تعتبر ميزة Auto Layout من أقوى أدوات فيجما، فهي تسمح لك بإنشاء تصاميم مرنة تتكيف تلقائياً مع التغييرات. لاستخدام هذه الميزة، حدد العناصر التي تريد تنظيمها ثم اضغط Shift+A أو انقر على "Add auto layout" من القائمة الجانبية.
علاوة على ذلك، يمكنك تخصيص إعدادات Auto Layout من خلال:
تحديد الاتجاه (أفقي أو عمودي)
ضبط المسافات بين العناصر
إضافة حشوة داخلية (Padding)
تعيين محاذاة العناصر داخل الإطار
من الأمثلة العملية على استخدام Auto Layout: تصميم أزرار تتمدد تلقائياً حسب طول النص، أو قوائم تتكيف مع إضافة أو إزالة العناصر.
إنشاء أنماط للألوان والخطوط
لضمان اتساق التصميم، من الضروري إنشاء أنماط موحدة للألوان والخطوط. لإنشاء نمط لون، حدد عنصراً يحتوي على اللون المطلوب، ثم انقر على قائمة "+" بجانب خاصية اللون في اللوحة اليمنى، وأدخل اسماً واضحاً للنمط.
وبالمثل، لإنشاء نمط نص: حدد نصاً، ثم انقر على "+" بجوار خصائص النص في اللوحة اليمنى. استخدم تسميات منطقية مثل "عنوان رئيسي" أو "نص فرعي" لتسهيل استخدامها لاحقاً.
تصميم أكثر من صفحة وربطها
بعد الانتهاء من تصميم الشاشة الأولى، يمكنك إنشاء المزيد من الشاشات باستخدام نفس تقنيات التصميم. لربط هذه الشاشات معاً وإنشاء تجربة تفاعلية، اتبع الخطوات التالية:
انقر على علامة التبويب Prototype في الجانب الأيمن
حدد العنصر الذي سيعمل كرابط (زر أو أيقونة)
اسحب العقدة الدائرية (مقبض التفاعل) من العنصر المحدد إلى الإطار المستهدف
اضبط إعدادات التفاعل مثل نوع التحريك والمدة الزمنية
تذكر دائماً اختبار النموذج الأولي بالنقر على زر "Play" في الزاوية العليا اليمنى للتأكد من أن كل الروابط تعمل بشكل صحيح.
اليوم 16-20: التفاعل والبروتوتايب
الآن وقد أصبحت تصاميمك جاهزة، حان وقت تحويلها من مجرد صور ثابتة إلى نماذج تفاعلية يمكن التفاعل معها. في هذه المرحلة سنتعرف على عالم البروتوتايب في فيجما وكيفية إنشاء تجارب مستخدم واقعية.
ما هو البروتوتايب ولماذا نستخدمه؟
البروتوتايب هو نموذج أولي تفاعلي يحاكي المنتج النهائي ويتيح للمستخدمين التفاعل معه. في فيجما، يُعرف البروتوتايب بأنه تصميم قابل للنقر يسمح بمعاينة التفاعلات وتدفقات المستخدم.
نستخدم البروتوتايب لعدة أسباب مهمة:
معاينة التفاعلات وتدفقات المستخدم
مشاركة الأفكار والحصول على التعليقات
اختبار التفاعلات مع المستخدمين
عرض التصاميم على أصحاب المصلحة بطريقة مقنعة
أكثر من ذلك، يمكنك إنشاء تدفقات متعددة ضمن النموذج الأولي الواحد، مما يسمح برسم رحلة المستخدم الكاملة. على سبيل المثال، يمكن أن يشمل نموذجك الأولي تدفقات منفصلة لإنشاء حساب، وإضافة عناصر إلى سلة التسوق، وإتمام عملية الشراء.
ربط الصفحات باستخدام التفاعلات
لإنشاء نموذج أولي في فيجما، اتبع هذه الخطوات:
انتقل إلى علامة التبويب Prototype في الشريط الجانبي الأيمن
حدد العنصر الذي تريد جعله قابلاً للنقر (زر أو أيقونة)
انقر على علامة + الزرقاء التي تظهر على حافة العنصر واسحب إلى الإطار المستهدف
اضبط إعدادات التفاعل في النافذة التي تظهر
عند إنشاء الروابط، يمكنك تحديد نوع المحفز (Trigger) مثل النقر أو التمرير أو التحويم، والإجراء المراد تنفيذه مثل الانتقال إلى إطار آخر أو فتح رابط خارجي.
تذكر أنه يمكنك ربط عناصر متعددة بنفس الوجهة في وقت واحد عن طريق تحديد عدة عناصر ثم سحب الرابط إلى الإطار المستهدف.
إضافة انتقالات وحركات بسيطة
بعد ربط الصفحات، يمكنك إضافة الانتقالات والحركات لجعل النموذج الأولي أكثر حيوية. عند إنشاء رابط، يمكنك اختيار نوع الرسوم المتحركة والتحكم في:
نوع الانتقال (مثل التلاشي أو الانزلاق أو الرسوم المتحركة الذكية)
اتجاه الحركة
مدة الانتقال (السرعة)
تتميز ميزة "Smart Animate" بقدرتها على تحريك العناصر المتشابهة تلقائيًا، مما يسمح بإنشاء حركات دقيقة مثل التمرير المتوازي وإيماءات اللمس.
معاينة المشروع على الهاتف أو المتصفح
عندما تكون جاهزًا لاختبار النموذج الأولي، يوفر فيجما عدة طرق للمعاينة:
انقر على زر Preview في الزاوية العليا اليمنى لعرض النموذج في متصفحك
استخدم تطبيق فيجما للهاتف المحمول لمعاينة تصميماتك على جهازك الحقيقي
شارك رابط النموذج مع الآخرين للحصول على تعليقاتهم
للمعاينة على الهاتف المحمول، قم بتنزيل تطبيق فيجما على هاتفك، ثم سجل الدخول باستخدام نفس الحساب. انتقل إلى علامة التبويب Mirror وسيعرض التطبيق الإطار المحدد في ملف سطح المكتب.
تتيح لك هذه الميزة معاينة التصميم على الجهاز المستهدف، واختبار التفاعلات في بيئتها الطبيعية، ومشاهدة كيفية ظهور التصميم على أحجام شاشات مختلفة.
اليوم 21-30: تسليم المشروع والتعاون مع المطورين
بعد إكمال النموذج الأولي، تأتي المرحلة الأخيرة في رحلة التصميم: التعاون مع المطورين وتسليم المشروع النهائي. خلال الأيام العشرة الأخيرة، سنتعلم كيفية تحويل تصاميمنا إلى واقع ملموس.
مشاركة المشروع مع العميل أو الفريق
يتيح فيجما مشاركة التصاميم مع العملاء والفرق بسهولة عبر الروابط المباشرة. يمكنك ضبط صلاحيات المشاهدة أو التحرير للمدعوين حسب احتياجاتهم. عندما ترغب في مشاركة نموذج أولي فقط دون إتاحة ملف التصميم الكامل، استخدم خيار "مشاركة النموذج الأولي" المتاح في وضع العرض.
تصدير العناصر Assets
يوفر فيجما خيارات مرنة لتصدير العناصر بتنسيقات متعددة مثل SVG وPNG وJPG. لتصدير أي عنصر، حدده ثم انقر على زر "+" في قسم التصدير بالشريط الجانبي. يمكنك أيضاً تصدير العناصر بدقة 2x أو 3x للشاشات عالية الكثافة، مما يضمن وضوح الصور على أجهزة مختلفة.
استخدام Inspect Mode للمطورين
تعتبر ميزة وضع المطور (Dev Mode) جسراً حقيقياً بين المصممين والمطورين. لاستخدامها، انتقل إلى وضع المطور بالضغط على Shift+D أو عبر التبديل في أعلى الملف. يتيح هذا الوضع للمطورين الوصول إلى:
قياسات دقيقة للمسافات بين العناصر
شفرات CSS وSwift وAndroid جاهزة للاستخدام
تفاصيل الألوان والطباعة
قياسات الأبعاد والهوامش
أفضل الممارسات لتسليم مشروع احترافي
للتسليم الاحترافي، استخدم أداة التعليقات لإضافة ملاحظات توضيحية للمطورين. وفّر قائمة بالمتغيرات المستخدمة وشرح تسلسل الشاشات. نظّم العناصر بشكل منطقي وسمّها بوضوح. علاوة على ذلك، أنشئ إصدارات من تصميمك قبل إجراء تغييرات كبيرة للاحتفاظ بتاريخ التطور.
الخاتمة
وصلت الآن إلى نهاية رحلتك التعليمية مع فيجما! خلال ثلاثين يوماً، انتقلت من مبتدئ لا يعرف شيئاً عن هذه الأداة القوية إلى مصمم قادر على إنشاء تصاميم احترافية وتفاعلية. الخطوات التي اتبعتها بدءاً من التعرف على واجهة المستخدم، مروراً بأدوات التصميم الأساسية، ثم تصميم مشروعك الأول، وصولاً إلى إنشاء نماذج أولية وتسليمها للمطورين، شكلت أساساً متيناً لمهاراتك في التصميم.
فيجما تتميز عن غيرها من أدوات التصميم بقدرتها على تسهيل العمل الجماعي والوصول السهل عبر متصفح الإنترنت. تبني هذه الأداة جسراً فعالاً بين المصممين والمطورين، مما يجعلها خياراً مثالياً للفرق المتكاملة.
أصبحت الآن تمتلك المهارات الأساسية لاستخدام الإطارات وتنسيق النصوص وتطبيق الألوان وإنشاء نماذج تفاعلية. علاوة على ذلك، تعلمت كيفية تنظيم مشروعك بطريقة احترافية وتسليمه بشكل يسهل على المطورين تحويله إلى منتج حقيقي.
مهارات فيجما التي اكتسبتها ستفتح لك آفاقاً واسعة في عالم التصميم الرقمي. بالتأكيد، ستحتاج للممارسة المستمرة لصقل هذه المهارات، لكن الأساس القوي الذي بنيته خلال هذه الأيام الثلاثين سيمكنك من مواكبة التطورات المستقبلية في هذه الأداة.
تذكر دائماً أن رحلة التعلم لا تتوقف أبداً. استمر في تطوير مشاريع جديدة، واستكشاف ميزات متقدمة، والاطلاع على آخر تحديثات فيجما. من خلال الممارسة المنتظمة، ستصبح تصاميمك أكثر تعقيداً وإبداعاً مع مرور الوقت.
فهنيئاً لك بإتمام هذه الرحلة! لقد أصبحت الآن جزءاً من مجتمع المصممين العالمي الذي يستخدم فيجما كأداة أساسية في عملهم اليومي. لذلك، ابدأ في تطبيق ما تعلمته، وشارك إبداعاتك مع العالم، واستمتع بعالم التصميم الرقمي اللامحدود.
