لقد سمعت زملاء التصميم يتدفقون حول Figma ، ولكن حان دورك الآن لتجربتها!

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

قدمت Figma وضع Figma Dev لمعالجة هذه المشكلات ، بهدف دعم التعاون السلس في تطوير التصميم.

كيف سيؤثر هذا على سير عملك كمطور؟ تعمق في وضع Figma Dev ، واستكشف ميزاته ، واكتشف أفضل الممارسات لاستخدامه.

ما هو وضع Figma Dev؟

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

يشبه وضع Dev أداة الفحص في Chrome ولكنه ينقل نية المصمم بلغة أكثر شيوعًا.

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

instagram viewer

حاليًا ، وضع Dev في مرحلة تجريبية ، لذلك ستحتاج إلى تطبيق Figma beta لسطح المكتب للوصول إليه.

اتصال سلس مع وضع التطوير

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

حقوق الصورة: فيجما

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

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

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

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

استخراج الأصول بكفاءة

ليس من غير المألوف أن يقدم المصممون أصول تصميم غير مكتملة ، الأمر الذي قد يكون محبطًا. يقدر المطورون الموارد وتوافر المكونات لضمان كفاءة البناء. باستخدام Dev Mode ، يكون استخراج الأصول سهلاً مثل بضع نقرات.

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

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

عمليات تسليم مبسطة

وضع Dev هو أفضل حزمة للتعامل مع عمليات التسليم. فهو يجمع كل ما تحتاجه في مكان واحد يمكنك تخصيصه وفقًا لسير عملك. يساعد وضع Dev في تسريع عملية التسليم من خلال تمكين:

  • التصميم والتطوير في بيئة واحدة
  • التعاون في الوقت الحقيقي
  • التفتيش ومقتطفات التعليمات البرمجية
  • تكامل نظام التصميم
  • تسميات حالة القسم (مثل "جاهز للتطوير")

أفضل الممارسات والنصائح لاستخدام وضع Dev

يمكنك استخدام وضع Dev لـ Figma كجزء من سير عملك ، ولكن كيف يمكنك تحقيق أقصى استفادة منه؟ جرب هذه الاقتراحات.

  • استخدم موارد Dev والمكونات الإضافية لتخصيص تجربتك ؛ اربط الأدوات التي تستخدمها بالفعل في وضع التطوير لتبسيط سير عملك. من GitHub إلى إطارات العمل في مجموعتك ، هناك أنواع للاختيار من بينها.
  • استخدم ميزات الفحص ومقتطفات التعليمات البرمجية للوصول إلى القياسات والمواصفات والأنماط والأصول الخاصة بعناصر التصميم. يمكنك أيضًا إنشاء رمز في مكتبات مختلفة باستخدام المكونات الإضافية.
  • تتبع تغييرات التصميم لضمان عدم تفويت أي شيء. ال قارن التغييرات تعمل الميزة كأداة محفوظات الإصدار — تأكد من التحقق منها بانتظام.
  • استفد من جميع ميزات التعاون للتواصل ، وتواصل مع المصممين باستخدام التعليقات ودردشات المؤشر والمزيد.
  • يمكنك أيضًا فحص العناصر في VS Code بامتداد Figma VS Code الجديد. كما يتيح لك القيام بالمزيد - بما في ذلك التنقل في الملف وتتبع التغيير وتعاون المصمم وتسريع تنفيذ التصميم - دون مغادرة VS Code.
  • ابق على اطلاع على أحدث الميزات ، واطلع على أفضل السبل التي يمكن أن تخدمك بها ، واكتسب المهارات في كل فرصة.

احتضن وضع التطوير لتبسيط سير عملك

يجب أن يجعل وضع Figma Dev سير عملك أكثر كفاءة ، مما يتيح تعاونًا أفضل بين المصممين والمطورين مع الميزات الضرورية.

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