مقدمة في Figma و MasterGo

🎯 السؤال الجوهري

كيف تبدأ من الصفر باستخدام أدوات التصميم الحديثة لإنشاء نماذج أولية لصفحات الويب؟

---

1. لماذا نحتاج إلى تعلم أدوات تصميم الواجهات الأمامية؟

قبل البدء، نحتاج إلى فهم سؤال: لماذا نحتاج إلى تعلم "أدوات تصميم الواجهات الأمامية"؟ أليس من الممكن بناء الصفحات مباشرة بكتابة كود HTML/CSS؟ هل حقًا من الضروري تعلم برنامج وتقنية إضافية؟

في الواقع، تشغيل الصفحة وتصميم المنتج بشكل جيد هما مفهومان مختلفان تمامًا. الكود يهتم فقط بكيفية العرض في المتصفح وكيفية العمل على الأجهزة المختلفة؛ أدوات تصميم الواجهات الأمامية تحل مشكلة توزيع المعلومات - كيفية ترتيب التفاعلات الأمامية، كيفية الانتقال بين الصفحات المختلفة، وكيفية توزيع الأولويات البصرية. يكفي إنشاء لوحة عمل في أداة التصميم لمقارنة وتحديد التخطيط والتسلسل الهرمي للمعلومات وطرق التفاعل على شاشة واحدة، واختيار أفضل طريقة عرض.

إذا بدأت مباشرة في كتابة الكود أو استخدام AI لإنشاء صفحات واجهة أمامية كاملة، فعادةً ما تكون تجربة المستخدم غير جيدة. المنتجات الدقيقة تأخذ في الاعتبار راحة تفاعل المستخدم مع الواجهة الأمامية، وتوزيع المحتوى الذي تريد كل صفحة نقله، وتبدأ من منظور المستخدم في ترتيب صفحات الواجهة الأمامية أولاً، ثم تحويلها إلى كود أو إنشائها.

بالإضافة إلى ذلك، من منظور التعاون الجماعي، أدوات تصميم الواجهات الأمامية تقلل أيضًا من تكلفة التعاون بين الأطراف المتعددة: لم يعد المصممون ومديرو المنتجات والمطورون ينظرون كل منهم إلى صورة في خياله أو وصف كود مجرد، بل يدعم التعاون المتزامن بين عدة أشخاص، ويمكن للجميع مناقشة إدارة الإصدارات وتغييرات المتطلبات وملاحظات حول لوحة عمل واحدة قابلة للعرض والتعليق والتكرار. علاوة على ذلك، لم تعد أدوات تصميم الواجهات الأمامية الحديثة مجرد برامج رسم، بل تنشئ جزءًا من الكود بنقرة واحدة وتدير أنظمة التصميم ومكتبات المكونات. أدوات التصميم في العصر الجديد قادرة على أتمتة أو تجميع الكثير من العمل اليدوي المتكرر (المحاذاة، التعليقات، التصدير، تعديل الأنماط)، مما يعزز بشكل كبير كفاءة تطوير تصميم الصفحات.

1.1 تطور أدوات تصميم الواجهات الأمامية

على مر الزمن، تطورت ما يسمى بأدوات تصميم الواجهات الأمامية باستمرار. من عصر Photoshop في التسعينيات الذي ركز على تحرير الصور النقطية المحلية، إلى سير العمل المتجه والمكونات الذي جلبه Sketch حوالي عام 2010، ثم نقل Figma التعاون إلى السحابة بالكامل بعد عام 2016، وانتقلت فرق التصميم من العمل الفردي إلى التعاون المتزامن بين عدة أشخاص. بحلول عام 2025، أصبح AI مدمجًا فعليًا في هذه الأدوات: من "إنشاء مسودة صفحة بناءً على جملة واحدة" إلى "تحويل التصميم مباشرة إلى هيكل واجهة أمامية قابل للتشغيل"، أصبح "التصميم ككود" و"الإبداع المشترك بين الإنسان والآلة" مفاهيم تتحول إلى إنتاجية قابلة للاستخدام.

في هذا القسم، سنقدم أداتين من أكثر أدوات تصميم الواجهات الأمامية الحديثة تمثيلاً: Figma و MasterGo. من ناحية، كلاهما يغطي القدرات الأساسية التي يحتاجها تصميم UI/UX الحديث (التحرير المتجه، نظام المكونات، التخطيط التلقائي، تسليم الكود، إلخ)، ويمكنهما دعمك لإكمال الحلقة الكاملة من الإطار السلكي إلى الدقة العالية إلى التسليم للتطوير؛ من ناحية أخرى، أضافت كلتا الأداتين ميزات AI عملية بعد عام 2025، لمساعدتك في تحويل التصميم إلى برنامج قابل للتشغيل حقًا مع الحفاظ على النموذج الأولي دون تغيير.

1.2 رحلة الميلاد

في العصر الذي لم تكن فيه أدوات تصميم الواجهات الأمامية المخصصة قد ظهرت بعد، كان برنامج تصميم "شامل" مثل Photoshop يتولى معظم أعمال التصميم البصري لصناعة تصميم الواجهات بالكامل لفترة طويلة. كان المصممون يكملون التصميم البصري العام للصفحة من خلال تراكب الطبقات محليًا، ويسلمون ملف المصدر .psd الكبير الحجم في النهاية إلى مهندس الواجهة الأمامية - ويجب على الواجهة الأمامية إكمال ثلاث مهام يدوية شاقة وحاسمة يدويًا لاستعادة التصميم بدقة:

أولاً "تقطيع الصور": يجب استخراج العناصر المرئية المستقلة مثل الأزرار والأيقونات والشعارات ووحدات الخلفية واحدة تلو الأخرى من بنية الطبقات المتعددة لملف .psd، ثم تصديرها بتنسيقات صور يمكن تحميلها مباشرة على الويب مثل PNG وJPG (بعد كل شيء، لا يمكن للمتصفح التعرف مباشرة على معلومات طبقات PSD، ويعتمد على هذه الصور المقطعة لعرض التفاصيل)؛

ثانياً "قياس الأبعاد": يجب استخدام أداة القياس المدمجة في البرنامج لتأكيد عرض وارتفاع كل عنصر، والمسافات بين الوحدات المختلفة (margin/padding) وغيرها من البيانات واحدة تلو الأخرى، لضمان دقة جميع الأبعاد إلى بكسل؛

ثالثاً "استخراج التعليقات التوضيحية": يجب استخراج المعلمات "غير المرئية ولكن الضرورية" من التصميم - مثل حجم الخط ووزن الخط وارتفاع السطر للنص، وقيم RGB أو HEX لكل كتلة ملونة، أي ما يعادل استخراج "مواصفات التصميم" التي لم يكتبها المصمم على الورقة يدويًا.

بعد ذلك، تبدأ مرحلة تنفيذ الواجهة الأمامية حقًا. سواء تم استخدام HTML/CSS/JS الأصلي أو أطر عمل مثل Vue و React، فإن العملية الأساسية هي نفسها. تستخدم الواجهة الأمامية "الحاوية كحامل أساسي"، وتعيد بناء هيكل الصفحة وفقًا للتسلسل الهرمي ودلالات كل وحدة في التصميم. الحاوية هنا تشير إلى وحدة ذات حدود تخطيط واضحة، مخصصة لحمل وتنظيم العناصر الفرعية. لا تعرض المحتوى المباشر بنفسها، بل من خلال قواعد مثل Flex وGrid، تحدد نطاق ترتيب العناصر الداخلية. و"الكتل الهيكلية" (مثل شريط التنقل العلوي، الشريط الجانبي، منطقة قائمة المقالات، تذييل الصفحة، إلخ من المناطق الوظيفية/المحتوية التي يمكن تمييزها بصريًا) تعتمد على الحاويات؛ داخل كل كتلة هيكلية، ستكون هناك حاويات أصغر متداخلة لتنظيم العناصر، مثل عنصر قائمة مقالات واحد ستتحكم فيه "حاوية عنصر القائمة" في الهامش الداخلي والتخطيط العام، ثم تغلف العنوان والملخص والوقت وأيقونة الغلاف والتفاصيل الأخرى.

في أطر العمل الأمامية الحديثة، يتم عادةً تنفيذ هذه "الكتل الهيكلية (والحاويات والعناصر المرتبطة بها)" كـ "مكونات". يمكن فهم المكونات ببساطة على أنها: وحدات واجهة قابلة لإعادة الاستخدام ذات حدود واضحة، تدمج تخطيط الحاوية والمنطق، وتحتوي على حاويات تتحكم في المظهر والترتيب (مثل "مكون الزر" يستخدم حاوية لتحديد العرض والارتفاع والحدود المستديرة، و"مكون بطاقة المقالة" يستخدم حاوية لتنظيم موضع العنوان والغلاف)، كما تغلف المنطق التفاعلي. الأجزاء المتكررة الظهور والمتسقة الشكل في التصميم (مثل الأزرار ذات النمط الموحد، بطاقات المقالات المستخدمة بشكل متكرر) سيتم تجريدها في الكود كمكونات: يمكن إعادة استخدامها في صفحات/سيناريوهات مختلفة لتقليل التطوير المتكرر، ويمكن أيضًا من خلال قواعد الحاويات الموحدة للمكونات ضمان اتساق التخطيط والنمط في جميع أماكن إعادة الاستخدام.

بعد ذلك، تستخدم الواجهة الأمامية نظام الأنماط لاستعادة المظهر والتخطيط. موارد PNG/JPG وغيرها التي تم تصديرها في مرحلة تقطيع الصور ستتم إضافتها كـ <img> أو صور خلفية داخل المكونات أو الكتل الهيكلية، أو يتم استيرادها وفقًا لطريقة الموارد الثابتة الموصى بها من كل إطار عمل؛ البيانات المحددة للعرض والارتفاع والمسافات وارتفاع السطر التي تم الحصول عليها في مرحلة قياس الأبعاد ستتحول إلى خصائص أنماط مثل width و height و margin و padding و line-height وتُطبق على المكونات أو الكتل الهيكلية المقابلة؛ الألوان والخطوط والظلال والحدود المستديرة وحالات hover/active وغيرها التي تم تنظيمها في مرحلة استخراج التعليقات ستُطبق على color و font-family و font-size و box-shadow و border-radius والفئات الزائفة أو فئات الحالة في حلول محددة مثل CSS و CSS Modules و CSS-in-JS و Tailwind. في هذا الوقت، توفر تقطيع الصور والأبعاد والتعليقات مجموعة من المعلمات البصرية الدقيقة، بينما توفر المكونات والكتل الهيكلية وحدات تنظيم الكود لحمل هذه المعلمات، والاثنان معًا يشكلان تنفيذ واجهة قابل للصيانة وإعادة الاستخدام.

لكن النموذج المتمحور حول الملفات المحلية بطبيعته غير فعال. تُنقل الإصدارات عبر البريد الإلكتروني وأقراص الشبكة، ويسهل الخلط بين المسودات الجديدة والقديمة، ويعتمد التصميم والتطوير بشكل كبير على طرق التفاعل المعقدة المذكورة أعلاه، وتكلفة التعاون واحتمال الأخطاء ليستا منخفضين.

بعد صعود الإنترنت المحمول، زادت متطلبات تعقيد الواجهة وسرعة التكرار بسرعة، وأصبح "الكبير والشامل" في Photoshop تدريجيًا ثقيلًا. في هذه المرحلة، ظهر Sketch. ركز Sketch على تصميم UI نفسه، وتخلص من معظم الأعباء المتعلقة بالمعالجة البصرية اللاحقة؛ استخدم Symbols لجعل العناصر عالية إعادة الاستخدام مثل الأزرار والتنقل ومربعات الإدخال مكونات، تعديل واحد يمكن أن يتزامن عالميًا؛ مع أدوات مثل Zeplin، أنشأ تلقائيًا التعليقات ومقاطع الأنماط. أدخل Sketch "تفكير المكونات" في سير عمل التصميم. لكنه لا يزال تطبيق سطح مكتب قائم على الملفات المحلية، ويتطلب التعاون في الوقت الفعلي استخدام أقراص الشبكة أو المكونات الإضافية الخارجية أو أدوات الإصدارات لتحقيقه بشكل غير مباشر، ولم يحل المشكلة الأساسية لـ "عدة أشخاص يعدلون نفس المسودة في نفس الوقت".

ما غير قواعد اللعبة حقًا كان Figma. منذ عام 2016، دمج تصميم UI والنماذج الأولية والتعليقات التعاونية في المتصفح، ودعم ميزات حديثة متعددة: مؤشرات متعددة في الوقت الفعلي، تعليقات عبر الإنترنت، خط زمني للإصدارات، روابط مشاركة، إلخ. ما يبدو بسيطًا جدًا اليوم كان في ذلك الوقت تحديًا مباشرًا لنموذج Photoshop/Sketch.

بعد ذلك، لم يعد تصميم الواجهات ملفات مبعثرة على أجهزة الكمبيوتر الخاصة بكل شخص، بل مركزًا على لوحة عمل سحابية عبر الإنترنت ومحدثة في الوقت الفعلي. حول هذه اللوحة، يمكننا تخيل المزيد، باستخدام الأتمتة أو AI لطمس الحدود بين التصميم والكود الأمامي.

في البداية، لم نتمكن من الاعتماد إلا على مكونات إضافية من منصات مختلفة لتصدير المكونات ومعلومات الأنماط من التصميم شبه تلقائيًا كقصاصات كود (مثل هياكل مكونات React/Vue، متغيرات CSS، إلخ)، وجوهرها هو تحقيق استخراج المعلومات المنظمة من خلال المكونات الإضافية. بعد ذلك، مع تطور قدرات المنصة، بدأت معظم منصات التصميم في دعم وظائف MCP للنماذج الكبيرة (Model Context Protocol، بروتوكول سياق النموذج): يوفر هذا البروتوكول مجموعة من الآليات المعيارية التي تسمح للنماذج الكبيرة بالوصول بأمان وتحكم إلى ملفات التصميم وواجهات المكونات الإضافية والبيانات الوصفية للمشروع، مما يسهل تصدير التصميم ككود.

لاحقًا، على أساس المكونات الإضافية و MCP، دخلت أتمتة الكود الأمامي مرحلة دعم أصلي لاستنتاج هيكل الكود مباشرة من التصميم. يمكننا إنشاء هيكل مشروع واجهة أمامية كامل والتسلسل الهرمي للمكونات ونظام الأنماط ونتائج الكود المقابلة بنقرة واحدة داخل أداة التصميم. هذا يحرر المصممين ومهندسي تطوير الواجهة الأمامية من العمل اليدوي لنقل تفاصيل التصميم، ويسمح لهم بتخصيص مزيد من الجهد لتحسين تجربة المستخدم وتحديث إصدارات الوظائف.

---

2. الشروع في Figma

بعد ذلك ننتقل من المفاهيم المجردة إلى التطبيق العملي. نظرًا لقيود الوقت، سنتعلم فقط العمليات الأساسية لـ Figma لضمان أنه حتى لو لم تكن قد استخدمت أداة تصميم من قبل، يمكنك متابعة التمارين. إذا كنت ترغب في تعلم وظائف Figma الكاملة، يرجى الرجوع إلى الدروس الرسمية التفصيلية التي يوفرها Figma: https://help.figma.com/hc/en-us/sections/30880632542743-Figma-Design-for-beginners

أو يمكنك الرجوع إلى الدروس التالية لبناء صفحة ويب بسيطة مثل معرض الأعمال الشخصي بسرعة: https://help.figma.com/hc/en-us/sections/35895585621655-Figma-Sites-collectio

على اليسار مدخل إنشاء المشاريع وإدارة الموارد، والأزرار في الزاوية العلوية اليمنى هي الوظائف الشائعة في Figma. من بينها، Make يُستخدم لجعل AI ينشئ لك مسودة واجهة أو هيكل تقريبي بجملة واحدة، Design هي منطقة العمل الرئيسية لرسم صفحات الويب/التطبيقات وبناء المكونات وإنشاء النماذج الأولية، FigJam مثل السبورة الجماعية، تُستخدم للصق الملاحظات اللاصقة ورسم المخططات الانسيابية والمناقشات الأولية، Buzz هي أداة إنتاج أصول العلامة التجارية على نطاق واسع، تُستخدم لإنشاء المحتوى دفعة واحدة للحفاظ على اتساق العلامة التجارية، و Site هي لتنظيم هذه التصاميم في صفحات ويب أو مواقع توثيق حقيقية قابلة للوصول للعرض الخارجي.

قد يبدو أن Figma لديه الكثير من الوظائف وأنه من الصعب البدء، لكن في الواقع هذه الأدوات الوظيفية هي في جوهرها مسألة تدريب وممارسة. لا تخف من ارتكاب أخطاء في البداية، ولا تفكر في القيام بكل شيء بشكل صحيح من المرة الأولى. فقط ابدأ في اللعب، وبالممارسة ستتمكن من الإتقان بسرعة.

في هذا الدرس التعليمي، للبدء بسرعة، سنقدم شرحًا بسيطًا لوظيفة Design.

2.1 إنشاء ملف Design جديد

من الصفحة الرئيسية أو المدخل في الزاوية العلوية اليمنى، اختر Design لإنشاء ملف جديد، وستدخل لوحة تصميم فارغة. تنقسم هذه الواجهة تقريبًا إلى ثلاثة أجزاء: على اليسار الصفحات والطبقات، تُستخدم لعرض وتعديل علاقة الصفحات والعناصر؛ في المنتصف لوحة العمل، لعرض التأثير الحالي؛ على اليمين الخصائص والأنماط، لتعديل الأشكال والألوان والأنماط المحددة؛ في الأسفل شريط أدوات، للتبديل بين الأدوات، بما في ذلك التحديد ورسم الأشكال وإدخال النص والتعليقات والمكونات الإضافية، إلخ. بعد تحديد أداة، يمكنك الضغط على مفتاح Esc للعودة إلى أداة الماوس الافتراضية.

2.2 إنشاء إطارك الأول (Frame)

قبل وضع العناصر رسميًا، تحتاج إلى تحديد حد واضح للصفحة أولاً، وهذا الحد يتولاه Frame. يمكنك اختيار أداة Frame من شريط الأدوات السفلي، أو الضغط مباشرة على مفتاح F، ثم سحب منطقة مستطيلة على لوحة العمل.

1. استخدم أداة Frame من شريط الأدوات السفلي، أو اضغط مباشرة على مفتاح F.
2. اسحب منطقة مستطيلة في لوحة العمل، وغيّر العرض في شريط الخصائص الأيمن إلى مثلاً 1440، والارتفاع إلى 900.
3. في شريط الطبقات الأيسر، أعد تسمية هذا Frame، مثل My First Page أو اسم مشروعك.

هذا Frame هو حاوية صفحة لواجهة شاشة واحدة. بعد ذلك، يجب وضع العنوان والنص والأزرار والصور والمحتويات الأخرى داخل هذا Frame، بدلاً من تناثرها في أي مكان على لوحة العمل. تنظيم المحتوى بحدود Frame يساعد في الحفاظ على هيكل قابل للتحكم عند إعداد التمرير لاحقًا، والتكيف مع أحجام الأجهزة المختلفة، وتصدير الشاشات وإنشاء النماذج الأولية.

2.3 وضع النص والعناصر البسيطة في Frame

الآن بعد أن أصبح لدينا حاوية، دعنا نتعلم كيفية وضع المكونات الأساسية، مثل: العنوان والعنوان الفرعي والزر ومنطقة الصورة الموضعية.

1. اختر أداة النص (T في شريط الأدوات السفلي)، انقر في Frame، وأدخل عنوان الصفحة، مثل: My Portfolio. في الخصائص على اليمين، زِد حجم الخط قليلاً (مثلاً 96)، واجعل وزن الخط أثقل.
2. تحت العنوان، استخدم أداة النص مرة أخرى لإدخال سطر وصف بسيط، مثل جملة أو جملتين تصف ما تفعله هذه الصفحة. يمكن أن يكون حجم الخط أصغر قليلاً، وارتفاع السطر أكبر قليلاً، ليكون أسهل في القراءة.
3. ارسم شكل زر أولي: استخدم أداة المستطيل لرسم مستطيل بحجم 200 × 48 تقريبًا تحت العنوان، أعطه لون تعبئة واضح على اليمين، وأضف حدودًا مستديرة بشكل مناسب.
4. ثم استخدم أداة النص لإدخال نص الزر فوق المستطيل، مثل Get Started، حدد المستطيل والنص معًا، واستخدم أداة المحاذاة العلوية لجعل النص في المنتصف أفقيًا وعموديًا.
5. على جانب الزر أو تحته، ارسم مستطيلًا رماديًا فاتحًا كبيرًا كـ "منطقة صورة موضعية"، يمكن استخدامه لاحقًا لوضع صور العرض.

بعد الوصول إلى هنا، لديك بالفعل "مسودة صفحة رئيسية" بسيطة جدًا ولكن ذات هيكل كامل: عنوان، فقرة، زر، ومنطقة عرض رئيسية.

2.4 استخدام Auto Layout لتنظيم العناصر

إذا تم سحب جميع العناصر بشكل عشوائي فقط، فستصبح الصفحة فوضوية قريبًا. مفهوم مهم جدًا في Figma هو Auto Layout، الذي يمكنه تحويل مجموعة من العناصر إلى حاوية ذات قواعد.

يمكنك تحديد "العنوان الرئيسي + العنوان الفرعي + الزر" الثلاثة، والنقر على Add Auto layout في شريط الخصائص الأيمن.

عندها سيتم تغليف هذه العناصر الثلاثة في حاوية واحدة، ويمكنك تعديل المعلمات على اليمين، وستتكيف عناصر التخطيط تلقائيًا وفقًا للمعلمات:

• هل يتم ترتيبها عموديًا أم أفقيًا.
• ما هي المسافة بين العناصر.
• كم هو الهامش الداخلي بين هذه الكتلة وحافة الحاوية (padding).

وبالمثل، يمكن استخدام Auto Layout داخل الزر أيضًا، يمكننا تحقيق هذا التأثير: عندما أقوم بتعديل النص، سيتكيف طول الزر تلقائيًا.

حدد مستطيل خلفية الزر ونص الزر أولاً، أضف Auto Layout، لجعل هذين الشيئين "حاوية زر". ثم حدد حاوية الزر هذه، واضبط العرض والارتفاع على Hug contents. بهذه الطريقة، سيبقى النص دائمًا في منتصف الزر، سواء كان النص أكثر أو أقل، سيتكيف عرض الزر تلقائيًا.

2.5 تحويل الزر إلى مكون قابل لإعادة الاستخدام

الآن سنتعلم مفهومًا جديدًا: المكونات. المكون يعني عنصرًا يمكن إعادة استخدامه مرارًا، مثل الزر، طالما أنك تتوقع أنك ستستخدمه مرارًا، يمكنك التفكير في جعله مكونًا. سنقوم بالعملية الأساسية للزر الذي أضفنا إليه Auto Layout للتو:

1. حدد حاوية الزر بالكامل.
2. انقر بزر الماوس الأيمن واختر Create component (إنشاء مكون).

بهذا الشكل، يتحول هذا الزر من مجموعة طبقات عادية إلى قالب مكون رئيسي. بعد ذلك، إذا كنت تحتاج إلى زر بنفس النمط في صفحات أو Frames أخرى، يمكنك سحبه مباشرة من لوحة Assets على اليسار لاستخدامه.

في هذا الوقت، جميع الأزرار المستخدمة هي نسخ متزامنة من هذا القالب. عندما تقوم بتعديل لون القالب أو حدوده المستديرة أو مسافاته، ستتحدث جميع النسخ تلقائيًا.

بعد ذلك، تكون قد أتقنت الاستخدام البسيط لـ Figma بشكل أولي. لا تحتاج إلى فهم جميع الوظائف من البداية، فقط اتبع الخطوات لإنشاء أول صفحة بسيطة، وتعرف على هذه العمليات الأساسية القليلة، ثم استكشف ببطء المزيد من القدرات في الدروس الرسمية. مع زيادة مرات الاستخدام، ستتمكن بالتأكيد من الإتقان.

---

3. الشروع في MasterGo

بعد فهم سير العمل الأساسي لـ Figma، دعنا نلقي نظرة على MasterGo. يمكنك اعتبار MasterGo ببساطة كنسخة صينية من Figma، لكن مع بعض الاختلافات في بعض الوظائف. بشكل عام، يحافظ على تخطيط الواجهة وفلسفة التشغيل المشابهة لـ Figma: يحتوي أيضًا على لوحة عمل وشجرة طبقات ولوحة خصائص، ويدعم أيضًا المكونات والأنماط والتخطيط التلقائي والتعاون بين عدة أشخاص. للمزيد من التفاصيل، يمكنك الرجوع إلى الدروس الرسمية لـ MasterGo: https://mastergo.com/tutorials/12?全程高能，MasterGo 最完整实用教程，让你从零到精通！

3.1 إنشاء ملف تصميم جديد

1. الدخول إلى واجهة MasterGo

   1. افتح موقع MasterGo الرسمي وسجل الدخول إلى حسابك.
   2. بعد الدخول، سترى منطقة الصفحة الرئيسية المشابهة لـ "قائمة الملفات/قائمة المشاريع"، لإدارة ملفات التصميم الخاصة بك.

2. إنشاء ملف جديد

   1. ابحث عن زر "+ ملف تصميم" في الزاوية العلوية اليمنى وانقر عليه، أو اختر استيراد ملفات مثل Figma.
   2. بعد النقر، ستدخل لوحة عمل فارغة، وهذه هي مساحة عمل التصميم في MasterGo.

3. التعرف على مناطق الواجهة الأساسية بعد تعلم استخدام Figma، طريقة استخدام MasterGo مشابهة جدًا، وتنقسم بشكل أساسي إلى عدة مناطق:

   

   1. شريط الأدوات العلوي: يقع في أعلى لوحة العمل، على اليسار موقع الملف واسمه، في المنتصف صف من أزرار الأدوات الشائعة (تحديد، منطقة/لوحة، شكل، نص، تعليق، تعليقات، اختيار المكونات الإضافية وأدوات AI، إلخ)، على اليمين الأعضاء المتصلون حاليًا، مدخل المشاركة، وتكبير/تصغير لوحة العمل والتحكم في المعاينة.
   2. اللوحة اليسرى: تنقسم بشكل أساسي إلى طبقات وموارد، وهي حاليًا في علامة الطبقات التبويب، ويمكنك رؤية قائمة الصفحات، وهيكل وترتيب جميع الطبقات تحت هذه الصفحة.
   3. منطقة لوحة العمل الوسطى: منطقة العمل المحددة للرسم والتخطيط، جميع Frames والمكونات والأشكال ستعرض هنا.
   4. لوحة الخصائص اليمنى: لعرض وتعديل خصائص الكائن المحدد، مثل الحجم والموضع والمحاذاة وتعبئة الخلفية والحدود والحدود المستديرة، إلخ. إذا لم يتم تحديد أي كائن، فستعرض إعدادات متعلقة بلوحة العمل، مثل لون خلفية لوحة العمل والتسميات وخيارات التصدير.

3.2 إنشاء إطارك الأول

قبل وضع الأشياء رسميًا، نحتاج إلى حاوية صفحة لتحديد حدود وأبعاد الواجهة. تسمى هذه الحاوية عادةً Frame في MasterGo.

الخطوات:

1. اختيار أداة Frame
   1. ابحث عن أداة Frame/لوحة في شريط الأدوات، انقر لاستخدام المعلمات المسبقة لإنشاء المحتوى مباشرة على اللوحة.
   2. أو استخدم اختصار لوحة المفاتيح (عادةً F، إذا كان هناك اختلاف، فاعتمد على الواجهة الفعلية).
2. اسحب منطقة مستطيلة في لوحة العمل
   1. بعد السحب، سترى منطقة بإطار تحديد.
   2. في لوحة الخصائص اليمنى، يمكنك رؤية عرض وارتفاع هذا Frame.
   3. غيّر العرض إلى مثلاً 1440، والارتفاع إلى 900 (أحد الأحجام الشائعة لصفحة ويب بشاشة واحدة).
3. إعادة تسمية Frame
   1. ابحث عن هذا Frame في لوحة الطبقات اليسرى.
   2. انقر نقرًا مزدوجًا على الاسم، وغيّره إلى اسم مشروعك، مثل: My First Page، أو أي اسم صفحة تريده.

3.3 إنشاء محتوى اللوحة

الآن بعد أن أصبح لدينا حاوية، باستخدام طرق مشابهة لما تعلمناه في Figma، يمكننا بسهولة الحصول على صفحة عرض مشابهة. (يمكنك محاولة نسخ عناصر النص من لوحة Figma، ويدعم الاستيراد المباشر لمكونات النص عن طريق اللصق)

تجدر الإشارة إلى أن سلوك وظيفة Auto Layout مختلف قليلاً. في MasterGo، إذا كنت تريد تحقيق تأثير مشابه لـ Figma حيث يتغير طول الزر مع طول النص، تحتاج أولاً إلى إنشاء حاوية أو مكون على أساس عنصر المستطيل المقابل، كما هو موضح في الشكل:

بعد إنشاء الحاوية بنجاح، ضع مستطيل الزر والنص في الحاوية المقابلة جنبًا إلى جنب، ثم ابحث عن زر Auto Layout على اليمين وقم بتفعيل الوظيفة التلقائية، ويمكنك تحقيق وظيفة تكييف عرض الزر مع طول النص بنجاح.

3.4 إنشاء صفحة بالذكاء الاصطناعي

في MasterGo، واحدة من الوظائف المثيرة للاهتمام التي تستحق الذكر هي إنشاء الصفحات بالذكاء الاصطناعي. يمكنك استخدام جملة واحدة أو إرفاق صورة مرجعية لإنشاء مكونات قابلة للتعديل في MasterGo والحصول على كود قابل للاستخدام مباشرة. يمكنك إدخال المتطلبات باللغة الصينية أو الإنجليزية مباشرة، وستقوم الصفحة بإرجاع مستند تخطيط صفحة بهيكل واضح وفقًا للمتطلبات، والتأثير كالتالي:

بعد انتهاء إنشاء مستند التصميم، انقر لبدء الإنشاء، وانتظر قليلاً للحصول على تأثير صفحة الويب الفعلية:

في هذا الوقت لديك خياران للعمل: الأول هو النقر على الزر الأزرق لإدراج نتيجة الإنشاء مباشرة في لوحة العمل، والثاني هو النقر على وظيفة معاينة الكود للحصول على كود الصفحة الكاملة مباشرة، وواجهة التشغيل المحددة كالتالي:

بعد إدراج النتيجة في لوحة العمل، يمكنك أيضًا إجراء تعديلات أكثر دقة على التخطيط العام للصفحة وتفاصيل العناصر (مثل الخطوط والألوان والمسافات، إلخ) حتى يطابق التأثير النهائي توقعاتك بالكامل.

---

4. الخطوة التالية: من النموذج الأولي إلى الكود

في المحتوى السابق، تعلمنا العمليات الأساسية لـ Figma و MasterGo، ويمكننا إنشاء نماذج أولية للواجهة بهيكل كامل. الخطوة الحاسمة التالية هي: كيفية تحويل هذه التصاميم إلى كود واجهة أمامية يعمل فعليًا في المتصفح؟

📚 الدروس اللاحقة

للحصول على مقدمة مفصلة للطرق، يرجى الرجوع إلى من النموذج الأولي للتصميم إلى كود المشروع، حيث ستتعلم:

• التحويل المباشر بواسطة AI متعدد الوسائط: إرسال لقطات شاشة التصميم إلى AI لإنشاء كود HTML/React مباشرة
• Figma Make: استخدام أداة AI الرسمية من Figma لاستعادة التصميم بدقة عالية وتصدير الكود
• MasterGo AI: إنشاء صفحات قابلة للتعديل بنقرة واحدة والحصول على الكود

لكل من هذه الطرق مزايا وعيوب، ومناسبة لسيناريوهات مختلفة. يُنصح باختيار سير العمل المناسب وفقًا لمتطلبات المشروع.

---

5. الخلاصة

من خلال دراسة هذا الفصل، تكون قد أتقنت:

1. قيمة أدوات تصميم الواجهات الأمامية: فهم سبب الحاجة إلى أدوات التصميم وكيف تحل مشاكل توزيع المعلومات والتعاون الجماعي.

2. العمليات الأساسية في Figma:

   • إنشاء ملف Design وإطارات Frame
   • إضافة عناصر أساسية مثل النص والأشكال
   • استخدام Auto Layout لتحقيق تخطيط متكيف
   • إنشاء نظام مكونات قابل لإعادة الاستخدام

3. العمليات الأساسية في MasterGo:

   • التعرف على تخطيط الواجهة المشابه لـ Figma
   • إنشاء Frame ومحتوى اللوحة الأساسي
   • استخدام وظيفة إنشاء الصفحات بالذكاء الاصطناعي لإنشاء نماذج أولية بسرعة

💡 الخطوة التالية

الآن بعد أن أتقنت أساسيات استخدام أدوات تصميم الواجهات الأمامية، يمكنك تجربة:

• تصميم صفحة معرض أعمال شخصية لنفسك
• تصميم نماذج أولية للواجهة للمشاريع القادمة
• تعلم من النموذج الأولي للتصميم إلى كود المشروع لتحويل التصاميم إلى كود قابل للتشغيل

إذا كنت تعمل على مشروع لنصنع صور هوجورتس معًا، يمكنك تصميم نموذج أولي للواجهة أولاً، ثم تصدير الكود ودمجه مع وظائف AI.

مقالات ذات صلة

يُنصح بمواصلة تعميق تصميم UI والتمرين العملي على تحويل التصميم إلى كود.

🧱2.2 بناء أول تطبيق حديث - تصميم UI

↗

أنجز هيكل الصفحات والمكونات والتخطيط ضمن نظام بصري موحد.

💻2.6 من نموذج التصميم إلى الكود

↗

حوّل التصميم إلى كود واجهة أمامية ومكونات قابلة للصيانة.

🧩2.7 تحديث الواجهة بمكتبات مكونات حديثة

↗

استخدم مكتبات المكونات لتحسين الاتساق وسرعة التطوير.