الاستيراد من Figma

Send to Vibr إضافة لـ Figma. تقرأ الملف المفتوح لديك في Figma (المتغيرات والأنماط والمكونات والإطارات وروابط النموذج الأولي) وتحفظه في ملف واحد. يستورد Vibr هذا الملف ويبني منه باستخدام نظام التصميم الخاص بك ونموذجك.

ثبّت الإضافة

في Figma، افتح قائمة Plugins، وابحث عن Send to Vibr، وشغّلها. تعمل الإضافة على كل خطط Figma، بما فيها Starter.

اختر ما ترسله

ترسل الإضافة أي مستوى تختاره من الملف، من الملف كله وصولًا إلى عنصر واحد:

• الملف كله: تدفقات النموذج الأولي في كل صفحة، وإلا فشاشاتها، صفحة بعد صفحة. تُتخطى صفحات الغلاف والصور المصغرة والفواصل.
• صفحة دون تحديد أي شيء: تدفقاتها، وإلا فكل شاشة فيها.
• قسم (section): إطاراته، كل منها شاشة.
• إطار: تلك الشاشة.
• عنصر: مكوّن (component)، أو نسخة (instance)، أو أي طبقة داخل إطار. يبنيه Vibr وحده كمكوّن قابل لإعادة الاستخدام.

حدّد ما تريد، أو اختر This page or selection أو Whole file أعلى الإضافة. تعرض الإضافة ما سترسله. ويمكنك الجمع بينها: شاشة وعنصران يُرسلون معًا.

وتحت ذلك، اختر ما يُرسل معها:

• Screens and elements, with layout and prototype links، وInclude frames they link to، ليصل التدفق كاملًا. وتأتي الصور التي فيها أيضًا، مقصوصة كما يعرضها تصميمك.
• Variables, text styles and shadows، من الملف كله.
• Components، مع أشكالها (variants). وتأتي أولًا تلك التي تستخدمها شاشاتك.

يتسع الملف الواحد لما يصل إلى 12 شاشة وعنصرًا، و12 صورة، و80 مكونًا، و1,500 متغير.

احفظ الملف

اختر Save file for Vibr. تحفظ الإضافة ملفًا ينتهي بـ .vibr-figma.json. أما Copy فيضع المحتوى نفسه في الحافظة بدلًا من ذلك.

استورده إلى Vibr

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

يعرض مربع الحوار ما سينشئه Vibr. ألغِ تحديد أي شيء لا تريده:

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

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

عند انتهاء التشغيل، يفتح Vibr الشاشة الأولى. اختر تشغيل للتنقل عبر التدفق. راجع التدفقات.

يعيد استيراد الملف نفسه مرة أخرى استخدام السمة وسلالم الخطوط التي أنشأها الاستيراد الأول.

ما الذي يصبح ماذا

في Figma	في Vibr
متغيرات الألوان	سمة ألوان. تصبح التدرجات مثل Brand/500 والأسماء القصيرة مثل color/clay ألوانها؛ ويبني Vibr منها الأدوار الفاتحة والداكنة ويتحقق من تباينها.
متغيرات نصف القطر والتباعد، وأنماط الظلال	زوايا السمة ووحدة التباعد والظلال.
أنماط النصوص	سلّم خطوط لكل عائلة خطوط، بالأحجام والأوزان وارتفاعات الأسطر وتباعد الأحرف. ويطلب Vibr الخطوط من Google Fonts عندما تتوفر فيه.
تعبئات الصور	صور في مكتبتك، مسمّاة بأسماء طبقاتها (تصبح الطبقة المسماة Photo: latte pour @image/latte-pour)، تستخدمها الشاشات.
الإطارات	شاشات. يحصل النموذج على صورة الإطار ومخطط لطبقاته: التخطيط التلقائي (auto layout) والنص والمكونات والرموز التي تستخدمها كل طبقة.
روابط النموذج الأولي	روابط بين الشاشات. يعود الرجوع إلى الشاشة السابقة. وتُبنى الطبقة المتراكبة داخل الشاشة التي تفتحها، كمربع حوار أو لوحة منبثقة، بروابطها الخاصة.
المكونات	يُبلَّغ النموذج بمكوناتك وأشكالها، ويبني بالأجزاء المطابقة من نظام التصميم الخاص بك.
عنصر	مكوّن يُبنى وحده، في وسط الصفحة.

الخصوصية والأمان

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

نصائح

• سمِّ الإطارات بالأسماء التي تريدها للشاشات. يصبح الإطار المسمى Checkout @screen/checkout.
• في الملفات الكبيرة، أرسل صفحة أو تحديدًا بدلًا من الملف كله.
• بعد التشغيل، حسّن أي شاشة بطلب عادي، مثل «اجعل سلة التسوق لوحة سفلية».