كيف ممكن تسهل عملية تسليم تصميم الواجهات إلى المبرمج في فيجما 💥
ثريد اليوم بيتكلم عن اخر الخصائص في فيجما لتسهيل التعاون بين المصممين والمبرمجين 🧵
ثريد اليوم بيتكلم عن اخر الخصائص في فيجما لتسهيل التعاون بين المصممين والمبرمجين 🧵
في منتصف السنة الحالية أطلقت فيجما خاصية وضع التطوير (Dev mode) وهو وضع خاص بالبرمجين يشبه إلى حد كبير عملية inspect موقع في المتصفح لمعرفة القياسات وأكواد لغة التنسيق مثل CSS. الوضع حالياً متاح مجاني إلى بداية سنة 2024. يمكن تفعيل وضع التطوير من أعلى.
خصائص وضع التطوير:
🔹الحصول على أكواد تنسيقية للغات برمجية مثل CSS, Swift اللي ذكرت فيجما انها حسنت من جودة الأكواد. سابقاً كانت الوحدات في الأكواد متوفرة فقط ب px وهي غير عملية لانها غير متجاوبة لكن الان يمكن تحويلها إلى وحدة rem.
🔹الحصول على أكواد تنسيقية للغات برمجية مثل CSS, Swift اللي ذكرت فيجما انها حسنت من جودة الأكواد. سابقاً كانت الوحدات في الأكواد متوفرة فقط ب px وهي غير عملية لانها غير متجاوبة لكن الان يمكن تحويلها إلى وحدة rem.
🔹يمكن للمصمم إعلام المبرمج بجاهزية واجهة معينة للبرمجة من خلال وضع الواجهة في section وتفعيل خاصية ready for dev. سوف تظهر بعدها الواجهات الجاهزة للتطوير للمبرمج تحت جزئية ready for development في وضع التطوير.
🔹إذا حصل اي تغيير من قبل المصمم في اي واجهة يمكن للمبرمج مقارنة نسخة الواجهة السابقة والحالية لمعرفة التغييرات في فيجما دون الحاجة إلى التواصل مع المصمم.
🔹يمكن تحميل assets (الأيقونات والصور) المستخدم في تصميم بضغطة زر واحدة وبصيغ مختلفة مثل svg, png.
🔹يمكن للمبرمج استخدام إضافة في Visual Studio لجلب الواجهة إلى VS، الحصول على أكواد لأجزاء من الواجهة، إشعارات بخصوص تحديثات في الواجهة و اقتراحات عند كتابة الكود.
رابط لمعرفة المزيد عن الإضافة:
help.figma.com
رابط لمعرفة المزيد عن الإضافة:
help.figma.com
🔹ايضاً يساعد المبرمج وجود جميع الأحجام والألوان المستخدمة في التصميم في مكان واحد مثل إضافتها في ملف التصميم او استخدام خاصية المتغيرات.
هنا ثريد لكيفية إضافة الألوان، الخطوط في نظام التصميم:
هنا ثريد لكيفية إضافة الألوان، الخطوط في نظام التصميم:
توجد ايضاً تطبيقات اخرى مثل Asana, Notion, Slack والتي تسمح بتصفح ملف فيجما في نفس التطبيق دون الحاجة إلى فتح ملف فيجما. في هذا الرابط جميع التطبيقات التي تدعم هذا الشئ:
#developer-handoff" target="_blank" rel="noopener" onclick="event.stopPropagation()">figma.com
#developer-handoff" target="_blank" rel="noopener" onclick="event.stopPropagation()">figma.com
وبكذا وصلنا لنهاية الثريد، لاتنسون المشاركة لإفادة الغير وشكراً💜
جاري تحميل الاقتراحات...