فيجما هي أداة تصميم واجهات تعاونية تساعد في سد فجوة التواصل بين المصممين والمطورين.
يشرح هذا الدليل كيف يمكنك التعاون مع فيجما.
الوصول
- الوصول إلى الرابط المشترك: يمكنك الوصول إلى ملف فيجما الخاص بالمشروع هنا.
- تسجيل الدخول: إذا لم تكن قد سجلت دخولك بالفعل، سيطلب منك فيجما القيام بذلك.
تتوفر المميزات الرئيسية فقط للمستخدمين الذين قاموا بتسجيل الدخول، مثل وضع المطور والقدرة على اختيار إطار مخصص.
لن تتمكن من التعاون بفعالية بدون حساب.
هيكل فيجما
On the left sidebar, you can access the different pages of Twenty’s Figma. هكذا هم مُنظمون:
- صفحة المكونات: هذه هي الصفحة الأولى. يستخدمها المصمم لإنشاء وتنظيم العناصر التصميمية القابلة لإعادة الاستخدام في ملف التصميم. على سبيل المثال، الأزرار، الأيقونات، الرموز أو أي مكونات أخرى قابلة لإعادة الاستخدام. تعمل على الحفاظ على التناسق عبر التصميم.
- الصفحة الرئيسية: الصفحة الثانية هي الصفحة الرئيسية التي تظهر واجهة المستخدم الكاملة للمشروع. يمكنك الضغط على تشغيل لاستخدام النموذج الأولي الكامل للتطبيق.
- صفحات الميزات: الصفحات الأخرى تكون مخصصة عادة للميزات قيد التقدم. تحتوي على تصميم الميزات أو الوحدات المحددة للتطبيق أو الموقع الإلكتروني. عادة ما تكون لا تزال قيد التقدم.
نصائح مفيدة
مع الوصول لعرض فقط، لا يمكنك تحرير التصميم، ولكن يمكنك الوصول إلى جميع الميزات التي ستكون مفيدة لتحويل التصميمات إلى كود.
استخدم وضع المطور
يعزز وضع المطور في فيجما إنتاجية المطورين من خلال توفير التنقل السهل في التصميم، إدارة فعالة للموارد، أدوات اتصال فعالة، تكاملات طقم الأدوات، مقتطفات كود سريعة، ومعلومات رئيسية عن الطبقات، مما يسد الفجوة بين التصميم والتطوير. يمكنك معرفة المزيد عن وضع المطور هنا.
قم بالتبديل إلى وضع “المطور” في الجزء الأيمن من شريط الأدوات لتشاهد مواصفات التصميم، نسخ CSS، والوصول إلى الموارد.
استخدم النموذج الأولي
انقر على أي عنصر على اللوحة واضغط على زر “تشغيل” في نهاية الحافة العلوية لواجهة المستخدم للوصول إلى عرض النموذج الأولي. يسمح لك وضع النموذج الأولي بالتفاعل مع التصميم كما لو كان المنتج النهائي. يوضح التدفق بين الشاشات وكيف تتصرف عناصر الواجهة مثل الأزرار، الروابط، أو القوائم عند التفاعل معها.
- فهم الانتقالات والرسوم المتحركة: في وضع النموذج الأولي، يمكنك مشاهدة أي انتقالات أو رسوم متحركة أضافها المصمم بين الشاشات أو عناصر واجهة المستخدم، مما يوفر تعليمات بصرية واضحة للمطورين حول السلوك والنمط المقصود.
- توضيح التنفيذ: يمكن أن يساعد النموذج الأولي أيضًا في تقليل الغموض. يمكن للمطورين التفاعل معه لاكتساب فهم أفضل لوظيفة أو مظهر عناصر معينة.
للحصول على تفاصيل شاملة وإرشادات لتعلم منصة فيجما، يمكنك زيارة وثائق فيجما الرسمية.
قياس المسافات
حدد عنصرًا، اضغط مع الاستمرار على مفتاح Option (لماك) أو مفتاح Alt (لويندوز)، ثم مرر فوق عنصر آخر لرؤية المسافة بينهما.
إضافة فيجما لـ VSCode (موصى به)
فيجما لـ VS Code يتيح لك التنقل ومعاينة ملفات التصميم، التعاون مع المصممين، تتبع التغييرات، وتسريع التنفيذ - دون مغادرة محرر النصوص الخاص بك.
إنها جزء من الإضافات الموصى بها لدينا.
التعاون
- استخدام التعليقات: يمكنك استخدام ميزة التعليق بالنقر على أيقونة الفقاعة في الجزء الأيسر من شريط الأدوات.
- دردشة المؤشر: ميزة لطيفة في فيجما هي دردشة المؤشر. فقط اضغط على
; على ماك و/ على ويندوز لإرسال رسالة إذا رأيت شخصًا آخر يستخدم فيجما في نفس الوقت الذي تستخدمه فيه.
