١٧ مايو ٢٠٢٦ · 11 دقائق للقراءة

How to Design App Store Screenshots in Figma

يعد Figma خيارًا قويًا لتصميم لقطات شاشة App Store إذا كنت تريد التحكم الكامل في التخطيط. يمكنك بناء إطارات الأجهزة الخاصة بك، والخطوط، والتدرجات، والمكونات، والإعدادات المسبقة للتصدير، والمتغيرات المحلية. المفاضلة هي أن Figma لا يعرف الكثير عن App Store Connect أو Google Play. عليك إنشاء نظام الإنتاج بنفسك.

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

1. ابدأ بمقاسات المتجر

لا تبدأ بإطار عرض عشوائي. ابدأ بمقاسات البكسل التي تقبلها المتاجر بالفعل. يمكن لـ Apple وGoogle رفض لقطات الشاشة التي لا تتطابق مع قواعد الأبعاد أو التنسيق أو نسبة العرض إلى الارتفاع الخاصة بهما.

بالنسبة للقطات شاشة iPhone الحالية، فإن المقاس الآمن الأساسي لمتجر التطبيقات هو 1320 x 2868 للأجهزة بمقاس 6.9" بوصات. بالنسبة لجهاز iPad، تشمل المقاسات الشائعة 2064 x 2752 لجهاز iPad مقاس 13" بوصة و1668 x 2388 لجهاز iPad مقاس 11" بوصة. يعد Google Play أكثر مرونة، ولكن لقطات الشاشة لا تزال بحاجة إلى التوافق مع قواعد طول الجانب ونسبة العرض إلى الارتفاع الخاصة بـ Google.

مراجع مفيدة:

• مقاسات لقطات الشاشة لـ App Store وGoogle Play
• مواصفات لقطات شاشة Apple
• متطلبات أصول المعاينة في Google Play

2. أنشئ صفحة Figma واحدة لكل نوع من لقطات الشاشة

حافظ على ملفك بسيطًا وقابلاً للتنبؤ. الهيكل النظيف أكثر قيمة من الهيكل الذكي:

• 01 - iPhone 6.9 للقطات شاشة الهاتف الرئيسية لـ App Store.
• 02 - iPad 13 للقطات شاشة iPad.
• 03 - Google Play Phone للقطات شاشة هواتف Android.
• 04 - Components للأنماط المشتركة وإطارات الأجهزة والشارات ونصوص النسخ.
• 05 - Archive للقطات الشاشة القديمة التي قد تحتاجها لاحقًا.

داخل كل صفحة، أنشئ إطارًا واحدًا لكل موضع لقطة شاشة:01 - Main Benefit، و 02 - Feature Detail، و 03 - Social Proof، وهكذا. احتفظ بالبادئة الرقمية في اسم الإطار لأن تصدير Figma سيكون أسهل في الفرز.

3. قم ببناء مكون لقطة شاشة قابل لإعادة الاستخدام

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

بدلاً من ذلك، قم ببناء هيكل لقطة شاشة قابل لإعادة الاستخدام:

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

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

مراجع Figma: خصائص المكونات، و المتغيرات، و التخطيط التلقائي.

4. صمم لقطة الشاشة الأولى كأنك زائر للمتجر

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

صيغة عملية:

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

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

5. حول التخطيط الواحد إلى مجموعة متكاملة

بمجرد أن تعمل لقطة الشاشة الأولى بشكل جيد، كرر الإطار لكل موضع في المتجر وغير رسالة واحدة في كل مرة. تسلسل شائع من سبع لقطات شاشة:

1. النتيجة الرئيسية.
2. سير العمل الأساسي.
3. الميزة التي تميز التطبيق عن غيره.
4. التخصيص أو الإعدادات.
5. الثقة أو الخصوصية أو المزامنة أو التكاملات.
6. حالة استخدام ثانوية.
7. السبب النهائي للتنزيل.

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

6. استعد للتوطين قبل البدء في الترجمة

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

لجعل عملية التوطين أقل عرضة للأخطاء:

• حافظ على النصوص في طبقات يمكن التنبؤ بها: Headline، و Subheadline، و Badge.
• استخدم التخطيط التلقائي (Auto Layout) لحاويات النصوص التي تحتاج إلى التمدد.
• تجنب فواصل السطور الإجبارية ما لم تكن العبارة نهائية.
• اترك عرضًا إضافيًا للغات الألمانية والفرنسية والإسبانية وغيرها من الترجمات الطويلة.
• أنشئ صفحة أو قسمًا منفصلاً لكل لغة فقط بعد استقرار التخطيط الإنجليزي الأساسي.

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

7. إعداد الإعدادات المسبقة للتصدير

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

إعداد التصدير الموصى به:

• اضبط كل إطار لقطة شاشة على أبعاد بكسل المتجر الدقيقة.
• أضف إعداد تصدير PNG لكل إطار نهائي.
• سمِّ الإطارات ببادئة تحتوي على أصفار: 01، و 02، و 03.
• قم بتصدير عائلة أجهزة واحدة في كل مرة حتى لا تختلط الملفات.
• راجع صور PNG المصدرة في Finder قبل رفعها.

تم توثيق سلوك التصدير في Figma في دليل التصدير. قاعدة الإنتاج المهمة بسيطة: يهتم App Store Connect وGoogle Play بالملف النهائي، وليس بمدى نظافة ملف Figma الخاص بك.

8. ارفع اللقطات بحذر

قبل الرفع، تحقق من أربعة أشياء:

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

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

أين يعمل Figma بشكل جيد

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

أين يصبح Figma متعبًا

يصبح Figma أكثر صعوبة عندما تكون لقطات الشاشة جزءًا من عملية الإصدار المنتظمة. نقاط الألم الشائعة:

• إطارات مكررة لكل مقاس جهاز.
• إطارات مكررة لكل لغة.
• الاستبدال اليدوي للقطات شاشة المحاكي.
• التصدير اليدوي وتنظيم المجلدات.
• تخطيطات سهلة التعطل عندما تصبح النصوص المترجمة أطول.
• لا يوجد سير عمل رفع أصلي لـ App Store Connect.

لا شيء من هذا يجعل Figma أداة سيئة. هذا يعني فقط أن Figma أداة تصميم عامة، وليس سير عمل مخصصًا للقطات شاشة App Store.

بديل أسرع للمطورين المستقلين

إذا كنت تقوم بإنشاء لقطات شاشة مرة أو مرتين فقط في السنة، فقد يكون Figma كافيًا. ولكن إذا كنت تشحن التحديثات كثيرًا، أو تدعم لغات متعددة، أو تدير لقطات شاشة App Store وGoogle Play معًا، فجرب Screenshot Bro.

تطبيق Screenshot Bro هو تطبيق macOS أصيل لتصميم لقطات شاشة المتاجر وتوطينها وتصديرها ورفعها. يوفر لك صفوف أجهزة، وقوالب قابلة لإعادة الاستخدام، وتوطينًا مدمجًا، وتصديرًا دفعيًا، و رفعًا إلى App Store Connect دون إعادة بناء نظام إنتاج في Figma. يمكنك أيضًا إلقاء نظرة سريعة على نظرة عامة على الميزات لمعرفة كيف يختلف سير العمل هذا عن ملف تصميم عام.