مساعدة في فيجما

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

1. أنشئ حسابًا في Figma وادخل إلى الملف الذي تريد العمل عليه.
2. ستجد الشاشات على اليسار، وخصائص كل عنصر على اليمين.

ليست كل العناصر مهمة لك كمبرمج ولذلك حدد ما الذي يهمك، والذي هو عادة: 

1. المقاسات والمسافات
2. الألوان
3. الخطوط
4. ترتيب العناصر (Layout)

أيضا ستحتاج استخراج الأكواد، لنقلها في CSS، فعند الضغط على أي عنصر، يوجد تبويب Inspect يقدم لك:

كود CSS جاهز، القياسات والألوان

الآن ما عليك إلا إنشاء نفس الهيكل في HTML أو React أو أي تقنية تستخدمها. ثم طبّق القيم التي تراها في Figma على الكود. أيضا يمكنك تصدير الصور والأيقونات هي الأخرى، من قسم Export يمكنك استخراج الصور بصيغة PNG أو SVG.

وعليكم السلام ورحمة الله،

يمكنك استخدام Figma مجانا عبر المتصفح من خلال إنشاء حساب على figma.com ثم تفتح المشاريع العامة أو تختار أحد القوالب الجاهزة من Figma Community بكتابة إما:

• "dashboard designs"

أو:

• "web app UI kits"

وذلك في شريط البحث وستجد تصاميم جاهزة لتطبيقات مثل HRMS أو AI dashboards. لاستخراج العناصر وإن كان لديك تصميم جاهز يمكنك فقط فتحه ثم المتابعة أولا تقوم بتكبير التصميم من خلال عمل zoom in واستخدام أداة "Inspect" في اللوحة اليمنى لنسخ أبعاد العناصر بدقة كال width, height, margins, padding والألوان والخطوط والمسافات ثم تقوم بنقلها مباشرة إلى CSS في مشروعك أما بخصوص الأيقونات يمكنك تصديرها ك SVG أو PNG عبر "Export".

ومن المهم أن تركز على responsive breakpoints من التصميم (mobile, tablet, desktop) لتحويلها إلى components في كودك فيما بعد.

لنبدأ من البداية تماما فعندما يرسل لك المصمم رابط المشروع ستقوم بفتح الواجهة التي تنقسم لثلاثة أقسام رئيسية:

• القائمة اليسرى (Layers): تحتوي على الصفحات (Pages) والعناصر الموجودة في التصميم.
• المنتصف (Canvas): مساحة العمل التي ترى فيها التصميم.
• القائمة اليمنى (Inspect/Properties): هذا هو الجزء الذي ستعمل عليه حيث هنا ستجد كود CSS و الألوان والخطوط وزر التصدير (Export).

ثانيا وضع المطور (Dev Mode) : ففي التحديثات الأخيرة أضافت فيجما زرا خاص للمبرمجين قم باابحث عن أيقونة تشبه المفتاح"</>" في أعلى يمين الشاشة أو زر أخضر مكتوب عليه Dev Mode. وعند تفعيله تتحول الواجهة لتركز فقط على الأكواد والمقاسات وتخفي أدوات التصميم التي لا تحتاجها.

نأتي الآن لكيفية إستخراج الأكواد (CSS/Styling) : بمجرد الضغط على أي عنصر في التصميم مثل زر أو نص أو صورة انظر للقائمة اليمنى وستجد قسما للكود (Code Section). يمكنك نسخ خصائص مثل border-radius أو  font-size أو color أو shadows مباشرة ولصقها في ملف CSS الخاص بك.

ولمعرفة المسافات والأبعاد (Measuring) حيث هذه أهم ميزة لضبط الشكل بدقة قم بتحديد العنصر وقم بتحريك الفأرة فوق أي عنصر آخر بجانبه وهنا ستظهر لك خطوط حمراء وأرقام توضح المسافة (Margin/Padding) بين العنصرين بالبكسل.

 وإذا أردت تصدير الصور والأيقونات (Exporting Assets) مثلا لو أردت تحميل شعار أو أيقونة لاستخدامها في الكود قم بالضغط على الصورة أو الأيقونة التي تريدها واذهب للقائمة اليمنى وأبحث عن كلمة Export ثم اضغط على علامة + وقم باختير الصيغة مثل:\

• SVG: للأيقونات والشعارات لأنه أفضل دقة.
• PNG/JPG: للصور .

وأخيرا قم بالضغط على زر Export وسيبدأ التحميل.

أولاً كما تعلم فالتعامل مع Figma كـ Frontend Developer هو مهارة أساسية ، ولكن لست مطالباً بالتصميم، بل بـ "قراءة" التصميم وتحويله لكود.

ولذلك تحتاج لفهم بعض المفاهيم بهذا البرنامج كمايلي

أولاً بالتأكيد تحتاج لفهم واجهة البرنامج فلديك القائمة Layers تحتوي على طبقات التصميم (الصفحات، المجموعات، العناصر). ومساحة العمل التي ترى فيها التصميم والقائمة Inspect أو Properties هذه أهم منطقة لك. منها ستأخذ الـ CSS، الألوان، الخطوط، والقياسات.

ثانياً تحتاج لتعلم كيف تستخرج الأكواد التي تريدها مثل 

• خصائص الـ CSS مثل معرفة المسافات (Padding & Margin)

• استخراج الصور والأيقونات (Export

ولكن هذه المفاهيم تحتاج للبحث عن دورة بسيطة عن figma لمطور واجهات أمامية على اليوتيوب مثلاً وهذه أفضل طريقة .