Figma - كنقطة واحدة من الحقيقة في التصميم

كيف بنينا جميع عمليات تطوير وتنفيذ التصميم حول أداة واحدة.


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


في عام 2017 ، تم إنشاء واجهاتنا في Sketch ، وتم تجميع النماذج الأولية في Marvel ، وتم تمرير التطوير عبر Zeplin . كان كل شيء قياسيًا للوقت حتى ظهر Figma .


هذا المقال لا يتعلق بمقارنة الأدوات ، فقد تمت كتابة هذه المقالات بالفعل بكثرة. إنها تدور حول كيفية مساعدة Figma في شركتنا:


  • تصميم ليصبح عامًا ، وليس امتياز مصمم واحد ؛
  • تنظيم العملية برمتها من أعمال التصميم دون وثائق لا لزوم لها ؛
  • تخلص من الأدوات والموارد غير الضرورية لدعمها.

للمصمم


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


أنشئ نموذجًا نموذجيًا تم تجميعه → تجميع نموذج أولي تفاعلي → تم تسليمه إلى التطوير - وكل هذا بواسطة رابط واحد.

عملية إنشاء التصميم توقفت عن "تجاوز الأختام السبعة" ، أصبحت عامة. حالة شائعة في عملنا: يقوم المصمم بإنشاء واجهة ، ومشارك آخر في المهمة يدخل التصميم ويترك نصيحته في شكل تعليق.


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

للمدير


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


صورة
مثال مشروع التطبيب عن بعد


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


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

للمطور واختبار


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


صورة
لم يشاهد مطورو البرامج سوى تخطيط محدد في Zeplin


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


صورة
التحولات الأفقية بين الشاشات ، الشاشات العمودية - الداخلية


من الملائم أن تكون جميع المخططات في مكان واحد ويمكن للجميع الوصول إليها ، كما أنه من المريح إجراء مراجعة - هناك تعليقات. تكون التنسيقات ذات صلة دائمًا وبنفس الشكل لجميع المشاركين ، من المريح أن تكون المخططات المنفصلة لـ iOS و Android . شيء رائع آخر هو أنه يمكنك إنشاء رابط إلى شاشة محددة وإدخالها في الوثائق. ايرينا موخينا ، اختبار.

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


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

للمسوق


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


صورة
العثور على الأسهم التي فعلت في خريف عام 2018؟ الجبهة الوطنية ، سهل!


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


صورة
نحن نعمل حاليًا على مصمم توضيحات في Figma.


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

وعندما تكون مهمة التسويق ، ولكن تتعلق مباشرة بالمنتج ، فإن العمل الجماعي للمصممين من قسمين ينتقل إلى مستوى جديد. واحد يأتي مع مفهوم مرئي ، والآخر يحاول على واجهة - كل ذلك في تصميم واحد وفي وقت واحد!


الفكر الرئيسي


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

Source: https://habr.com/ru/post/ar456030/


All Articles