شرح فيجما بالعربي للمبتدئين: دليل عملي لأول مشروع على Figma

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

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

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

قبل أن تبدأ: الحساب والخطوط

• الخطط. في Figma خطة مجانية اسمها Starter بحدود معينة، وخطط مدفوعة تقوم على أنواع مختلفة من المقاعد. والأسعار والحدود تتغير، فراجع صفحة الأسعار الرسمية قبل أن تقرر. وإن كنت طالباً أو معلماً، فابحث هناك عن العرض التعليمي.
• المتصفح أم التطبيق؟ الاثنان يعملان، وأول فرق ستلاحظه هو الخطوط. خطوط Google متاحة افتراضياً، ومنها خطوط عربية كثيرة. أما الخطوط المثبتة على جهازك، فتحتاج من المتصفح إلى أداة Figma لتثبيت الخطوط (Font Installer)، بينما التطبيق يتضمنها أصلاً. وهذه نقطة تهم المصمم العربي، لأن خطوطاً عربية كثيرة تستخدمها العلامات التجارية ليست على Google Fonts. وعلى ChromeOS و Linux تتاح الخطوط الافتراضية فقط.
• شاشة البرنامج. الطبقات (Layers) على اليسار، ومساحة العمل في الوسط، وخصائص العنصر الذي تحدده على اليمين، وشريط الأدوات الأساسية. تجوّل فيها قليلاً قبل أن تبدأ المشروع.

الإطارات (Frames): الشاشات التي تصمم عليها

كل شيء في Figma يبدأ بإطار. تصف Figma الإطارات بأنها طبقات حاوية تنظّم الأشكال والصور والنصوص في تصميم واحد، ويمكن أن يحتوي الإطار إطاراً آخر: أيقونة داخل زر، داخل بطاقة، داخل شاشة. اختر أداة الإطار، ثم اختر مقاساً جاهزاً مثل Phone أو Desktop، أو ارسم مقاسك.

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

أدلة التخطيط (Layout Guides)

أدلة التخطيط هي ما كانت Figma تسميه شبكات التخطيط (Layout Grids)، وتذكر صفحة المساعدة أن الاسم تغيّر في مايو 2025. وهي ثلاثة أنواع: شبكة منتظمة، وأعمدة، وصفوف. والأعمدة هي الأكثر استخداماً في الشاشات. ونقطة بداية شائعة: 12 عموداً على الكمبيوتر و4 على الجوال، بهامش ومسافة بين الأعمدة ثابتين في المنتج كله.

وتفصيلة تخص العربية: يمكن ضبط الأعمدة على Left أو Center أو Right أو Stretch، والنوع Right يبدأ الأعمدة من يمين الإطار، وهو الجانب الذي يبدأ منه المحتوى العربي.

التخطيط التلقائي (Auto Layout)

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

وثلاثة خيارات للمقاس تؤدي أغلب العمل:

• Hug contents: الإطار ينكمش على ما بداخله. مناسب للأزرار والوسوم.
• Fill container: الطبقة تمتد لتملأ الإطار الأب. مناسب لحقول الإدخال والبطاقات في عمود.
• Fixed: المقاس ثابت كما حددته.

وهذا مهم جداً في العمل بلغتين، لأن «تواصل معنا» و Contact us لا تأخذان المساحة نفسها، والزر المبني بالتخطيط التلقائي يتسع للاثنتين دون أن تعيد رسمه. وقد قرّبت Figma التخطيط التلقائي من Flexbox في CSS، أي من الطريقة التي يبني بها المطورون الصفحات، فمن يتقن التخطيط التلقائي يفهم كيف ستُبنى الصفحة.

ملاحظة للتصميم العربي: حتى أكتوبر 2026، تقول صفحة Figma عن الترتيب الأفقي والرأسي في التخطيط التلقائي إن العناصر تملأ الإطار من اليسار إلى اليمين، ولم أجد فيها إعداداً يعكس الصف للغات التي تُكتب من اليمين. لذلك رتّب العناصر في كل صف أفقي بنفسك في الإطار العربي. وفي دليلي عن تصميم واجهات المستخدم العربية RTL قائمة كاملة بما يُعكس وما يبقى.

المكونات (Components) وأشكالها (Variants)

المكوّن عنصر تصممه مرة واحدة وتستخدمه في كل مكان: زر، حقل إدخال، بطاقة، شريط تنقل. الأصل يسمى المكوّن الرئيسي (Main Component)، وكل نسخة منه تسمى Instance. عدّل المكوّن الرئيسي فتتحدث كل النسخ. ويمكنك تغيير النص أو الأيقونة في نسخة بعينها دون أن ينقطع ارتباطها بالأصل.

والأشكال (Variants) تجمع صور المكوّن الواحد في مجموعة: الزر في حالته العادية، وعند مرور المؤشر، وعند الضغط، وفي حالة التعطيل، أو بمقاس صغير وكبير. وخصائص المكوّن (Component Properties) تضيف مفاتيح بسيطة: إظهار أيقونة أو إخفاؤها، وتبديل الأيقونة، وتعديل النص، واختيار الشكل.

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

وتجنّب فصل النسخ عن أصلها (Detach). النسخة المفصولة لا تتحدث، وبعد أشهر لا يعرف أحد أي الأزرار هو الصحيح.

الأنماط (Styles) والمتغيرات (Variables)

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

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

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

وفي أول مشروع يكفيك إعداد بسيط: متغيرات للألوان الأساسية، وأنماط نص منفصلة للعربية والإنجليزية، لأن العربية تحتاج غالباً أحجاماً خاصة وارتفاع سطر أكبر.

النماذج التفاعلية (Prototyping)

النموذج التفاعلي يحوّل الإطارات إلى شيء يمكن الضغط عليه. من تبويب Prototype، اسحب وصلة من زر إلى إطار آخر، وتسمي Figma هذه الوصلات noodles. ولكل وصلة ثلاثة أجزاء:

• المحفّز (Trigger): الضغط أو اللمس، أو مرور المؤشر، أو السحب، أو مرور وقت محدد.
• الإجراء (Action): الانتقال إلى إطار، أو فتح نافذة فوق الشاشة (Overlay)، أو التمرير إلى قسم.
• الحركة (Animation): انتقال فوري، أو تلاشٍ، أو انزلاق، أو Smart Animate الذي يحرّك الطبقات المتشابهة بين الإطارين.

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

Dev Mode والتسليم للمطورين

Dev Mode مساحة عمل للمطورين داخل الملف نفسه. تصفه Figma بأنه المكان لفحص التصميم، ورؤية الخصائص والكود المولّد، وتنزيل الأصول، ومقارنة التغييرات، وإدارة التسليم. ويستطيع المصمم أن يحدد الإطارات والأقسام الجاهزة للتطوير (Ready for dev)، ويضيف ملاحظات بالمقاسات والتفاصيل. وتنتقل إليه بـ Shift D.

ووفق مركز المساعدة في أكتوبر 2026، يتاح Dev Mode في الخطط المدفوعة ويحتاج مقعداً من نوع Full أو Dev. لكن عادات التسليم الجيد لا تكلف شيئاً:

• سمِّ الطبقات والإطارات. اسم مثل «Frame 427» لا يفيد أحداً.
• استخدم المكونات والأنماط والمتغيرات، فيرى المطور نظاماً لا قيماً متفرقة.
• اكتب ملاحظات على ما لا يظهر في الملف: ماذا يحدث عند الخطأ، وما الذي يُعكس في العربية، وأي أرقام تُستخدم.

التعاون والتعليقات

شارك الملف بصلاحية «can view» أو «can edit». وللتعليق اضغط C ثم انقر على مساحة العمل. اكتب @ لتذكر شخصاً، فترسل له Figma التعليق بالبريد مع معاينة للتصميم. والتعليقات ترتبط بالإطارات الرئيسية وتتحرك معها، وتقول صفحة المساعدة إن أي شخص لديه صلاحية المشاهدة على الأقل يستطيع إضافتها.

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

الكتابة بالعربي في Figma

وفق صفحة Figma عن إضافة النص من اليمين إلى اليسار، كما راجعتها في أكتوبر 2026:

• النص من اليمين إلى اليسار والنص ثنائي الاتجاه مدعومان في ملفات Figma Design و FigJam.
• يكتشف Figma اتجاه النص افتراضياً من اللغة التي تكتب بها.
• يمكنك تغيير الاتجاه من الشريط الجانبي الأيمن، أو من الإجراءات السريعة (Ctrl / على Windows و Command / على Mac)، أو من قائمة Text ثم Text direction.
• إن لم يتضمن الخط حرفاً تكتبه، يعرض Figma هذا الحرف بخط من عائلة Noto.

والنقطة الأخيرة تستحق الانتباه. ظهور خط بديل في تصميمك يعني أن الخط الذي اخترته ينقصه حرف، والموقع الحقيقي لن يعرض البديل نفسه إلا إن حمّله المطور. فراجع كل خط عربي قبل أن تبني عليه نظاماً: الحروف والأرقام وعلامات الترقيم العربية مثل الفاصلة وعلامة الاستفهام. وإن فتحت ملفاً قديماً كُتب فيه العربي بإضافة من قبل أن يدعمه Figma رسمياً، فتقول صفحة المساعدة إن النص يبقى كما هو ويمكن ترقيته.

وعادات بسيطة للعربي في Figma:

• أنماط نص عربية منفصلة بارتفاع سطر أكبر.
• محاذاة النص العربي إلى اليمين، أي إلى بداية السطر العربي.
• لا تباعد بين الحروف (Letter Spacing) في العربية، لأنه يقطع اتصالها.
• اكتب نصاً عربياً حقيقياً فيه أسماء إنجليزية وأرقام، وراجع الترتيب بعينك.

الإضافات (Plugins) بحذر

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

قبل أن تشغّل إضافة على ملف عميل:

• ابحث عن علامة «Data security info available» في صفحتها على Community، وهي تظهر بعد أن تراجع Figma إجابات المطوّر عن أمان البيانات.
• راجع علامة الوصول إلى الشبكة: غير معروف، أو غير مقيّد، أو مقيّد بنطاقات محددة، أو بلا وصول.
• في الملفات التي تحكمها اتفاقية سرية (NDA)، فضّل الإضافات المقيّدة أو التي لا تصل إلى الشبكة، واسأل العميل إن لم تكن متأكداً.

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

مشروعك الأول: صفحة هبوط بلغتين

القراءة عن Figma ليست كالعمل عليه. وهذا مشروع صغير يمرّ على أغلب ما سبق. المطلوب: صفحة هبوط (Landing Page) لمحمصة بن صغيرة في حيّك، بالعربية والإنجليزية، فيها رأس الصفحة مع زر تغيير اللغة، وقسم رئيسي، وثلاث مزايا، ونموذج تواصل، وتذييل.

1. اكتب المحتوى أولاً باللغتين، بكلمات حقيقية لا بنص تجريبي.
2. أنشئ أربعة إطارات: Desktop و Phone، بالعربية وبالإنجليزية، وأضف أعمدة لكل منها.
3. جهّز الأساس: متغيرات الألوان، وأنماط النص العربية والإنجليزية.
4. ابنِ المكونات: زر بأشكاله، وحقل إدخال بعنوانه وحالة الخطأ، وبطاقة ميزة، ورأس صفحة فيه زر اللغة. واستخدم التخطيط التلقائي فيها كلها.
5. ابنِ الصفحة العربية أولاً من نسخ هذه المكونات، فهي التي سيقرؤها أغلب عملاء المحمصة.
6. ابنِ الصفحة الإنجليزية: انسخ الإطارات، وبدّل النصوص، وأعد ترتيب الصفوف الأفقية، واعكس الأسهم، واترك الشعار وعلامات الصح ورقم الجوال كما هي.
7. اصنع النموذج التفاعلي: اربط زر اللغة بين الصفحتين، وأظهر حالة الخطأ في النموذج.
8. اطلب تعليقات من صديق، واحرص أن يقرأ أحدهم النسخة الإنجليزية بعين قارئها.
9. جهّز التسليم: سمِّ الطبقات، واكتب ملاحظات بما يُعكس.
10. انشره في البورتفوليو كمشروع شخصي، وسمِّه باسمه بصدق. وفي دليل بناء بورتفوليو التصميم شرح لطريقة عرضه.

من أعمالي

المشروع الثاني الذي أقترحه للتدريب متجر صغير، وهيل أوف مثال واضح عليه: متجر صيدلية وتجميل في الكويت يبيع أونلاين بالعربية والإنجليزية. صمّمت له في الدار العالمية الشعار، وتطبيق التسوق لـ iOS و Android، وصور المتاجر، والموقع، وبانرات الحملات. وشاشات التطبيق تغطي الرئيسية والأقسام والمنتج والسلة والحساب.

وللأمانة في الأدوات: صُمّم هيل أوف على Adobe XD، وهو البرنامج الذي عملنا به في ذلك المشروع بين 2022 و2023. لكن طريقة التفكير تنتقل كما هي إلى Figma: بطاقة المنتج تصبح مكوّناً بأشكال، والأخضر الغامق والذهبي يصبحان متغيرات ألوان، والطريق من الرئيسية إلى الدفع يصبح مساراً في النموذج التفاعلي. إعادة بناء خمس شاشات كهذه على Figma، باللغتين، تمرين ثانٍ ممتاز.

أخطاء شائعة عند المبتدئين

• مجموعات (Groups) حيث يلزم إطار.
• مقاسات ثابتة حيث يجب أن ينكمش العنصر أو يمتد.
• فصل النسخ عن مكوّنها الرئيسي.
• ألوان مكتوبة باليد بدلاً من الأنماط أو المتغيرات.
• طبقات بأسماء مثل «Frame 427» و«Rectangle 12».
• نسخة عربية ليست إلا الإنجليزية مقلوبة.

الخلاصة

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

وإن كنت تحتاج واجهة تُصمّم بالعربية والإنجليزية، ابدأ مشروعك معي.