🥪 ☎️ 🍰 فيجميرو. عمل مكوّن إضافي لـ Figma (وقليلاً لـ Miro) 🐺 🗡️ 🤤

في اليوم الثالث ، بناءً على نصيحة الرفاق المؤكدين ، قررنا إنشاء مكون إضافي لتصدير التخطيطات من Figma إلى Miro كصور PNG.

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

في الإنصاف ، تجدر الإشارة إلى أن فكرة هذا التكامل ظلت باقية في أذهان مصممينا لفترة طويلة. منذ وقت ليس ببعيد ، انتقل فريق التصميم بأكمله من مجموعة من Sketch / Zeplin إلى منصة Figma الشهيرة الآن. نقل - تم نقله ، ولكن العديد من السيناريوهات المألوفة لاستخدام الأدوات القديمة أصبحت غير متوفرة.

على وجه الخصوص ، في أغسطس 2019 ، بدأت الروبوتات تعمل في موقع شركة تجارة إلكترونية كبيرة. كان السيناريو التقليدي للعمل مع Sketch كما يلي: نقوم بإلغاء تحميل التخطيطات من Sketch باستخدام مكون إضافي خاص في Miro ومناقشتها مع فريق العميل. نستخدم ميرو كمستودع لجميع مواد المشروع. من السهل العمل مع التعليقات وجمع التغييرات على خرائط الشاشة (ترتيب الأسهم).

كان هناك حوالي 450 تخطيطات في هذا المشروع. لم تأت التعديلات في وقت واحد ، عدة مرات في اليوم أفرغنا التنسيقات مع تغييرات طفيفة. تم إجراء جميع عمليات التفريغ في Figma يدويًا نظرًا لعدم وجود المكون الإضافي اللازم: تم تصدير PNG / JPG ، وحفظها ، وإسقاطها في Miro ، ووضعها بالترتيب الصحيح.

استبدل النص - دقيقة ، أفرغ - من 20 دقيقة إلى ساعة. لاستبدال كلمة واحدة (!) في 15 تخطيطًا ، قضى المصممون ساعة كاملة. لقد أدركنا أن الصادرات بحاجة إلى أتمتة ، مما يوفر الوقت والخلايا العصبية لمصممينا ومديري الفنون.

لذا ، مسلحين بنسخ الكتابة والتفاعل و mobx (شكرًا لـ Figma على فرصة استخدام الأدوات الرائعة) ، بدأنا العمل على البرنامج المساعد.

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

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

عدد مرات العائق: REST API Miro

نظرًا لأن Figma هو تطبيق ويب (يتم استخدام الإلكترون لسطح المكتب) ، فقد أدركنا أن المكون الإضافي الخاص بنا سيعمل في بيئة متصفح. وبالتالي ، ستخضع جميع الطلبات التي سنرسلها إلى Miro REST API لسياسات متصفح CORS .

وهذا يعني أنه إذا أردنا إرسال طلب مع النص بتنسيق التطبيق / json (على سبيل المثال ، للحصول على إذن) والخادم لا "يعجب" بهذا الطلب ، فإن استجابة الخادم "سترسل" إلينا. في حالتنا ، حدث ذلك.

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

العقبة الثانية: مرة أخرى REST API Miro

بعد دراسة الوثائق الرسمية على Miro REST API وحاولت تنفيذ فكرتنا لتصدير الصور من Figma إلى Miro على أساسها ، أدركنا أنه من مجموعة متنوعة من الأدوات المتاحة في Miro (من خلال الأدوات ، نعني الملصقات والأشكال والنص ، وما إلى ذلك) لا تسمح لنا واجهة REST بإنشاء أداة مصغّرة تهمنا بصورة. هذا يعني أن تلك التخطيطات التي قمنا بتحويلها بنجاح إلى PNG على مستوى Figma ، لا يمكننا إرسالها إلى اللوحة المطلوبة في Miro.

ولكن بعد ذلك تذكروا عن مكون إضافي مماثل لـ Sketch ، والذي يعرف بطريقة ما كيفية القيام بمثل هذا التصدير. لقد تقرر ، إذا جاز التعبير ، الاستيلاء على تجربة الزملاء وإلقاء نظرة على شفرة مصدر sketch_plugin ، لأن الرجال من Miro تفضلوا بنشر شفرة المصدر على Github . ثم تبين عدة أشياء دفعة واحدة:

في القرن المنظور ، لا نخطط لصنع مكونات إضافية لـ Sketch ، لأن Frankenstein من Objective-C و JS ، المستخدم لتطوير مكونات Sketch الإضافية ، تموجات متوقعة في عيون عدد الأقواس المربعة عند عرض المصدر ؛

ضع فئة إذا كنت تحب أيضًا الجمع بين أفضل ما في JS و Objective-C.
يعيش نموذج لقطة الشاشة هنا .

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

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

العقبة الثالثة: الأداء

خلال الاختبار التجريبي الأول للمكوِّن الإضافي ، اتضح أن المستخدمين غالبًا ما يكونون غير راضين عن العملية الطويلة لتصدير الصور من Figma إلى Miro. على سبيل المثال ، حوالي 3 دقائق ، تم تفريغ 30 تخطيطًا. تم أخذ حوالي 70٪ من الوقت من هذه الدقائق الثلاث من خلال إرسال نص الطلب إلى الخادم.

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

العقبة الرابعة: سيناريوهات الحواف

يبدو أن سيناريوهات استخدام المكوِّن الإضافي كانت سهلة للعار ، ولكن في عملية العمل ، واجهنا عددًا كبيرًا من حالات الحافة غير المجهزة لعملية المكوّن الإضافي ، والتي كان يجب فعل شيء ما بها.

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

العائق الخامس: الترخيص

إذا أردت فجأة كتابة مكون إضافي لـ Figma ، فكن مستعدًا لحقيقة أن التفويض من خلال خدمات الطرف الثالث (google ، facebook ، slack ، إلخ) لن يكون متاحًا لك ، لأن المكونات الإضافية في Figma تعمل من خلال إطارات iframe ، ولا يفضل بروتوكول oAuth التفويض من خلال الإطارات العائمة في قوة سياسات أمنية معينة (على وجه الخصوص ، لمنع هجمات النقر على النقرات ).

ماذا يعني هذا في سياق البرنامج المساعد لدينا؟ هذا يعني أن المستخدمين المسجلين في Miro من خلال خدمات الجهات الخارجية لن يكونوا قادرين على تسجيل الدخول عبر البرنامج المساعد باستخدام اسم المستخدم / كلمة المرور وتحديد اللوحة المطلوبة حيث تريد تصدير التخطيطات من Figma. ولن يتمكنوا من القيام بذلك ، لأنه عند التسجيل من خلال خدمات الطرف الثالث ، يقوم Miro بتعيين البريد الإلكتروني لحساب المستخدم المستقبلي فقط ، وليس كلمة المرور.

الحل الذي اخترناه بسيط للغاية: نحذر المستخدم من المكون الإضافي أنه إذا تم تسجيله من خلال خدمة طرف ثالث في Miro ولم يكن لديه كلمة مرور ، فإنه يحتاج إلى استخدام الوظيفة القياسية "استعادة كلمة المرور عبر البريد الإلكتروني" لاستلام كلمة المرور أو استعادتها.

نتيجة لذلك ، لم ننجح في التنافس مع Miro. لم يتحقق التقييم المتفائل في أسبوعين من التطوير ونما إلى شهرين ، حيث شاركنا في هذا المشروع في وقت فراغنا.

وأضاف طعم حاد للوضع هو حقيقة أنه في حين كنا حل المشاكل التقنية، وميرو أعلنالفائزون ، من بينهم Semyon Volkov و Roman Krasilnikov مع مكون إضافي لـ Figma2Miro. مشروعهم احتل المركز السادس. على عكس التنفيذ ، الذي كان لا يزال مكونًا إضافيًا لـ Figma (من وجهة نظر واجهة المستخدم والنظام الأساسي الذي يبدأ التصدير) ، فقد صنعوا المكون الإضافي لـ Miro.

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

الآن ، بفضل Figmiro ، فإن مصممينا يوفرون الكثير من الوقت في استيراد التخطيطات من نظام إلى آخر. على سبيل المثال ، تحولت تلك الساعة من تفريغ التخطيطات من اقتباس من سيرجي كوتكوف إلى دقيقتين (!).

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

ما يمكن أن يفعله البرنامج المساعد Figmiro

كل شيء يعمل بالطريقة نفسها التي اعتدنا القيام بها في Sketch: حدد الإطارات وانقر فوق الزر وستظهر التخطيطات في Miro:

قم بتحميل الإطارات المحددة إلى اللوحة المحددة في Miro.
الكتابة فوق التخطيطات التي تم تفريغها مسبقًا مع الحفاظ على موضع على الألواح.

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

عملت البرنامج المساعد Figmiro

المصمم أنتون ماجارتسوف ، المطور الرائد لنظام التشغيل iOS رومان تشوركين ، ومطوري الواجهة الأمامية أنطون إيريشيف وإيليا كروبنوف ، ومدير تطوير الخادم أندريه مورافيوف والمدير الفني سيرجي كوتكوف.

جميع الروابط:

البرنامج المساعد في Github ،
الوكيل في Github ،
البرنامج المساعد في Figma .

نحن وجمع ردود الفعل على تشغيل المساعد على جيثب.

ملاحظة
نحن نعلم مدى صعوبة إنشاء واجهات برمجة تطبيقات عامة للخدمات ، مع تلبية جميع احتياجات مستخدمي واجهات برمجة التطبيقات هذه.

فريق Redmadrobot ممتن للرجال من Miro و Figma لإتاحة الفرصة لأتمتة عملياتنا الروتينية.

فيجميرو. عمل مكوّن إضافي لـ Figma (وقليلاً لـ Miro)